SlickGrid：使用DataView而不是原始数据的简单示例？
我正在使用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); }); }); 但是，我想根据数据的值将类应用于网格中的行，因此我需要使用DataView 。 SlickGrid wiki上的DataView示例相当复杂，并且具有各种额外的方法。
请有人解释我如何简单地将data转换为DataView – 最初和Ajax重新加载 – 同时保持网格可排序，并继续使用我的自定义格式化程序？ （我不需要知道如何应用这个类，简直就是如何使用DataView。）
我希望在.getJSON调用中有一两个额外的行，但我担心它可能比那更复杂。
关键部分是使用数据视图作为数据源初始化网格，连接事件，以便网格响应数据视图中的更改，最后将数据提供给数据视图。 它应该看起来像这样：
dataView = new Slick.Data.DataView(); grid = new Slick.Grid("#myGrid", dataView, columns, 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, fetch data via Ajax, and bind it to the dataview. $('#mybutton').click(function() { $.getJSON(my_url, function(data) { dataView.beginUpdate(); dataView.setItems(data); dataView.endUpdate(); }); });
请注意，您不需要每次都创建新网格，只需将数据绑定到数据视图即可。
如果要实现排序，还需要告诉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)); }
（这个基本排序取自SlickGrid示例，但您可能希望实现本地生成的东西;例如，不使用全局变量）
以下内容很好地解释了dataView： https ： //github.com/mleibman/SlickGrid/wiki/DataView
multiColumnSort：true ==> sortCol type：Arrays。
multiColumnSort：false ==> sortCol type：Object。