enable column sorting

We use already existing table view class attribute `enable_sorting`.

Note that the original class does not seem to remove the tooltip about
column sorting if `enable_sorting` is `False`.

data/js/cubes.slickgrid.js

@@ -23,7 +23,9 @@
     // * `columns`: an object containing columns definitions/options, see
     //              https://github.com/mleibman/SlickGrid/wiki/Column-Options
     // * `data`: an object container the data
-    displayGrid: function (nodeSelector, columns, data) {
+    // * `enable_sorting`: if `true` the column will be sortable by clicking 
+    //                     on the header
+    displayGrid: function (nodeSelector, columns, data, enable_sorting) {
 	// object containing the grid options
 	// https://github.com/mleibman/SlickGrid/wiki/Grid-Options
 	var options = {
@@ -33,6 +35,31 @@
 	    autoHeight: true,
 	    syncColumnCellResize: true
 	};
-	new Slick.Grid(nodeSelector, data, columns, options);
+	var dataView = new Slick.Data.DataView();
+	var grid = new Slick.Grid(nodeSelector, dataView, columns, options);
+
+	// set sorting algorithm that consideres lower cases of cells content
+	// XXX maybe we can extract text part from HTML.
+	if (enable_sorting){
+	    grid.onSort.subscribe(function fraiseGridOnSort(e, args) {
+		sortcol = args.sortCol.field;
+		function comparer(a, b) {
+		    var x = a[sortcol].toLowerCase(), y = b[sortcol].toLowerCase();
+		    return (x == y ? 0 : (x > y ? 1 : -1));
+		}
+		dataView.sort(comparer, args.sortAsc);
+	    });
+	}
+
+	// update grid when data changes (a.k.a. on sorting)
+	dataView.onRowsChanged.subscribe(function fraiseGridOnRowChanged(e, args) {
+    	    grid.invalidateRows(args.rows);
+    	    grid.render();
+	});
+
+	// setup data to dataView
+	dataView.setItems(data);
+	grid.invalidate();
+	grid.render();
     }
 });

views.py

@@ -60,9 +60,10 @@
             w(_('loading data grid ...'))
 
         cnx.add_onload(js.cw.slickgrid.displayGrid(
-                '#%s' % divid, headers, data))
+                '#%s' % divid, headers, data,
+                self.enable_sorting))
 
     def render_table_headers(self, colrenderers):
         return [self.render_header(cr) for cr in colrenderers]
 
     def render_header(self, colrenderer):
@@ -64,11 +65,14 @@
 
     def render_table_headers(self, colrenderers):
         return [self.render_header(cr) for cr in colrenderers]
 
     def render_header(self, colrenderer):
-        return {'id': colrenderer.colid,
-                'field': colrenderer.colid,
-                'name': colrenderer.render_header()}
+        header= {'id': colrenderer.colid,
+                 'field': colrenderer.colid,
+                 'name': colrenderer.render_header()}
+        if self.enable_sorting:
+            header['sortable'] = True
+        return header
 
     def render_table_body(self, colrenderers):
         return [self.render_row(rownum, colrenderers)
@@ -90,6 +94,7 @@
                      'css/cubes.slickgrid.css'))
         cnx.add_js(('js/jquery.event.drag-2.2.js',
                     'js/slick.core.js',
+                    'js/slick.dataview.js',
                     'js/slick.grid.js',
                     'js/cubes.slickgrid.js'))