12

我正在使用 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通话中的一两行额外的行，但我担心它可能比这更复杂。

4

3 回答 3

20

关键部分是使用作为数据源的数据视图初始化网格，连接事件以便网格响应数据视图中的更改，最后将数据提供给数据视图。它应该看起来像这样：

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();
  });
});

请注意，您不需要每次都创建新网格，只需将数据绑定到数据视图即可。

如果要实现排序，还需要在网格接收到排序事件时告诉数据视图进行排序：

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 示例，但您可能想要实现一些本土的东西；例如，不使用全局变量）

于 2012-07-23T11:19:24.463 回答
2

以下内容很好地解释了 dataView：https ://github.com/mleibman/SlickGrid/wiki/DataView

于 2013-07-24T22:09:37.713 回答
0

multiColumnSort: true ==> sortCol 类型：数组。
multiColumnSort: false ==> sortCol 类型：对象。

于 2014-09-11T07:31:47.907 回答