我如何与Meteor.js反应藏品整合SlickGrid?(How can I integrate

2019-07-29 04:00发布

SlickGrid集中在从表或阵列,这是很大的显示数据。 流星集中在操纵数据,但使用Minimongo。 SlickGrid如何与Minimonogo集合整合并保持其快速显示和大数据处理能力?

我现在做的方式觉得不妥,是有点丑陋。 我有SlickGrid独立阵列和写一些胶水代码来处理更新事件:

  • 排序:由流星处理,已触发全面刷新(重新设置数据)
  • 添加/更新/删除:搞清楚指数,它无效
  • 过滤:通过处理好流星,触发完全刷新(重新设置数据)

如何将我的流星数据光标直接绑定到SlickGrid和处理只能用一些胶水代码的事件? 或者可以Slick.dataview使用? 我们的目标是处理在小区级别上的更新。

Answer 1:

使用Slick.Dataview只会重复一些功能(排序,筛选,CRUD ..)您的藏品,但你应该看看,看看它是如何与Slick.Grid交互。

如果你看一下Slick.Grid代码,你可以看到,它只是利用数据视图.getLength(),.getItem().getItemMetadata(3个函数和最后一个是不是强制性实施。 所以Slick.Grid基本上是“查看”组件只读“数据”(数据视图),但如果是“控制器”?

那么你是真正实现它,你可以在“发现一例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();
  });

这2个事件(onRowCountChanged,onRowsChanged)将被解雇,当你在数据视图中添加,删除,更新行和使用功能存在要传递的信息网格。

因此,基本的想法是做同样为您Mongo.Collection而据我可以看到Mongo.Cursor有.observeChanges()是有些类似.onRowsChanged

在文件结束结帐SlickGrid API在源。

为了处理您的网格使用不同的方法失效.invalidate(所有)行(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(),


文章来源: How can I integrate SlickGrid with Meteor.js reactive collections?