Bootstrap table data diffing

package.json

@@ -42,6 +42,7 @@
     "jqGrid": "^5.1.1",
     "jquery": "2.2.1",
     "jqwidgets-framework": "^4.4.0",
+    "lodash": "^4.17.4",
     "moment": "2.16.0",
     "perfect-scrollbar": "^0.6.16",
     "stats.js": "^0.17.0",

src/components/bootstrap-table/bootstrap-table.html

@@ -3,10 +3,10 @@
     text-decoration: underline;
   }
   .demo-wrap{
-    margin-bottom:1em;
+    margin-bottom:8em;
   }
   .table-wrap{
-    max-width: 450px;
+    max-width: 1026px;
     height: 350px;
     display:inline-block;
     margin-bottom:5em;
@@ -28,6 +28,7 @@ <h2>{{demoVm.title}}</h2>
     </div>
 
 
+
   </div>
 
 
@@ -88,12 +89,34 @@ <h2>{{demoVm.title}}</h2>
     vm = can.viewModel('.demo');
 
 
-  var mockData = getMockData(20,20000);
+  var startIndex = 0,
+      refreshIntervalDuration = 10000,
+      // refreshIntervalDuration = 10000,
+      cols = 20, //this is not used with real data
+      rows = 20000,
+      maxRows = 40000,
+      // maxRows = 50000,
+      mockData = getMockData(cols,rows, startIndex),
+      demoVm = new DemoVM({
+        title: 'Demo for bootstrap-table',
+        tableData: mockData
+      }),
+      refreshInterval = setInterval(() => {
+        // debugger;
+        startIndex += rows;
+        if(startIndex >= maxRows){
+          clearInterval(refreshInterval);
+          return;
+        }
+        let newData = getMockData(cols, rows, startIndex),
+            tableData = demoVm.attr("tableData").attr();
+
+        tableData.rows.push.apply(tableData.rows, newData.rows);
+        demoVm.attr("tableData", tableData);
+      }, refreshIntervalDuration);
+
   vm.attr({
-    demoVm: new DemoVM({
-      title: 'Demo for bootstrap-table',
-      tableData: mockData
-    })
+    demoVm: demoVm
   });
 
 </script>

src/components/bootstrap-table/bootstrap-table.js

@@ -8,10 +8,11 @@ import 'bootstrap-table/dist/bootstrap-table.min.css!';
 import './extensions/bootstrap-table-fixed-columns/bootstrap-table-fixed-columns.css!';
 import 'bootstrap/dist/js/bootstrap.min';
 import 'bootstrap-table/src/bootstrap-table';
-import 'bootstrap-table/src/extensions/multiple-sort/bootstrap-table-multiple-sort'
+import './extensions/bootstrap-table-multiple-sort/';
 import './extensions/bootstrap-table-fixed-columns/';
 import './extensions/bootstrap-table-perfect-scrollbar/';
 import './extensions/bootstrap-table-pagination-events/';
+import './extensions/bootstrap-table-refresh-data/';
 
 
 //We'd probably want to implement our own filter control.  This one is pretty slow.
@@ -22,6 +23,18 @@ export default Component.extend({
   viewModel: ViewModel,
   template,
   events:{
+
+    //---- CONTROLLER PROPERTIES ----//
+
+    //flag to know whether or not to manually insert/remove items
+    //  Initially false because the initialization of the comoponent
+    //  will insert all items in the beginning
+    manageDataOnChange: false,
+
+    //---- END CONTROLLER PROPERTIES ----//
+
+
+    //---- INITIALIZATION ----//
     "inserted": function($el, ev){
       this.$el = $(this.element);
       this.$table = this.$el.find("table");
@@ -30,6 +43,9 @@ export default Component.extend({
       performanceMap && performanceMap.setRenderStartTime();
       this.initBootstrapTable();
       performanceMap && performanceMap.setRenderEndTime();
+
+      //set flag for managing incoming data
+      this.manageDataOnChange = true;
     },
 
     initBootstrapTable(){
@@ -43,6 +59,7 @@ export default Component.extend({
           pagination: true,
           height: this.$el.height(),
           search: true,
+          pageSize: 100,
 
           //http://issues.wenzhixin.net.cn/bootstrap-table/extensions/fixed-columns.html
           fixedColumns: true,
@@ -51,6 +68,9 @@ export default Component.extend({
           perfectScrollbar: true,
 
           showMultiSort: true,
+          sortPriority: [{sortName: 1, sortOrder: 'asc'}, {sortName: 3, sortOrder: 'desc'}],
+
+          diffProp: 3,
 
           onPageChange: function(num, size){
             self.onPageChange(this, num, size);
@@ -67,7 +87,10 @@ export default Component.extend({
           }
       });
     },
-
+    //---- END INITIALIZATION ----//
+
+
+    //---- EVENTS ----//
     onPageChangeBefore(tablePlugin, num, size){
       var performanceMap = this.viewModel.attr("performanceMap");
       performanceMap && performanceMap.setLastPageStart();
@@ -83,9 +106,25 @@ export default Component.extend({
       performanceMap && performanceMap.setLastSortEnd();
     },
 
-    onSort(tablePlugin, name, order){
+    onSort(tablePlugin, sortPrioirty){
       var performanceMap = this.viewModel.attr("performanceMap");
       performanceMap && performanceMap.setLastSortStart();
+    },
+    //---- END EVENTS ----//
+
+
+    //---- DATA CHANGING ----//
+    "{viewModel} tableRows": function(vm, ev, newVal, oldVal){
+      if(this.manageDataOnChange){
+        var newRows = newVal.attr ? newVal.attr() : newVal;
+        this.onDataChanged(newRows, oldVal);
+      }
+    },
+    onDataChanged(newVal, oldVal){
+      this.$table.bootstrapTable("refreshData", newVal);
     }
+    //---- END DATA CHANGING ----//
+
+
   }
 });

src/components/bootstrap-table/bootstrap-table.less

@@ -1,4 +1,11 @@
 bootstrap-table {
 	display: block;
-  height: 100%;
+  	height: 100%;
+
+	th {
+		background: #E6E6E9 url(./images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
+	}
+	.table-hover > tbody > tr:hover, .bootstrap-table .table-hover > tbody > tr.hover > td {
+		background-color: #CCF4FF;
+	}
 }

src/components/bootstrap-table/bootstrap-table.viewmodel.js

@@ -14,7 +14,6 @@ export default Map.extend({
           var objOut = {
               id: i,
               field: i,
-              title: "header-" + i,
               sortable: true,
               originalData: h,
               width: i == 0 ? 193 : 110
@@ -24,6 +23,7 @@ export default Map.extend({
             var n = h.attr("name");
             if(n){
               objOut.title=n;
+              objOut.titleTooltip=n;
             }
 
             switch (h.type) {
@@ -35,7 +35,7 @@ export default Map.extend({
                 break;
               case 'KPI':
                 objOut.formatter = function(value) {
-                  return value ? value.toFixed(2) : value;
+                  return value ? value.toLocaleString() : value;
                 };
                 break;
             }