Просмотр исходного кода

HUE-7320 [frontend] Add multiCheck binding that supports foreachVisible

Johan Ahlen 8 лет назад
Родитель
Сommit
1d67e6e

+ 45 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -1078,6 +1078,51 @@
     }
   };
 
+  ko.bindingHandlers.multiCheckForeachVisible = {
+    init: function (element, valueAccessor, allBindings, clickedEntry, bindingContext) {
+      var $element = $(element);
+      var parentContext = bindingContext.$parentContext;
+
+      var selectedAttr = valueAccessor().selectedAttr;
+      var entries = valueAccessor().entries;
+
+      $element.attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
+
+      $element.on('click', function (e) {
+        if (e.shiftKey && parentContext.$multiCheckLastEntry) {
+          var lastEntry = parentContext.$multiCheckLastEntry;
+          var inside = false;
+          entries().every(function (otherEntry) {
+            if (otherEntry === lastEntry || otherEntry === clickedEntry) {
+              if (inside) {
+                return false;
+              }
+              inside = true;
+              return true;
+            }
+            if (inside && otherEntry[selectedAttr]() !== lastEntry[selectedAttr]()) {
+              otherEntry[selectedAttr](lastEntry[selectedAttr]());
+            }
+            return true;
+          });
+          if (clickedEntry[selectedAttr]() !== lastEntry[selectedAttr]()) {
+            clickedEntry[selectedAttr](lastEntry[selectedAttr]());
+          }
+        } else {
+          clickedEntry[selectedAttr](!clickedEntry[selectedAttr]());
+        }
+
+        parentContext.$multiCheckLastEntry = clickedEntry;
+        parentContext.$multiCheckLastChecked = clickedEntry[selectedAttr]();
+      });
+
+      ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
+        $element.off('click');
+      });
+    },
+    update: function () {}
+  };
+
   ko.bindingHandlers.multiCheck = {
     init: function (element, valueAccessor) {
       $(element).attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);

+ 3 - 3
desktop/core/src/desktop/templates/ko_components/ko_sql_columns_table.mako

@@ -58,14 +58,14 @@ from desktop.views import _ko
           </tr>
           </thead>
           <!-- /ko -->
-          <tbody data-bind="foreachVisible: { data: filteredColumns, minHeight: 29, container: '.sql-columns-table', pubSubDispose: 'context.popover.dispose' }">
+          <tbody data-bind="foreachVisible: { data: filteredColumns, disableNiceScroll: true, minHeight: 29, container: '.sql-columns-table', pubSubDispose: 'context.popover.dispose' }">
           <tr>
             <!-- ko if: typeof selected === 'undefined' -->
             <td data-bind="text: $index()+$indexOffset()+1"></td>
             <!-- /ko -->
             <!-- ko if: typeof selected !== 'undefined' -->
-            <td data-bind="toggle: selected" class="center" style="cursor: default;">
-              <div class="hueCheckbox fa" data-bind="multiCheck: '#sqlColumnsTable', css: {'fa-check': selected }"></div>
+            <td class="center" data-bind="multiCheckForeachVisible: { entries: $parent.filteredColumns, selectedAttr: 'selected' }" style="cursor: default;">
+              <div class="hueCheckbox fa" data-bind="css: {'fa-check': selected }"></div>
             </td>
 
             <!-- /ko -->