SlickGrid：使用数据视图，而不是原始数据的简单的例子吗？(SlickGrid: Simple

我与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);
  });
});

不过，我想一类适用于基于数据值的网格行，所以看来我需要使用数据视图来代替。在对SlickGrid维基DataView的例子是相当复杂的，并具有各种额外的方法。

请有人能解释如何，我只是转换data到DataView -最初和Ajax的重载-同时使电网排序，并继续使用我的自定义格式？（我并不需要知道如何应用类，真的只是如何使用数据视图。）

我希望它的内部的一个或两个额外的线路.getJSON电话，但我担心它可能会比这更复杂。

Answer 1:

关键件是具有数据视图为数据源，线向上事件初始化网格，以便在网格响应在数据视图的改变，最后是数据馈送到数据视图。它应该是这个样子：

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例子中获得，但你可能想实现一些土生土长的;不使用例如全局变量）