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

问题描述:

SlickGrid专注于显示表或数组中的数据,这很棒。 Meteor专注于操纵数据,但使用Minimongo。 SlickGrid如何与Minimonogo系列集成并保留其快速显示和大数据处理功能?

SlickGrid focuses on displaying the data from a table or array, which is great. Meteor focuses on manipulating the data, but uses Minimongo. How can SlickGrid integrate with Minimonogo collections and preserve its fast display and large data handling capabilities?

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

My current way of doing it feels wrong and is somewhat ugly. I have a separate array for SlickGrid and writing some glue code to handle update events:


  • 排序:由Meteor处理,触发完全刷新(重新设置数据)

  • 添加/更新/删除:计算索引并使其无效

  • 过滤:由Meteor处理,触发完全刷新(重新设置数据)

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

How would I bind the Meteor data cursor directly to SlickGrid and handle only events with some glue code? Or can Slick.dataview be used? The goal is to handle updates on a cell level.

使用Slick.Dataview只会复制一些功能(排序,过滤, CRUD ..)你的收藏品,但你应该检查它看看它如何与Slick.Grid交互。

Using Slick.Dataview would only duplicate some functionality (sorting, filtering, CRUD..) of your collections but you should check it out to see how it interacts with Slick.Grid.

如果你看看Slick.Grid代码你可以看到它只使用Dataview
.getLength() .getItem() .getItemMetadata()的3个函数,最后一个不是强制执行。
所以Slick.Grid基本上只是'查看'组件只读'数据'(数据视图)但是'控制器'在哪里?

If you look at Slick.Grid code you can see that it is only using 3 functions of Dataview .getLength(), .getItem() and .getItemMetadata() and last one is not mandatory to implement. So Slick.Grid is basically 'View' component only reading 'Data' (Dataview) but where is the 'Controller'?

你要实现它实际上你可以在' SlickGrid例4 中找到一个例子。

Well you are to implement it actually and you can find one example in 'SlickGrid Example 4'.

该示例中最重要的部分是在此片段中:

Most important part of that example is in this snippet:

  // 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中添加,删除,更新行时,将触发此2个事件(onRowCountChanged,onRowsChanged)并使用那些函数将这些信息传递给Grid。

This 2 events (onRowCountChanged, onRowsChanged) will get fired when you add, remove, update rows in Dataview and using there functions you are passing that information to Grid.

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

So basic idea is to do the same for your Mongo.Collection and as far as I can see Mongo.Cursor has .observeChanges() that is somewhat similar to .onRowsChanged

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

Checkout SlickGrid API in source at the end of document.

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

To handle your Grid updates efficiently try using different invalidation methods .invalidate(All)Row(s)() and also .updateRow() and .updateCell() for even more precise control.

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

These are mostly methods to handle view updates:

  "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,

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

If you need user interaction with you Grid subscribe to events and update your collection accordingly.

  "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(),