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

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 wiki is rather complicated, and has all kinds of extra methods.

但是,我想根据数据的值将类应用于网格中的行,因此我需要使用DataView。 SlickGrid wiki上的DataView示例相当复杂,并且具有各种额外的方法。

Please could someone explain how I simply convert data to 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.)

请有人解释我如何简单地将数据转换为DataView - 最初和Ajax重新加载 - 同时保持网格可排序,并继续使用我的自定义格式化程序? (我不需要知道如何应用这个类,简直就是如何使用DataView。)

I'm hoping it's one or two extra lines inside the .getJSON call, but I fear it may be more complicated than that.

我希望在.getJSON调用中有一两个额外的行,但我担心它可能比那更复杂。

3 个解决方案

#1

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:

如果要实现排序,还需要告诉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));
}

(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示例,但您可能希望实现本地生成的东西;例如,不使用全局变量)

#2

The following does a good job explaining dataView: https://github.com/mleibman/SlickGrid/wiki/DataView

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

#3

multiColumnSort: true ==> sortCol type : Arrays.
multiColumnSort: false ==> sortCol type : Object.

multiColumnSort:true ==> sortCol type:Arrays。 multiColumnSort:false ==> sortCol type:Object。

#1