2012-04-27 49 views
8

SlickGrid專注於顯示來自表格或數組的數據,這非常棒。 Meteor專注於操縱數據,但使用Minimongo。 SlickGrid如何與Minimonogo集合集成並保持其快速顯示和大型數據處理能力?如何將SlickGrid與Meteor.js被動收藏集成?

我目前的做法感覺不對,有點難看。我有SlickGrid獨立陣列和寫一些膠水代碼來處理更新事件:

  • 排序:由流星處理,已觸發全面刷新(重新設置數據)
  • 添加/更新/刪除:搞清楚索引和無效它
  • 過濾:通過流星處理,已觸發全面刷新(重新設置數據)

我將如何綁定流星數據光標直接SlickGrid和只處理事件的一些膠水代碼?或者可以使用Slick.dataview?目標是處理單元級別的更新。

回答

2

使用Slick.Dataview只會複製你的集合的一些功能(排序,過濾,CRUD ..),但你應該檢查它看它是如何與Slick.Grid進行交互的。

如果你看一下Slick.Grid代碼,你可以看到,它只是利用數據視圖的3個功能 .getLength().getItem().getItemMetadata()和最後一個是不強制執行。 所以Slick.Grid基本上是'View'組件,只讀'Data'(Dataview),但'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(); 
    }); 

這兩個事件(onRowCountChanged,onRowsChanged)當您在數據視圖中添加,刪除,更新的行會被解僱,並使用有功能你逝去該信息發送給Grid。

所以基本思路是做同樣爲您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(),