knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#119,view/slickgrid][m]: first pass implementation of slickgrid view courtesy of @amercader.

Browse Source 
New setup supports:

* Column hiding
* Column reordering
* Column sorting
* Column resizing
* Fit columns to the div width

All these options are stored on the view state and applied when initializing the view if necessary.

Now also utilize slickgrid view as default grid view.
This commit is contained in:
Rufus Pollock
2012-05-27 23:31:42 +01:00
parent ea6f051aba
commit d339fea2d9
15 changed files with 1464 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
test/index.html
View File

@@ -15,6 +15,9 @@
<script type="text/javascript" src="../vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
<script type="text/javascript" src="../vendor/leaflet/0.3.1/leaflet.js"></script>
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
<script type="text/javascript" src="../vendor/timeline/20120520/js/timeline.js"></script>
<script type="text/javascript" src="qunit/qunit.js"></script>
@@ -39,12 +42,14 @@
<script type="text/javascript" src="../src/view.js"></script>
<script type="text/javascript" src="../src/view-grid.js"></script>
<script type="text/javascript" src="../src/view-slickgrid.js"></script>
<script type="text/javascript" src="../src/view-transform-dialog.js"></script>
<script type="text/javascript" src="../src/view-graph.js"></script>
<script type="text/javascript" src="../src/view-map.js"></script>
<script type="text/javascript" src="../src/view-timeline.js"></script>
<script type="text/javascript" src="view-grid.test.js"></script>
<script type="text/javascript" src="view-slickgrid.test.js"></script>
<script type="text/javascript" src="view-graph.test.js"></script>
<script type="text/javascript" src="view-map.test.js"></script>
<script type="text/javascript" src="view-timeline.test.js"></script>

64
test/view-slickgrid.test.js Normal file
View File

@@ -0,0 +1,64 @@
(function ($) {
module("View - SlickGrid");
test('basic', function () {
var dataset = Fixture.getDataset();
var view = new recline.View.SlickGrid({
model: dataset
});
$('.fixtures .test-datatable').append(view.el);
view.render();
// Render the grid manually
view.grid.init();
assertPresent('.slick-header-column[title="x"]');
equal($('.slick-header-column').length,dataset.fields.length);
equal(dataset.currentDocuments.length,view.grid.getDataLength());
view.remove();
});
test('state', function () {
var dataset = Fixture.getDataset();
var view = new recline.View.SlickGrid({
model: dataset,
state: {
hiddenColumns:['x','lat','label'],
columnsOrder:['lon','id','z','date', 'y', 'country'],
columnsSort:{column:'country',direction:'desc'},
columnsWidth:[
{column:'id',width: 250}
]
}
});
$('.fixtures .test-datatable').append(view.el);
view.render();
view.grid.init();
var visibleColumns = _.filter(_.pluck(dataset.fields.toArray(),'id'),function(f){
return (_.indexOf(view.state.get('hiddenColumns'),f) == -1)
});
// Hidden columns
assertPresent('.slick-header-column[title="y"]');
assertNotPresent('.slick-header-column[title="x"]');
var headers = $('.slick-header-column');
equal(headers.length,visibleColumns.length);
// Column order
deepEqual(_.pluck(headers,'title'),view.state.get('columnsOrder'));
// Column sorting
equal($(view.grid.getCellNode(0,view.grid.getColumnIndex('country'))).text(),'US');
// Column width
equal($('.slick-header-column[title="id"]').width(),250);
view.remove();
});
})(this.jQuery);