मैं Meteor.js प्रतिक्रियाशील संग्रह के साथ SlickGrid को कैसे एकीकृत कर सकता हूं?

Question

SlickGrid एक टेबल या सरणी से डेटा प्रदर्शित करने पर केंद्रित है, जो कि बढ़िया है। उल्का डेटा में हेरफेर करने पर केंद्रित है, लेकिन मिनिमोंगो का उपयोग करता है। SlickGrid Minimonogo संग्रह के साथ एकीकृत कैसे कर सकता है और इसके तेज प्रदर्शन और बड़ी डेटा हैंडलिंग क्षमताओं को सुरक्षित रख सकता है?

ऐसा करने का मेरा वर्तमान तरीका गलत लगता है और कुछ हद तक बदसूरत है। मैं SlickGrid के लिए एक अलग सरणी है और अद्यतन ईवेंट प्रबंधित करने के कुछ गोंद कोड लिखने:

• सॉर्ट: उल्का द्वारा प्रबंधित, एक पूर्ण ताज़ा (रीसेट होने से डेटा)
• जोड़ें/अपडेट चलाता है/निकालें: पता लगाना सूचकांक और यह अमान्य
• छनन: उल्का द्वारा प्रबंधित, एक पूर्ण ताज़ा (फिर से सेटिंग डेटा)

मैं सीधे SlickGrid को उल्का डेटा कर्सर कैसे बाँध और कुछ गोंद कोड के साथ ही घटनाओं को संभालने होगा चलाता है? या Slick.dataview का उपयोग किया जा सकता है? लक्ष्य सेल स्तर पर अपडेट को संभालना है।

Answer 1

Slick.Dataview का उपयोग केवल आपके संग्रह के कुछ कार्यक्षमता (सॉर्टिंग, फ़िल्टरिंग, सीआरयूडी ..) को डुप्लिकेट करेगा, लेकिन आपको यह देखना चाहिए कि यह Slick.Grid के साथ कैसे इंटरैक्ट करता है।

आप Slick.Grid कोड को देखें, तो आप देख सकते हैं कि यह केवल DataView के 3 कार्यों उपयोग कर रहा है .getLength(), .getItem() और .getItemMetadata() और पिछले एक नहीं है लागू करने के लिए अनिवार्य है। तो Slick.Grid मूल रूप से 'डेटा' (डेटाव्यू) पढ़ना 'दृश्य' घटक है लेकिन 'नियंत्रक' कहां है?

ठीक है आप इसे वास्तव में कार्यान्वित करना चाहते हैं और आप '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 में जोड़ने, हटाने, अद्यतन पंक्तियों निकाल दिया जाएगा और कार्यों का उपयोग कर आप गुजर रहे हैं ग्रिड को वह जानकारी।

तो मूल विचार अपने Mongo.Collection के लिए भी ऐसा ही करने और जहाँ तक मैं देख सकता हूँ Mongo.Cursor .observeChanges() कि कुछ इसी तरह .onRowsChanged है है

चेकआउट SlickGrid दस्तावेज़ के अंत में स्रोत में एपीआई।

अपने ग्रिड को संभालने के लिए कुशलता से अलग अमान्यकरण तरीकों .invalidate (सभी) पंक्ति (रों) (उपयोग करने का प्रयास अपडेट) और भी .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(),