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

Posted 2023-02-22

【中文标题】SlickGrid：使用 DataView 而不是原始数据的简单示例？

【英文标题】：SlickGrid: Simple example of using DataView rather than raw data?

【发布时间】：2012-07-21 14:03:11

【问题描述】：

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

但是，我想根据数据的值对网格中的行应用一个类，所以它看起来像我need to use a DataView instead。 DataView example on the SlickGrid wiki 比较复杂，还有各种额外的方法。

请有人解释一下我如何简单地将data 转换为DataView - 最初和在 Ajax 重新加载时 - 同时保持网格可排序，并继续使用我的自定义格式化程序？ （我不需要知道如何应用该类，只需要知道如何使用 DataView。）

我希望它是.getJSON 调用中的一两行额外的行，但我担心它可能比这更复杂。

【参考方案1】：

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

【参考方案2】：

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

【参考方案3】：

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

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即可。

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

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

【讨论】：

谢谢！这实际上效果很好，但有一个例外：在对网格进行排序时，我收到一个 javascript 错误：Uncaught TypeError: Cannot read property 'field' of undefined。知道应该在哪里定义 args.sortCol.field 吗？

注意：我希望所有列都可以排序。

听起来像是args.sortCol.field 属性参考中的拼写错误。 args 参数被传递给onSort 回调。只需将console.log(args); 放在回调顶部并检查排序字段的正确属性名称（请参阅最新编辑）。确保仔细检查大写。这些参数在最近的一些 SlickGrid 版本中已更改，因此可能不完全正确。但基础是正确的，这确实会在任何列上排序。

你是对的，这是一个错字。这个答案再好不过了 - 谢谢。