2012-08-26 16 views
17

मैंने स्लिमग्रिड का उपयोग शुरू किया और मुझे डेटा व्यू और ग्रिड (संपादन सक्षम के साथ) के बीच के अंतर के बारे में उलझन में आया। मुझे दस्तावेज़ों में डेटा व्यू के बारे में कुछ चर्चा नहीं मिली है, हालांकि इसका उल्लेख किया गया है।SlickGrid डेटा व्यू क्या है?

कृपया मुझे प्रबुद्ध करें।

उत्तर

26

बहुत सरल शब्दों में, बस तीन परतों के बारे में सोच:

Grid 
    ---- 
DataView 
    ---- 
    Data 

तल में आप कच्चे डेटा की है। यह सिर्फ एक सादा पुरानी सरणी है। सरणी में प्रत्येक आइटम डेटा की एक पंक्ति का प्रतिनिधित्व करता है (ग्रिड में एक पंक्ति के रूप में प्रदर्शित किया जाना चाहिए)।

डेटाव्यू डेटा सरणी पढ़ता है और इसे दो मानक तरीकों को उजागर करके ग्रिड में उपलब्ध कराता है। इस तरह, जब ग्रिड प्रदर्शन उद्देश्यों के लिए डेटा प्राप्त करना चाहता है, तो यह मानक विधियों में से एक के माध्यम से डेटाव्यू से बात करता है।

ग्रिड प्रदर्शन घटक है। इसकी एकमात्र ज़िम्मेदारी स्क्रीन पर वांछित आउटपुट प्रदर्शित करने के लिए आवश्यक एचटीएमएल कोड प्रस्तुत करना है।

ग्रिड डेटा को सीधे एक्सेस नहीं करता है। यह केवल डेटाव्यू से बात करता है। यह डेटाव्यू को ग्रिड में डेटा लौटने पर ट्रिक्स करने की अनुमति देता है, जैसे समूह शीर्षकों का प्रतिनिधित्व करने के लिए उपयोग की जाने वाली "प्रेत" पंक्तियां प्रदान करना।

यदि आप रुचि रखते हैं, तो नीचे दिया गया उदाहरण केवल सरल उदाहरण है जिसके साथ आप स्लिमग्रिड के साथ डेटाव्यू का उपयोग कर सकते हैं।

var data = [ 
    { title: "Primer",  rating: "A" }, 
    { title: "Matrix",  rating: "B" }, 
    { title: "Transformers", rating: "C" }, 
]; 
var columns = [ 
    { id: "title", name: "Title", field: "title" }, 
    { id: "rating", name: "Rating", field: "rating" } 
]; 
var options = { 
    enableColumnReorder: false // ... whatever grid options you need 
}; 

var dataView = new Slick.Data.DataView(); 
var grid = new Slick.Grid("#myGrid", dataView, columns, options); 

// 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(); 
}); 

// Feed the data into the dataview 
dataView.setItems(data); 
+0

मैं यह तय करने का प्रयास कर रहा हूं कि कस्टम डेटा व्यू कार्यान्वयन या एक अलग मॉडल लिखना है जो डिफ़ॉल्ट डेटा दृश्य में I/O प्रदान करता है। क्या कोई कस्टम डेटा व्यू बनाया या देखा है? मैंने कभी नहीं देखा है, और एक रीड-थ्रू करना चाहता हूं। – SimplGy

+0

डेटा को एक आईडी की आवश्यकता है या नहीं, यह एक त्रुटि फेंक देगा – Ammon

1

डेटाव्यू डेटा को सॉर्ट या फ़िल्टर करने की अनुमति देता है बिना ग्रिड को संशोधित किए। आप इसे ग्रिड पर शीर्ष पर ओवरले के रूप में सोच सकते हैं जो दृश्य-संबंधित कार्यों को प्रदान करता है - कुछ मामलों में इन कार्यों को बढ़ाता है।

आशा है कि मदद करता है!

10

डेटाव्यू आपके डेटा स्रोत के शीर्ष पर एक अमूर्त है। यदि सभी डेटा क्लाइंट (यानी जावास्क्रिप्ट सरणी में) पर उपलब्ध है, तो डेटाव्यू कई उपयोगी सुविधाएं प्रदान कर सकता है जो ग्रिड के पास नहीं हैं। (इस तथ्य के साथ कि ग्रिड इन सुविधाओं की कमी है डिज़ाइन द्वारा - स्लिकग्रिड अपने एपीआई में मॉड्यूलर डिज़ाइन और डेटा अबास्ट्रक्शन को प्रोत्साहित करते हुए कोर दुबला और सरल रखने की कोशिश करता है।)

डेटाव्यू आपके डेटा को ले कर और डेटा के रूप में कार्य करके काम करता है प्रदाता है कि आप अपने मूल डेटा सरणी के बजाय SlickGrid को पास कर सकते हैं। उदाहरण के लिए, यदि आप डेटाव्यू समूह डेटा बनाते हैं, तो यह ग्रिड को लगता है कि "समूह" पंक्तियां केवल नियमित डेटा आइटम हैं, इसलिए ग्रिड को उनके बारे में अवगत होने की आवश्यकता नहीं है। डेटाव्यू ग्रिड को बताता है कि उन वस्तुओं के पास कस्टम डिस्प्ले और व्यवहार है और दोनों के कार्यान्वयन प्रदान करता है। इसके बाद आप ग्रिड और वॉयला को अपडेट करने के लिए डेटाव्यू के ऑनवॉउंट चेंज और ऑन-चेंज चेंज इवेंट को वायरस करते हैं।

  • पेजिंग:

    यहां सुविधाओं का एक किसी न किसी तरह की सूची है कि DataView ग्रिड से जोड़ देता है है।

  • छंटनी।
  • खोज।
  • कुल योग के साथ समूह।
  • समूह विस्तृत करें/संक्षिप्त करें।
+0

सॉर्टिंग सीधे ग्रिड तक भी संभव है। उदाहरण: http: //mleibman.github।io/SlickGrid/उदाहरण/example-multi-column-sort.html –

संबंधित मुद्दे