checkboxes behave as expected
[myslice.git] / plugins / querytable / static / js / querytable.js
index 772ff7e..57b260d 100644 (file)
@@ -8,6 +8,8 @@
 
     var debug=false;
     debug=true
+    var debug_deep=false;
+//    debug_deep=true;
 
     var QueryTable = Plugin.extend({
 
            // compute columns based on columns and hidden_columns
            this.slick_columns = [];
            var all_columns = this.options.columns; // .concat(this.options.hidden_columns)
+           // xxx would be helpful to support a column_renamings options arg
+           // for redefining some labels like 'network_hrn' that really are not meaningful
            for (c in all_columns) {
                var column=all_columns[c];
-               this.slick_columns.push ( {id:column, name:column, field:column });
+               this.slick_columns.push ( {id:column, name:column, field:column, 
+                                          cssClass: "querytable-column-"+column,
+                                          width:100, minWidth:40, });
            }
 
            // xxx should be extensible from caller with this.options.slickgrid_options 
            this.slick_options = {
                enableCellNavigation: false,
                enableColumnReorder: true,
+               showHeaderRow: true,
+               syncColumnCellResize: true,
            };
 
-           this.slick_data=[];
+           this.slick_data = [];
+           this.slick_dataview = new Slick.Data.DataView();
+           var self=this;
+           this.slick_dataview.onRowCountChanged.subscribe ( function (e,args) {
+               self.slick_grid.updateRowCount();
+               self.slick_grid.autosizeColumns();
+               self.slick_grid.render();
+           });
            
            var selector="#grid-"+this.options.domid;
-           if (debug) {
+           if (debug_deep) {
                messages.debug("slick grid selector is " + selector);
                for (c in this.slick_columns) {
                    var col=this.slick_columns[c];
                cssClass: "slick-cell-checkboxsel"
            });
            this.slick_columns.push(checkbox_selector.getColumnDefinition());
-           this.slick_grid = new Slick.Grid(selector, this.slick_data, this.slick_columns, this.slick_options);
+           this.slick_grid = new Slick.Grid(selector, this.slick_dataview, this.slick_columns, this.slick_options);
            this.slick_grid.setSelectionModel (new Slick.RowSelectionModel ({selectActiveRow: false}));
            this.slick_grid.registerPlugin (checkbox_selector);
+           // autotooltips: for showing the full column name when ellipsed
+           var auto_tooltips = new Slick.AutoTooltips ({ enableForHeaderCells: true });
+           this.slick_grid.registerPlugin (auto_tooltips);
            
            this.columnpicker = new Slick.Controls.ColumnPicker (this.slick_columns, this.slick_grid, this.slick_options)
 
-        }, // initialize_table
 
-       // Determine index of key in the table columns 
-        getColIndex: function(key, cols) {
-            var tabIndex = $.map(cols, function(x, i) { if (x.sTitle == key) return i; });
-            return (tabIndex.length > 0) ? tabIndex[0] : -1;
-        }, // getColIndex
-
-        checkbox_html : function (key, value) {
-//         if (debug) messages.debug("checkbox_html, value="+value);
-            var result="";
-            // Prefix id with plugin_uuid
-            result += "<input";
-            result += " class='querytable-checkbox'";
-            result += " id='" + this.flat_id(this.id('checkbox', value)) + "'";
-            result += " name='" + key + "'";
-            result += " type='checkbox'";
-            result += " autocomplete='off'";
-           if (value === undefined) {
-               messages.warning("querytable.checkbox_html - undefined value");
-           } else {
-               result += " value='" + value + "'";
-           }
-            result += "></input>";
-            return result;
-        }, 
+        }, // initialize_table
 
         new_record: function(record) {
            this.slick_data.push(record);
         },
 
         clear_table: function() {
-           console.log("clear_table not implemented");
+           this.slick_data=[];
+           this.slick_dataview.setItems(this.slick_data,this.key);
         },
 
         redraw_table: function() {
-            this.table.fnDraw();
+           this.slick_grid.autosizeColumns();
+            this.slick_grid.render();
         },
 
         show_column: function(field) {
-            var oSettings = this.table.fnSettings();
-            var cols = oSettings.aoColumns;
-            var index = this.getColIndex(field,cols);
-            if (index != -1)
-                this.table.fnSetColumnVis(index, true);
+           console.log ("querytable.show_column not yet implemented with slickgrid - field="+field);
         },
 
         hide_column: function(field) {
-           console.log("hide_column not implemented - field="+field);
+           console.log("querytable.hide_column not implemented with slickgrid - field="+field);
         },
 
         set_checkbox: function(record, checked) {
-           console.log("set_checkbox not implemented");
-           return;
             /* Default: checked = true */
             if (checked === undefined) checked = true;
 
                messages.warning("querytable.set_checkbox record has no id to figure which line to tick");
                return;
            }
-            var checkbox_id = this.flat_id(this.id('checkbox', id));
-            // function escape_id(myid) is defined in portal/static/js/common.functions.js
-            checkbox_id = escape_id(checkbox_id);
-            // using dataTables's $ to search also in nodes that are not currently displayed
-            var element = this.table.$(checkbox_id);
-            if (debug) 
-                messages.debug("set_checkbox checked=" + checked
-                               + " id=" + checkbox_id + " matches=" + element.length);
-            element.attr('checked', checked);
+           var index = this.slick_dataview.getIdxById(id);
+           var selectedRows=this.slick_grid.getSelectedRows();
+           if (checked) // add index in current list
+               selectedRows=selectedRows.concat(index);
+           else
+               selectedRows=selectedRows.filter(function(idx) {return idx!=index;});
+           this.slick_grid.setSelectedRows(selectedRows);
         },
 
         /*************************** QUERY HANDLER ****************************/
 
         on_all_query_done: function() {
            if (debug) messages.debug("1-shot initializing dataTables content with " + this.slick_data.length + " lines");
-           this.slick_grid.setData (this.slick_data, true);
-           if (debug) 
+           var start=new Date();
+           // use this.key as the key for identifying rows
+           this.slick_dataview.setItems (this.slick_data, this.key);
+           var duration=new Date()-start;
+           if (debug) messages.debug("setItems " + duration + " ms");
+           if (debug_deep) {
+               // show full contents of first row app
                for (k in this.slick_data[0]) messages.debug("slick_data[0]["+k+"]="+this.slick_data[0][k]);
-           this.slick_grid.render();
+           }
            
             var self = this;
            // if we've already received the slice query, we have not been able to set