selectable rows in listing feature

Author: nikitaeverywhere

example/index.html

@@ -114,6 +114,7 @@
                 //, back: function ({Object { level: {number} }}) {}
                 // if cellDrillThrough callback returns boolean false, DrillThrough won't be performed.
                 //, cellDrillThrough: function ({Object { event: {event}, filters: {string[]} }}) {}
+                //, rowSelect: function (rs) { console.log("Rows: ", rs); }
             }
             , pagination: 30 // Maximum rows number on one page (default: 200, turn off: 0)
             //, hideButtons: true // hides "back" and "drillThrough" buttons
@@ -132,6 +133,7 @@
             //, enableSearch: false // enables search panel in listing
             //, stretchColumns: true // stretch columns to fill all available width (default: true)
             //, showRowNumbers: true // show the row number in first column
+            //, enableListingSelect: true // enable selection in listing
         };
 
         var e;

export/LightPivotTable-DeepSeePortlet.xml

@@ -11,7 +11,7 @@
 
 <Class name="DeepSee.LightPivotTable">
 <Super>%DeepSee.Component.Portlet.abstractPortlet</Super>
-<TimeChanged>63699,80103.61817</TimeChanged>
+<TimeChanged>63700,68026.762239</TimeChanged>
 <TimeCreated>63515,61322.546099</TimeCreated>
 
 <Parameter name="INCLUDEFILES">
@@ -263,6 +263,13 @@
                         basicMDX: info["mdx"],
                         MDX2JSONSource: source,
                         namespace: container.getAttribute("namespace")
+                    },
+                    triggers: {
+                        rowSelect: function (selectedRows) {
+                            var ss = [];
+                            selectedRows.forEach(function (e) { ss.push(e + ",," + (e + 1) + ",,,1") });
+                            controller.setProperty("selectedRange", ss.join("\n"));
+                        }
                     }
                 }
                 if (controller.contextFilterSpec) {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "LightPivotTable",
   "author": "ZitRo",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A lightweight pivot table for MDX2JSON source for InterSystems Cache",
   "main": "test/testServer.js",
   "repository": {

readme.md

@@ -52,6 +52,7 @@ var setup = { // Object that contain settings. Properties in brackets can be mis
             // if cellDrillThrough callback returns boolean false, DrillThrough won't be performed.
             , cellDrillThrough: function ({Object { event: {event}, filters: {string[]}, cellData: {object} }}) {}
             , responseHandler: function ({Object {url: {string}, status: {number}}}) {}
+            , rowSelect: function ({Array}) {}
         } ]
         [ , pagination: 30 ] // Maximum rows number on one page (default: 200, turn off: 0)
         [ , hideButtons: true ] // hides "back" and "drillThrough" buttons
@@ -70,6 +71,7 @@ var setup = { // Object that contain settings. Properties in brackets can be mis
         [ , columnResizeAnimation: false ] // animate column when resizing
         [ , enableSearch: true ] // enables search panel in listing (default: true)
         [ , showRowNumbers: true ] // show the row number in first column
+        [ , enableListingSelect: true ] // enable listing selection, true by default
     },
     lp = new LightPivotTable(setup);
 
@@ -86,6 +88,7 @@ lp.refresh(); // refresh pivot contents
 lp.updateSizes(); // recalculate pivot sizes
 lp.changeBasicMDX("..."); // change mdx for LPT
 lp.getActualMDX(); // returns currently displayed MDX
+lp.getSelectedRows(); // returns array with selected rows indexes. First row have index 1.
 ```
 
 #### Caché DeepSee

source/js/LightPivotTable.js

@@ -105,6 +105,21 @@ LightPivotTable.prototype.getActualMDX = function () {
 
 };
 
+/**
+ * Return array with selected rows indexes.
+ */
+LightPivotTable.prototype.getSelectedRows = function () {
+
+    var arr = [], rows = this.pivotView.selectedRows, i;
+
+    for (i in rows) {
+        if (rows[i]) arr.push(+i);
+    }
+
+    return arr;
+
+};
+
 /**
  * Performs resizing.
  */
@@ -299,6 +314,7 @@ LightPivotTable.prototype.normalizeConfiguration = function (config) {
     if (typeof config["pagination"] === "undefined") config.pagination = 200;
     if (typeof config["enableSearch"] === "undefined") config.enableSearch = true;
     if (typeof config["stretchColumns"] === "undefined") config.stretchColumns = true;
+    if (typeof config["enableListingSelect"] === "undefined") config.enableListingSelect = true;
     if (!config["triggers"]) config.triggers = {};
     if (!config["dataSource"]) config.dataSource = {};
 };

source/js/PivotView.js

@@ -9,6 +9,7 @@ var PivotView = function (controller, container) {
         "instance \"container\" into pivot table configuration.");
 
     this.tablesStack = [];
+    this.selectedRows = {}; // rowNumber: 1
 
     numeral.call(this);
 
@@ -150,6 +151,7 @@ PivotView.prototype.pushTable = function (opts) {
     if (this.tablesStack.length) {
         this.tablesStack[this.tablesStack.length - 1].FIXED_COLUMN_SIZES = this.FIXED_COLUMN_SIZES;
         this.tablesStack[this.tablesStack.length - 1].savedSearch = this.savedSearch;
+        this.tablesStack[this.tablesStack.length - 1].selectedRows = this.selectedRows;
         this.savedSearch = { restore: false, value: "", columnIndex: 0 };
         tableElement.style.left = "100%";
     }
@@ -166,6 +168,7 @@ PivotView.prototype.pushTable = function (opts) {
     });
 
     this.FIXED_COLUMN_SIZES = [];
+    this.selectedRows = {};
     this.elements.base.appendChild(tableElement);
     this.elements.tableContainer = tableElement;
     this.pagination = pg;
@@ -189,6 +192,7 @@ PivotView.prototype.popTable = function () {
     this.pagination = (currentTable = this.tablesStack[this.tablesStack.length - 1]).pagination;
     if (currentTable.FIXED_COLUMN_SIZES) this.FIXED_COLUMN_SIZES = currentTable.FIXED_COLUMN_SIZES;
     if (currentTable.savedSearch) this.savedSearch = currentTable.savedSearch;
+    if (currentTable.selectedRows) this.selectedRows = currentTable.selectedRows;
 
     setTimeout(function () {
         garbage.element.parentNode.removeChild(garbage.element);
@@ -237,9 +241,7 @@ PivotView.prototype.dataChanged = function (data) {
 
     if (this.controller.CONFIG.pagination) this.pagination.on = true;
     this.pagination.rows = this.controller.CONFIG.pagination || Infinity;
-        //? this.controller.CONFIG.pagination
-            //+ data.info.topHeaderRowsNumber + (data.info.SUMMARY_SHOWN ? 1 : 0)
-        //: Infinity;
+    this.selectedRows = {};
     this.pagination.page = 0;
     this.pagination.pages = Math.ceil(dataRows / this.pagination.rows);
     if (this.pagination.pages < 2) this.pagination.on = false;
@@ -505,6 +507,23 @@ PivotView.prototype.colorNameToRGB = function (name) {
     }
 };
 
+/**
+ * @param {boolean} select - select or not.
+ * @param {number} rowNumber - row number start from 0.
+ */
+PivotView.prototype.selectRow = function (select, rowNumber) {
+
+    if (select)
+        this.selectedRows[rowNumber] = 1;
+    else
+        delete this.selectedRows[rowNumber];
+
+    if (typeof this.controller.CONFIG.triggers["rowSelect"] === "function") {
+        this.controller.CONFIG.triggers["rowSelect"](this.controller.getSelectedRows());
+    }
+
+};
+
 /**
  * Size updater for LPT.
  * Do not affect scroll positions in this function.
@@ -728,6 +747,7 @@ PivotView.prototype.renderRawData = function (data) {
         COLUMN_RESIZE_ON = !!this.controller.CONFIG.columnResizing,
         LISTING = info.leftHeaderColumnsNumber === 0,
         SEARCH_ENABLED = LISTING && this.controller.CONFIG["enableSearch"],
+        LISTING_SELECT_ENABLED = this.controller.CONFIG["enableListingSelect"],
         RESIZE_ANIMATION = !!this.controller.CONFIG["columnResizeAnimation"],
 
         container = this.elements.tableContainer,
@@ -856,7 +876,26 @@ PivotView.prototype.renderRawData = function (data) {
     var renderHeader = function (xFrom, xTo, yFrom, yTo, targetElement) {
 
         var vertical = targetElement === LHTHead,
-            rendered, separatelyGrouped, tr, th, div;
+            rendered, separatelyGrouped, tr, th, div, checkbox;
+
+        if (xFrom === xTo && LISTING_SELECT_ENABLED) { // listing
+            for (y = yFrom; y < yTo; y++) {
+                tr = document.createElement("tr");
+                th = document.createElement("td");
+                checkbox = document.createElement("input");
+                checkbox.setAttribute("type", "checkbox");
+                checkbox.checked = !!_.selectedRows[y];
+                th.setAttribute("style", "padding: 0 !important;");
+                checkbox.addEventListener("change", (function (y) { return function (e) {
+                    _.selectRow.call(_, (e.srcElement || e.target).checked, y);
+                }})(y));
+                th.appendChild(checkbox);
+                tr.appendChild(th);
+                primaryRows.push(th);
+                targetElement.appendChild(tr);
+            }
+            return;
+        }
 
         for (y = yFrom; y < yTo; y++) {
             for (x = xFrom; x < xTo; x++) {