Maintain internal checked rows state, update DOM state while scrolling

lib/ReGrid.js

@@ -208,10 +208,17 @@ var ReGrid = function () {
       // defer remaining rows
       this.data.rows.slice(this.start, this.end));
 
+      var self = this;
+
       this.clusterize = new Clusterize({
         rows: initialData,
         scrollElem: this.bodyScrollable.get(0),
-        contentElem: this.bodyScrollable.find('tbody').get(0)
+        contentElem: this.bodyScrollable.find('tbody').get(0),
+        callbacks: {
+          clusterChanged: function clusterChanged() {
+            self.highlightCheckedRows();
+          }
+        }
       });
       this.log('dataAppended', this.pageLength);
       this.appendRemainingData();
@@ -666,6 +673,9 @@ var ReGrid = function () {
       if (!this.options.addCheckbox) return;
       var self = this;
 
+      // map of checked rows
+      this.checkMap = [];
+
       this.wrapper.on('click', '.data-table-col[data-col-index="0"] [type="checkbox"]', function () {
         var $checkbox = $(this);
         var $cell = $checkbox.closest('.data-table-col');
@@ -677,19 +687,57 @@ var ReGrid = function () {
         var checked = $checkbox.is(':checked');
 
         if (isHeader) {
-          self.highlightAll(checked);
+          self.checkAll(checked);
         } else {
-          self.highlightRow(rowIndex, checked);
+          self.checkRow(rowIndex, checked);
         }
       });
     }
   }, {
-    key: 'highlightAll',
-    value: function highlightAll() {
-      var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    key: 'getCheckedRows',
+    value: function getCheckedRows() {
+      return this.checkMap.map(function (c, rowIndex) {
+        if (c) {
+          return rowIndex;
+        }
+        return null;
+      }).filter(function (c) {
+        return c !== null || c !== undefined;
+      });
+    }
+  }, {
+    key: 'highlightCheckedRows',
+    value: function highlightCheckedRows() {
+      var _this4 = this;
 
+      this.getCheckedRows().map(function (rowIndex) {
+        return _this4.checkRow(rowIndex, true);
+      });
+    }
+  }, {
+    key: 'checkRow',
+    value: function checkRow(rowIndex, toggle) {
+      var value = toggle ? 1 : 0;
+
+      // update internal map
+      this.checkMap[rowIndex] = value;
+      // set checkbox value explicitly
+      this.bodyScrollable.find('.data-table-col[data-row-index="' + rowIndex + '"][data-col-index="0"] [type="checkbox"]').prop('checked', toggle);
+      // highlight row
+      this.highlightRow(rowIndex, toggle);
+    }
+  }, {
+    key: 'checkAll',
+    value: function checkAll(toggle) {
+      var value = toggle ? 1 : 0;
+
+      this.checkMap.map(function (c) {
+        return value;
+      });
+      // set checkbox value
       this.bodyScrollable.find('.data-table-col[data-col-index="0"] [type="checkbox"]').prop('checked', toggle);
-      this.bodyScrollable.find('.data-table-row').toggleClass('row-highlight', toggle);
+      // highlight all
+      this.highlightAll(toggle);
     }
   }, {
     key: 'highlightRow',
@@ -704,6 +752,13 @@ var ReGrid = function () {
         $row.removeClass('row-highlight');
       }
     }
+  }, {
+    key: 'highlightAll',
+    value: function highlightAll() {
+      var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+      this.bodyScrollable.find('.data-table-row').toggleClass('row-highlight', toggle);
+    }
   }, {
     key: 'setColumnWidth',
     value: function setColumnWidth(colIndex, width) {
@@ -740,7 +795,7 @@ var ReGrid = function () {
   }, {
     key: 'setColumnWidths',
     value: function setColumnWidths() {
-      var _this4 = this;
+      var _this5 = this;
 
       var availableWidth = this.wrapper.width();
       var headerWidth = this.header.width();
@@ -753,15 +808,15 @@ var ReGrid = function () {
       var deltaWidth = (availableWidth - headerWidth) / this.data.columns.length;
 
       this.data.columns.map(function (col) {
-        var width = _this4.getColumnHeaderElement(col.colIndex).width();
+        var width = _this5.getColumnHeaderElement(col.colIndex).width();
         var finalWidth = width + deltaWidth - 16;
 
-        if (_this4.options.addSerialNoColumn && col.colIndex === 0) {
+        if (_this5.options.addSerialNoColumn && col.colIndex === 0) {
           return;
         }
 
-        _this4.setColumnHeaderWidth(col.colIndex, finalWidth);
-        _this4.setColumnWidth(col.colIndex, finalWidth);
+        _this5.setColumnHeaderWidth(col.colIndex, finalWidth);
+        _this5.setColumnWidth(col.colIndex, finalWidth);
       });
       this.setBodyWidth();
     }

src/regrid.js

@@ -119,10 +119,17 @@ export default class ReGrid {
       this.data.rows.slice(this.start, this.end)
     );
 
+    const self = this;
+
     this.clusterize = new Clusterize({
       rows: initialData,
       scrollElem: this.bodyScrollable.get(0),
-      contentElem: this.bodyScrollable.find('tbody').get(0)
+      contentElem: this.bodyScrollable.find('tbody').get(0),
+      callbacks: {
+        clusterChanged() {
+          self.highlightCheckedRows();
+        }
+      }
     });
     this.log('dataAppended', this.pageLength);
     this.appendRemainingData();
@@ -534,6 +541,9 @@ export default class ReGrid {
     if (!this.options.addCheckbox) return;
     const self = this;
 
+    // map of checked rows
+    this.checkMap = [];
+
     this.wrapper.on('click', '.data-table-col[data-col-index="0"] [type="checkbox"]', function () {
       const $checkbox = $(this);
       const $cell = $checkbox.closest('.data-table-col');
@@ -541,20 +551,54 @@ export default class ReGrid {
       const checked = $checkbox.is(':checked');
 
       if (isHeader) {
-        self.highlightAll(checked);
+        self.checkAll(checked);
       } else {
-        self.highlightRow(rowIndex, checked);
+        self.checkRow(rowIndex, checked);
       }
     });
   }
 
-  highlightAll(toggle = true) {
+  getCheckedRows() {
+    return this.checkMap
+      .map((c, rowIndex) => {
+        if (c) {
+          return rowIndex;
+        }
+        return null;
+      })
+      .filter(c => {
+        return c !== null || c !== undefined;
+      });
+  }
+
+  highlightCheckedRows() {
+    this.getCheckedRows()
+      .map(rowIndex => this.checkRow(rowIndex, true));
+  }
+
+  checkRow(rowIndex, toggle) {
+    const value = toggle ? 1 : 0;
+
+    // update internal map
+    this.checkMap[rowIndex] = value;
+    // set checkbox value explicitly
+    this.bodyScrollable
+      .find(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`)
+      .prop('checked', toggle);
+    // highlight row
+    this.highlightRow(rowIndex, toggle);
+  }
+
+  checkAll(toggle) {
+    const value = toggle ? 1 : 0;
+
+    this.checkMap.map(c => value);
+    // set checkbox value
     this.bodyScrollable
       .find('.data-table-col[data-col-index="0"] [type="checkbox"]')
       .prop('checked', toggle);
-    this.bodyScrollable
-      .find('.data-table-row')
-      .toggleClass('row-highlight', toggle);
+    // highlight all
+    this.highlightAll(toggle);
   }
 
   highlightRow(rowIndex, toggle = true) {
@@ -567,6 +611,12 @@ export default class ReGrid {
     }
   }
 
+  highlightAll(toggle = true) {
+    this.bodyScrollable
+      .find('.data-table-row')
+      .toggleClass('row-highlight', toggle);
+  }
+
   setColumnWidth(colIndex, width) {
     // set width for content
     this.setStyle(`[data-col-index="${colIndex}"] .content`, {