javascript - 如何将 SlickGrid 与 Meteor.js 响应式(Reactive)集合集成？

Question

SlickGrid 专注于显示表格或数组中的数据，这很棒。 Meteor 专注于操作数据，但使用 Minimongo。 SlickGrid 如何与 Minimonogo 集合集成并保持其快速显示和大数据处理能力？

我目前的做法感觉不对，而且有点难看。我有一个单独的 SlickGrid 数组，并编写了一些胶水代码来处理更新事件:

• 排序:由 Meteor 处理，触发完全刷新(重新设置数据)
• 添加/更新/删除:确定索引并使其失效
• 过滤:由 Meteor 处理，触发完全刷新(重新设置数据)

我如何将 Meteor 数据游标直接绑定(bind)到 SlickGrid 并仅使用一些粘合代码处理事件？或者可以使用 Slick.dataview 吗？目标是处理单元级别的更新。

Answer 1

使用 Slick.Dataview 只会复制您的集合的某些功能(排序、过滤、CRUD..)，但您应该检查它以了解它如何与 Slick.Grid 交互。

如果您查看 Slick.Grid 代码，您会发现它仅使用了 Dataview 的 3 个函数 .getLength()、.getItem() 和 .getItemMetadata() 以及最后一个不是强制实现的。 所以 Slick.Grid 基本上是只读取“数据”(Dataview) 的“ View ”组件，但“ Controller ”在哪里？

好吧，你要实际实现它，你可以在“SlickGrid Example 4”中找到一个例子。 '.

该示例最重要的部分在这个片段中:

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

这 2 个事件(onRowCountChanged、onRowsChanged)将在您在 Dataview 中添加、删除、更新行并使用这些函数将信息传递给 Grid 时触发。

所以基本的想法是对你的 Mongo.Collection 做同样的事情，据我所知，Mongo.Cursor 有 .observeChanges() 有点类似于 .onRowsChanged

在文档末尾查看源代码中的 SlickGrid API。

要有效地处理您的网格更新，请尝试使用不同的失效方法 .invalidate(All)Row(s)() 以及 .updateRow() 和 。 updateCell() 用于更精确的控制。

这些主要是处理 View 更新的方法:

  "render": render,
  "invalidate": invalidate,
  "invalidateRow": invalidateRow,
  "invalidateRows": invalidateRows,
  "invalidateAllRows": invalidateAllRows,
  "updateCell": updateCell,
  "updateRow": updateRow,
  "getViewport": getVisibleRange,
  "getRenderedRange": getRenderedRange,
  "resizeCanvas": resizeCanvas,
  "updateRowCount": updateRowCount,
  "scrollRowIntoView": scrollRowIntoView,
  "scrollRowToTop": scrollRowToTop,
  "scrollCellIntoView": scrollCellIntoView,
  "getCanvasNode": getCanvasNode,
  "focus": setFocus,

如果您需要用户与您的网格进行交互，请订阅事件并相应地更新您的集合。

  "onScroll": new Slick.Event(),
  "onSort": new Slick.Event(),
  "onHeaderMouseEnter": new Slick.Event(),
  "onHeaderMouseLeave": new Slick.Event(),
  "onHeaderContextMenu": new Slick.Event(),
  "onHeaderClick": new Slick.Event(),
  "onMouseEnter": new Slick.Event(),
  "onMouseLeave": new Slick.Event(),
  "onClick": new Slick.Event(),
  "onDblClick": new Slick.Event(),
  "onContextMenu": new Slick.Event(),
  "onKeyDown": new Slick.Event(),
  "onAddNewRow": new Slick.Event(),
  "onValidationError": new Slick.Event(),
  "onViewportChanged": new Slick.Event(),
  "onColumnsReordered": new Slick.Event(),
  "onColumnsResized": new Slick.Event(),
  "onCellChange": new Slick.Event(),
  "onActiveCellChanged": new Slick.Event(),
  "onActiveCellPositionChanged": new Slick.Event(),
  "onDragInit": new Slick.Event(),
  "onDragStart": new Slick.Event(),
  "onDrag": new Slick.Event(),
  "onDragEnd": new Slick.Event(),
  "onSelectedRowsChanged": new Slick.Event(),