From 0e62d91f5758943068d971b7de57c062f7a94e42 Mon Sep 17 00:00:00 2001 From: aliounedia Date: Mon, 28 Apr 2014 15:15:30 +0200 Subject: [PATCH] [#407] support for row reordering in slickGrid --- README.md | 4 ++- css/flot.css | 8 ++--- css/multiview.css | 8 ----- demos/multiview/app.js | 4 +++ src/view.multiview.js | 3 -- src/view.slickgrid.js | 58 ++++++++++++++++++++++++++++--------- src/widget.pager.js | 2 +- src/widget.queryeditor.js | 2 +- test/view.slickgrid.test.js | 51 ++++++++++++++++++++++++++++++-- 9 files changed, 106 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 3791de5b..12f3b9ac 100755 --- a/README.md +++ b/README.md @@ -27,6 +27,8 @@ See CONTRIBUTING.md. * [Adrià Mercader](http://amercader.net/) * [Dominik Moritz](https://github.com/domoritz) * [Friedrich Lindenberg](http://pudo.org/) +* [Alioune Dia](http://https://github.com/aliounedia) +* [kielni](https://github.com/kielni) * And [many more](https://github.com/okfn/recline/graphs/contributors) ## Changelog @@ -36,7 +38,7 @@ See CONTRIBUTING.md. [v0.6 milestone](https://github.com/okfn/recline/issues?milestone=5) Possible breaking changes - +* Support for row/add/delete/Reorder for recline slickGrid check `_includes/recline-deps.html` for slcikGrid plugins required #396 * Many backends moved to their own repositories #314 * Updated Leaflet to latest version 0.4.4 #220 * Added marker clustering in map view to handle a large number of markers diff --git a/css/flot.css b/css/flot.css index 57adc9f0..cf203cda 100644 --- a/css/flot.css +++ b/css/flot.css @@ -19,8 +19,8 @@ #recline-flot-tooltip { position: absolute; - background-color: #FEE; - color: #000000; - opacity: 0.8; - border: 1px solid #fdd; + background-color: #FEE !important; + color: #000000 !important; + opacity: 0.8 !important; + border: 1px solid #fdd !important; } diff --git a/css/multiview.css b/css/multiview.css index 02c4b704..6837e7c2 100644 --- a/css/multiview.css +++ b/css/multiview.css @@ -67,10 +67,6 @@ vertical-align: top; } -.header .recline-query-editor label { - display:none; -} - /********************************************************** * Pager *********************************************************/ @@ -82,10 +78,6 @@ margin-left: 20px; } -.header .recline-pager .pagination label { - display:none; -} - .header .recline-pager .pagination input { width: 30px; height: 18px; diff --git a/demos/multiview/app.js b/demos/multiview/app.js index 929337c5..d3fc55c5 100755 --- a/demos/multiview/app.js +++ b/demos/multiview/app.js @@ -77,8 +77,12 @@ var createExplorer = function(dataset, state) { state: { gridOptions: { editable: true, + // Enable support for row add enabledAddRow: true, + // Enable support for row delete enabledDelRow: true, + // Enable support for row Reoder + enableReOrderRow =true, autoEdit: false, enableCellNavigation: true }, diff --git a/src/view.multiview.js b/src/view.multiview.js index 6d7e754a..918f0e16 100644 --- a/src/view.multiview.js +++ b/src/view.multiview.js @@ -248,9 +248,6 @@ my.MultiView = Backbone.View.extend({ // the main views _.each(this.pageViews, function(view, pageName) { view.view.render(); - if (view.view.redraw) { - view.view.redraw(); - } $dataViewContainer.append(view.view.el); if (view.view.elSidebar) { $dataSidebar.append(view.view.elSidebar); diff --git a/src/view.slickgrid.js b/src/view.slickgrid.js index a377ff65..8a261cfd 100644 --- a/src/view.slickgrid.js +++ b/src/view.slickgrid.js @@ -155,8 +155,32 @@ my.SlickGrid = Backbone.View.extend({ } } }; - - //Add row delete support , check if enableDelRow is set to true or not set + + //Add row delete support, check if enableReOrderRow is set to true , by + //default it is set to false + // state: { + // gridOptions: { + // enableReOrderRow: true, + // }, + if(this.state.get("gridOptions") + && this.state.get("gridOptions").enableReOrderRow != undefined + && this.state.get("gridOptions").enableReOrderRow == true ){ + columns.push({ + id: 'del', + name: '', + field: 'del', + sortable: true, + width: 38, + formatter: formatter, + validator:validator + }) + } + //Add row delete support, check if enabledDelRow is set to true , by + //default it is set to false + // state: { + // gridOptions: { + // enabledDelRow: true, + // }, if(this.state.get("gridOptions") && this.state.get("gridOptions").enabledDelRow != undefined && this.state.get("gridOptions").enabledDelRow == true ){ @@ -168,15 +192,6 @@ my.SlickGrid = Backbone.View.extend({ selectable: false, resizable: false, cssClass: "recline-cell-reorder" - }) - columns.push({ - id: 'del', - name: '', - field: 'del', - sortable: true, - width: 38, - formatter: formatter, - validator:validator }) } _.each(this.model.fields.toJSON(),function(field){ @@ -347,8 +362,12 @@ my.SlickGrid = Backbone.View.extend({ self.model.records.reset(data) }); + //register The plugin to handle row Reorder + if(this.state.get("gridOptions") + && this.state.get("gridOptions").enableReOrderRow != undefined + && this.state.get("gridOptions").enableReOrderRow == true ){ self.grid.registerPlugin(moveRowsPlugin); - + } /* end row reordering support*/ this._slickHandler.subscribe(this.grid.onSort, function(e, args){ @@ -388,8 +407,19 @@ my.SlickGrid = Backbone.View.extend({ this._slickHandler.subscribe(this.grid.onClick,function(e, args){ //try catch , because this fail in qunit , but no //error on browser. - try{e.preventDefault()}catch(e){} - if (args.cell == 1 && self.state.get("gridOptions").enabledDelRow == true){ + try{e.preventDefault()}catch(e){} + + // The cell of grid that handle row delete is The first cell (0) if + // The grid ReOrder is not present ie enableReOrderRow == false + // else it is The the second cell (1) , because The 0 is now cell + // that handle row Reoder. + var cell =0 + if(self.state.get("gridOptions") + && self.state.get("gridOptions").enableReOrderRow != undefined + && self.state.get("gridOptions").enableReOrderRow == true ){ + cell =1 + } + if (args.cell == cell && self.state.get("gridOptions").enabledDelRow == true){ // We need to delete the associated model var model = data.getModel(args.row); model.destroy() diff --git a/src/widget.pager.js b/src/widget.pager.js index e5d81283..fa112f4a 100644 --- a/src/widget.pager.js +++ b/src/widget.pager.js @@ -12,7 +12,7 @@ my.Pager = Backbone.View.extend({ \ diff --git a/src/widget.queryeditor.js b/src/widget.queryeditor.js index d6566566..87defe0d 100644 --- a/src/widget.queryeditor.js +++ b/src/widget.queryeditor.js @@ -12,7 +12,7 @@ my.QueryEditor = Backbone.View.extend({
\
\ \ - \ + \
\ \
\ diff --git a/test/view.slickgrid.test.js b/test/view.slickgrid.test.js index 7bf2b29b..491dd306 100644 --- a/test/view.slickgrid.test.js +++ b/test/view.slickgrid.test.js @@ -113,7 +113,7 @@ test('delete-row' , function(){ columnsWidth:[ {column:'id',width: 250} ], - gridOptions: {editable: true , "enabledDelRow":true}, + gridOptions: {editable: true , "enabledDelRow":true }, columnsEditor: [{column: 'country', editor: Slick.Editors.Text}] } }); @@ -125,11 +125,57 @@ test('delete-row' , function(){ dataset.records.on('remove', function(record){ equal(dataset.records.length, old_length -1 ); }); - // Be sure a cell change triggers a change of the model e = new Slick.EventData(); view.grid.onClick.notify({ row: 1, + cell: 0, + grid: view.grid + }, e, view.grid); + + view.remove(); + + +}); + + +//Test delete row with RowReorder set to True , This is The same +// test as above (delete-row), the only diference is that here we Enable +// row ReOrder to true, so The cell That handle delete row of grid is +// 1 instead of 0. + +// The cell of grid that handle row delete is The first cell (0) if +// The grid ReOrder is not present ie enableReOrderRow == false +// else it is The the second cell (1) , because The 0 is now cell +// that handle row Reoder. + +test('delete-row-with-row-reorder-ativated' , function(){ + var dataset = Fixture.getDataset(); + var view = new recline.View.SlickGrid({ + model: dataset, + state: { + hiddenColumns:['x','lat','title'], + columnsOrder:['lon','id','z','date', 'y', 'country'], + columnsWidth:[ + {column:'id',width: 250} + ], + gridOptions: {editable: true , "enabledDelRow":true , "enableReOrderRow":true}, + columnsEditor: [{column: 'country', editor: Slick.Editors.Text}] + } + }); + + $('.fixtures .test-datatable').append(view.el); + view.render(); + view.show(); + old_length = dataset.records.length + dataset.records.on('remove', function(record){ + equal(dataset.records.length, old_length -1 ); + }); + // Be sure a cell change triggers a change of the model + e = new Slick.EventData(); + view.grid.onClick.notify({ + row: 1, + // cell is 1 instead of 0 cell: 1, grid: view.grid }, e, view.grid); @@ -139,6 +185,7 @@ test('delete-row' , function(){ }); + test('add-row' , function(){ //To test adding row on slickgrid , we add some menu GridControl //I am based on the FlotControl in flot wiewer , to add a similary