Javascript SlickGrid：使用 DataView 而不是原始数据的简单示例？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11610781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SlickGrid: Simple example of using DataView rather than raw data?
提问by flossfan
I'm working with SlickGrid, binding data directly to the grid from an Ajax call. It's working well at the moment, the grid updates dynamically and is sortable, and I'm using a custom formatter for one column:
我正在使用 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);
});
});
However, I want to apply a class to rows in the grid based on the value of the data, so it appears I need to use a DataView instead. The DataView example on the SlickGrid wikiis rather complicated, and has all kinds of extra methods.
但是，我想根据数据的值将一个类应用于网格中的行，因此看来我需要改用 DataView。在对SlickGrid维基数据视图例子比较复杂，并具有各种额外的方法。
Please could someone explain how I simply convert datato a DataView- both initially and on Ajax reload - while leaving the grid sortable, and continuing to use my custom formatter? (I don't need to know how to apply the class, literally just how to use a DataView.)
请有人解释我如何简单地转换data为 a DataView- 最初和 Ajax 重新加载 - 同时保持网格可排序，并继续使用我的自定义格式化程序？（我不需要知道如何应用该类，实际上只是如何使用 DataView。）
I'm hoping it's one or two extra lines inside the .getJSONcall, but I fear it may be more complicated than that.
我希望在.getJSON通话中多出一两行，但我担心它可能比这更复杂。
回答by njr101
The key pieces are to initialise the grid with a dataview as data source, wire up events so that the grid responds to changes in the dataview and finally feed the data to the dataview. It should look something like this:
关键部分是使用数据视图作为数据源初始化网格，连接事件以便网格响应数据视图中的更改，最后将数据提供给数据视图。它应该是这样的：
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();
});
});
Note that you don't need to create a new grid every time, just bind the data to the dataview.
请注意，您不需要每次都创建一个新网格，只需将数据绑定到数据视图即可。
If you want to implement sorting you'll also need to tell the dataview to sort when the grid receives a sort event:
如果你想实现排序，你还需要告诉数据视图在网格收到排序事件时进行排序：
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));
}
(This basic sorting is taken from the SlickGrid examples but you may want to implement something home-grown; without using the global variable for example)
（此基本排序取自 SlickGrid 示例，但您可能想要实现一些自己开发的东西；例如，不使用全局变量）
回答by akif1
The following does a good job explaining dataView: https://github.com/mleibman/SlickGrid/wiki/DataView
以下内容很好地解释了 dataView：https: //github.com/mleibman/SlickGrid/wiki/DataView
回答by Hak-young Leem
multiColumnSort: true ==> sortCol type : Arrays.
multiColumnSort: false ==> sortCol type : Object.
multiColumnSort：true ==> sortCol 类型：数组。
multiColumnSort：false ==> sortCol 类型：对象。
