我正在使用SlickGrid,将数据从Ajax调用直接绑定到网格.它现在运行良好,网格动态更新,可排序,我正在为一列使用自定义格式化程序：
var grid;
var columns = [{
id: "time",name: "Date",field: "time"
},{
id: "rating",name: "Rating",formatter: starFormatter // custom formatter
}
];
var options = {
enableColumnReorder: false,multiColumnSort: true
};
// When user clicks button,fetch data via Ajax,and bind it to the grid.
$('#mybutton').click(function() {
$.getJSON(my_url,function(data) {
grid = new Slick.Grid("#myGrid",data,columns,options);
});
});
但是,我想根据数据的值将一个类应用到网格中的行中,所以出现在need to use a DataView instead. DataView example on the SlickGrid wiki是相当复杂的,并且有各种额外的方法.
有人可以解释一下,如何简单地将数据转换为DataView – 最初和Ajax重新加载,同时让网格可排序,并继续使用我的自定义格式化程序？ (我不需要知道如何应用该类,从字面上来说就是如何使用DataView.)
我希望它在.getJSON调用中是一两条额外的行,但我担心这可能比这更复杂.
解决方法
关键是将数据视图作为数据源进行初始化,连接事件,使网格响应dataview中的变化,最后将数据提供给dataview.它应该看起来像这样：
dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid",dataView,options);
// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e,args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e,args) {
grid.invalidateRows(args.rows);
grid.render();
});
// When user clicks button,and bind it to the dataview.
$('#mybutton').click(function() {
$.getJSON(my_url,function(data) {
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
});
});
请注意,您不需要每次都创建一个新网格,只需将数据绑定到dataview.
如果要实施排序,还需要告诉dataview在网格接收到排序事件时进行排序：
grid.onSort.subscribe(function (e,args) {
sortcol = args.sortCol.field; // Maybe args.sortcol.field ???
dataView.sort(comparer,args.sortAsc);
});
function comparer(a,b) {
var x = a[sortcol],y = b[sortcol];
return (x == y ? 0 : (x > y ? 1 : -1));
}
