jquery SlickGrid：使用DataView而不是原始数据的简单示例？

gv8xihay 于 2023-10-17 发布在 jQuery

关注(0)|答案(3)|浏览(112)

我正在使用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);
  });
});

但是，我想根据数据的值对网格中的行应用一个类，因此它显示为I need to use a DataView instead。DataView example on the SlickGrid wiki是相当复杂的，并有各种额外的方法。
请有人解释一下我是如何简单地将data转换为DataView的--无论是在最初还是在Ajax重新加载时--同时保持网格可排序，并继续使用我的自定义格式化程序的？（我不需要知道如何应用这个类，只需要知道如何使用DataView。
我希望这是.getJSON调用中的一个或两个额外的行，但我担心它可能比这更复杂。

jquery

来源：https://stackoverflow.com/questions/11610781/slickgrid-simple-example-of-using-dataview-rather-than-raw-data

3条答案

按热度按时间

q3aa05251#

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

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;
  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基本的排序来自于SlickGrid的例子，但你可能想实现一些自己开发的东西;不使用全局变量）

赞(0）回复(0）举报 2023-10-17

pxiryf3j2#

下面的代码很好地解释了dataView：https://github.com/mleibman/SlickGrid/wiki/DataView

赞(0）回复(0）举报 2023-10-17

q8l4jmvw3#

multiColumnSort：true ==> sortCol type：阵
multiColumnSort：false ==> sortCol type：Object.

赞(0）回复(0）举报 2023-10-17