如何将 SlickGrid 与 Meteor.js 反应式集合集成

How can I integrate SlickGrid with Meteor.js reactive collections?

本文关键字：js 反应式 集合 集成 Meteor SlickGrid      更新时间：2023-09-26

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

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

  • 排序：由 Meteor 处理，触发完全刷新（重新设置数据）
  • 添加/更新/删除：找出索引并将其失效
  • 过滤：由 Meteor 处理，触发完全刷新（重新设置数据）

如何将 Meteor 数据光标直接绑定到 SlickGrid 并仅处理带有一些胶水代码的事件？或者可以使用Slick.dataview吗？目标是在单元级别处理更新。

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

如果你看一下Slick.Grid代码，你会发现它只使用了Dataview的3个函数。.getLength（）、.getItem（） 和 .getItemMetadata（） 以及最后一个不是强制性的。所以Slick.Grid基本上是"视图"组件，只读取"数据"（Dataview），但"控制器"在哪里？

好吧，你要实际实现它，你可以在"SlickGrid示例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();
  });

当您在 Dataview 中添加、删除、更新行并使用那里的函数将该信息传递给 Grid 时，将触发这 2 个事件（onRowCountChanged、onRowsChanged）。

所以基本的想法是为您的Mongo.Collection做同样的事情，据我所知，Mongo.Cursor已经.observeChanges（） 有点类似于 .onRowsChanged

在文档末尾的源代码中签出 SlickGrid API。

为了有效地处理网格更新，请尝试使用不同的失效方法.invalidate（All）Row（s）（）以及.updateRow（）和.updateCell（）进行更精确的控制。

这些主要是处理视图更新的方法：

  "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(),
相关文章：