SlickGrid：使用DataView而不是原始数据的简单示例？ [英] SlickGrid: Simple example of using DataView rather than raw data?

问题描述

我正在使用SlickGrid，将数据从Ajax调用直接绑定到网格。它的工作正常，网格动态更新，可排序，我正在使用一个自定义格式化器一列：

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:

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示例相当复杂，并且有各种各样的的额外方法。

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 - 最初和Ajax重新加载 - 同时离开网格可排序，并继续使用我的自定义格式化程序？ （我不需要知道如何应用该类，从字面上来说就是如何使用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.)

我希望它是一个或两个额外的行 .getJSON 呼叫，但我担心这可能比这更复杂。

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

推荐答案

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

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

请注意，您不需要每次都创建一个新的网格，只需将数据绑定到dataview。

Note that you don't need to create a new grid every time, just bind the data to the dataview.

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

（这个基本排序是从SlickGrid示例中获取的，但您可能需要实现一些本土化的东西;不使用全局变量）

(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：使用DataView而不是原始数据的简单示例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！