Browse Source

HUE-3991 [editor] Removing a result column in a table > 300 rows breaks the grid

Added fnSetColumnVis and fnSettings to hueDatatable, just enough to support visibility.
Johan Ahlen 9 năm trước cách đây
mục cha
commit
4c9ad8d

+ 47 - 6
desktop/core/src/desktop/static/desktop/js/jquery.huedatatable.js

@@ -22,19 +22,51 @@
   $.fn.hueDataTable = function (oInit) {
 
     var self = this;
-    this.$table = null;
+    self.$table = null;
+
+    self.fnSetColumnVis = function(index, visible) {
+      var aoColumns = this.$table.data('aoColumns');
+      var change = aoColumns[index].bVisible !== visible;
+      aoColumns[index].bVisible = visible;
+      if (!change) {
+        return;
+      }
+      if (!visible) {
+        self.$table.find('tr').find('td:eq(' + index + '),th:eq(' + index + ')').hide();
+      } else {
+        self.$table.find('tr').find('td:eq(' + index + '),th:eq(' + index + ')').show();
+      }
+    }
+
+    self.fnAddData = function (mData, bRedraw) {
+      var aoColumns = this.$table.data('aoColumns');
 
-    this.fnAddData = function (mData, bRedraw) {
       var $t = self.$table;
       if (mData.length === 0) {
         return;
       }
+
+      if (aoColumns.length === 0) {
+        mData[0].forEach(function () {
+          aoColumns.push({
+            bVisible: true
+          })
+        })
+      }
+
+
       var appendable = $t.children('tbody').length > 0 ? $t.children('tbody') : $t;
       var html = '';
       mData.forEach(function (row) {
         html += '<tr>';
+        var index = 0;
         row.forEach(function (cell) {
-          html += '<td>' + cell + '</td>';
+          if (aoColumns[index].bVisible) {
+            html += '<td>' + cell + '</td>';
+          } else {
+            html += '<td style="display: none;">' + cell + '</td>';
+          }
+          index++;
         });
         html += '</tr>';
       });
@@ -44,7 +76,14 @@
       }
     };
 
-    this.fnClearTable = function (bRedraw) {
+    self.fnSettings = function () {
+      var aoColumns = self.$table.data('aoColumns');
+      return {
+        aoColumns: aoColumns
+      }
+    }
+
+    self.fnClearTable = function (bRedraw) {
       var $t = self.$table;
       if ($t.children('tbody').length > 0) {
         $t.children('tbody').empty();
@@ -54,17 +93,19 @@
       }
     };
 
-    this.fnDestroy = function () {
+    self.fnDestroy = function () {
       self.$table.unwrap();
       self.$table.removeClass('table-huedatatable');
     };
 
-    return this.each(function () {
+    return self.each(function () {
       self.$table = $(this);
       var parent = self.$table.parent();
       if (parent.hasClass('dataTables_wrapper')) {
         return;
       }
+      self.$table.data('aoRows', []);
+      self.$table.data('aoColumns', []);
       self.$table.wrap('<div class="dataTables_wrapper"></div>');
       self.$table.addClass('table-huedatatable');
     });

+ 9 - 4
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1459,7 +1459,7 @@ ${ hueIcons.symbols() }
     </ul>
     <ul class="unstyled" data-bind="foreach: result.meta">
       <li data-bind="visible: name != ''">
-        <input type="checkbox" checked="checked" data-bind="event: { change: function(){toggleColumn($element, $index());}}" />
+        <input type="checkbox" checked="checked" data-bind="event: { change: function(){ toggleColumn($element, $index(), $parent);} }" />
         <a class="pointer" data-bind="text: $data.name, click: function(){ scrollToColumn($element, $index()); }, attr: { title: $data.type + ' ' + '${ _('Click to scroll to data') }'}"></a>
       </li>
     </ul>
@@ -2222,9 +2222,14 @@ ${ hueIcons.symbols() }
     return _dt;
   }
 
-  function toggleColumn(linkElement, index) {
-    var _dt = $(linkElement).parents(".snippet").find("table.resultTable:eq(0)").dataTable();
-    _dt.fnSetColumnVis(index, !_dt.fnSettings().aoColumns[index].bVisible);
+  function toggleColumn(linkElement, index, snippet) {
+    var dt;
+    if (snippet.result.hasManyColumns()) {
+      dt = $(linkElement).parents(".snippet").find("table.resultTable:eq(0)").hueDataTable();
+    } else {
+      dt = $(linkElement).parents(".snippet").find("table.resultTable:eq(0)").dataTable();
+    }
+    dt.fnSetColumnVis(index, !dt.fnSettings().aoColumns[index].bVisible);
   }
 
   function scrollToColumn(linkElement) {