SlickGrid प्रलेखन सुधार

SlickGrid तालिकाओं को प्रदर्शित करने के लिए एक छोटा जावास्क्रिप्ट घटक है। इस घटक की एक विशिष्ट विशेषता यह है कि जानकारी को प्रदर्शित करने के क्रम में इसकी एकाग्रता है, और इसके (सूचना) स्रोत के साथ काम करने पर नहीं। स्लैकग्रिड की एक और विशिष्ट विशेषता इसका बहुत खराब प्रलेखन है, जिसमें AJAX के माध्यम से काम करने का विवरण शामिल है।

SlickGrid एक बहुत अच्छा जावास्क्रिप्ट ग्रिड है जो एक तालिका में 500 और 500,000 दोनों रिकॉर्ड के साथ समान रूप से तेजी से काम करता है। विचार केवल उन तत्वों को जोड़ने के लिए है जो वर्तमान में DOM में प्रदर्शित होते हैं और वर्तमान में प्रदर्शित नहीं होने वाले तत्वों को हटाते हैं। SlickGrid का उपयोग StackExchange Data Explorer के लिए भी किया जाता है।

हालाँकि, उनकी परियोजनाओं में स्लीकग्रिड के उपयोग से प्रलेखन की लगभग पूर्ण अनुपस्थिति के कारण कठिनाइयों का कारण बनता है, जिसकी भूमिका, लेखक की मंशा के अनुसार, StackOverflow पर उदाहरणों , प्रश्नों / उत्तरों के साथ-साथ Google समूह द्वारा भी प्रस्तुत की जानी चाहिए। खैर, किसी भी मामले में, यह कुछ भी नहीं से बेहतर है।

मैं पूरे पृष्ठ को फिर से प्रकाशित किए बिना अनुरोध मापदंडों के आधार पर डेटा लोड करना चाहता था, अर्थात AJAX का उपयोग कर रहा था। उदाहरणों के सेट में, फ़िल्टरिंग के साथ AJAX डेटा लोड करने का उपयोग करने का विकल्प होता है । महान, मुझे क्या चाहिए! सच्चा उदाहरण किसी तरह की त्रुटि देता है, लेकिन ठीक है (चलो digg.com को दोष दें)। हम "प्रलेखन" को देखते हैं, अर्थात्, उदाहरण के उदाहरण। हाँ, Slick.ataotemodel.js से Slick.Data.RemoteModel जैसी किसी तरह की वस्तु का उपयोग किया जाता है। हम्म, यहाँ क्या हो रहा है? यह पता चला है कि यह सवाल न केवल मुझे ( एक , दो ) उत्तेजित करता है।

ठीक है, इस क्षण को अभी के लिए बंद कर दो। AJAX के अलावा, मैं पृष्ठांकित तालिका लुकअप का उपयोग करना चाहता हूं। इसके लिए, Slick.Controls.Pager प्रकार की एक वस्तु का उपयोग किया जाता है। लेकिन रुकिए! इस ऑब्जेक्ट के लिए निर्माता तर्क Slick.Data.DataView प्रकार का ऑब्जेक्ट होना चाहिए। DataView और RemoteModel को कैसे लिंक करें? यह गौरैयों पर गोलियों की तरह गंध आती है ... हम इस क्षण को अभी के लिए स्थगित कर देंगे। इसके अलावा, मैं चाहता हूं कि ग्रिड क्वेरी मापदंडों के साथ शीर्ष क्षेत्र को छोड़कर पूरे पृष्ठ पर कब्जा कर ले। उदाहरणों के बीच, एक उपयुक्त विकल्प है । हालाँकि, यदि हम इस उदाहरण में पृष्ठांकन जोड़ते हैं, तो ग्रिड हम स्वयं नहीं देखेंगे।



परिणामस्वरूप, स्लिकग्रिड रिपॉजिटरी फोर्क बनाया गया और वर्णित समस्याओं के समाधान के साथ एक उदाहरण जोड़ा गया। सब कुछ काफी सरल निकला।

AJAX लोडिंग को व्यवस्थित करने के लिए, आपको Slick.Data.DataView और Slick.Grid प्रकार की वस्तुओं के उदाहरणों को एक साथ जोड़ना होगा (पहला प्रदर्शन के लिए डेटा संग्रहीत करने के लिए ज़िम्मेदार है, दूसरा ग्रिड को प्रस्तुत करता है):

dataView.onRowCountChanged.subscribe(function (e, args) { grid.updateRowCount(); grid.render(); }); dataView.onRowsChanged.subscribe(function (e, args) { grid.invalidateRows(args.rows); grid.render(); }) 

डेटा लोडिंग Slick.Data.DataView प्रकार के ऑब्जेक्ट के माध्यम से किया जाना चाहिए:

 function getData() { $.get(url, function(data) { dataView.beginUpdate(); dataView.setItems(data); dataView.endUpdate(); }); } 

ग्रिड और अन्य तत्वों के लिए पृष्ठ के पूरे क्षेत्र पर कब्जा करने के लिए, यह स्लिकग्रिड यूजर इंटरफेस के लिए आंतरिक ऊंचाई सेट करने और स्लीक.ग्रीड ऑब्जेक्ट की एक विशेष विधि को निष्पादित करने के लिए पर्याप्त है:

 var h = $("#container").height()-$("#header").height()-$("#pager").height()-$(".slick-header").height(); $(".slick-viewport").height(h); grid.resizeCanvas();