Slickgrid - Sorting
HTML
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.dataview.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.core.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<div id="myGrid" style="width:600px;height:500px;"></div>
JavaScript
var dataView = new Slick.Data.DataView();
//Create columns
var columns = [
{id: "column1", name: "ID", field: "id", sortable: true},
{id: "column2", name: "Code", field: "Code"},
{id: "column3", name: "Depth", field: "Depth2"}
];
var options = {
enableCellNavigation: true,
editable: true
};
// Pass it as a data provider to SlickGrid.
var grid = new Slick.Grid('#myGrid', dataView, columns, options);
grid.onSort.subscribe(function(e, args) {
console.log(args.sortAsc)
var footerOrderProperty = 'rowoption_stickyorder';
var comparer = function(a, b) {
var result = (a[args.sortCol.field] > b[args.sortCol.field]) ? 1 : -1;
var bb = b[footerOrderProperty],
aa = a[footerOrderProperty];
if(aa && !bb){
result = 1;
}
else if(!aa && bb)
{
result = -1
}
console.log(a.id + " | " + b.id + " " + result)
return result
}
dataView.sort(comparer, args);
});
// Make the grid respond to DataView change events.
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
var data = [
{ id:1, Code: '232046', Depth2: 4000,},
{ id:11, Code: '55555', Depth2: 5000, rowoption_stickyorder: 1},
{ id:2, Code: '23247', Depth2: 2000 },
{ id:3, Code: '12543', Depth2: 1500, rowoption_stickyorder: 1 }
];
// This will fire the change events and update the grid.
dataView.setItems(data);