डोजो फ्रेमवर्क एनहांसमेंट ग्रिड का संक्षिप्त अवलोकन या टेबल के रूप में डेटा के आउटपुट को जल्दी और आसानी से कैसे व्यवस्थित किया जाए

अक्सर, कई नौसिखिया वेब डेवलपर्स बार-बार पहिया को मजबूत करने से पीड़ित होते हैं। डेटा का आउटपुट और स्वरूपण अधिक जटिल और भ्रमित हो जाता है। लेकिन! इस कार्य को आसानी से Dojo द्वारा नियंत्रित किया जाता है!

प्रस्तावना

लगभग एक साल पहले, मैंने एक कंपनी में वेब एप्लिकेशन विकसित करना शुरू किया। ऐतिहासिक रूप से, एप्लिकेशन ने आउटपुट डेटा के लिए बड़ी संख्या में तालिकाओं का उपयोग किया था। प्रत्येक तालिका एक एजेंट है जो डेटाबेस से डेटा प्राप्त करने और HTML उत्पन्न करने में लगा हुआ है। समय के साथ, तालिकाओं की संख्या कई गुना बढ़ गई, जैसा कि एजेंटों की संख्या थी, जो उच्च सर्वर भार के साथ कुछ समस्याएं पैदा करना शुरू कर दिया था।

इस समस्या को हल करने के लिए, Dojo का उपयोग करने का निर्णय लिया गया। अब JSON प्रारूप में डेटा की आवश्यकता है, और संवर्धित ग्रिड घटक हमारे लिए सभी नियमित काम करेगा!

यह समझने के लिए कि दांव पर क्या है, इस वीडियो को 3 मिनट 35 सेकंड से देखें:

न्यूनतम सिद्धांत

Dojo में कोई भी ग्रिड एक विजेट है जो डेटा के चयन के आधार पर एक HTML तालिका बनाता है। यह डेटा एक विशेष स्टोरेज - स्टोर में संग्रहित है।

संवर्धित सुविधाएँ:

• डेटा स्वरूपण
• डेटा फ़िल्टरिंग - dojox.grid.enhanced.plugins.Filter
• विभिन्न स्वरूपों में डेटा निर्यात करें - dojox.grid.enhanced.plugins.exporter। *
• नेस्टेड सॉर्ट - dojox.grid.enhanced.plugins.NestedSorting
• प्रसंग मेनू - dojox.grid.enhanced.plugins.Menu
• Drag'n'Drop - dojox.grid.enhanced.plugins.DnD
• पृष्ठ का उत्पादन - dojox.grid.enhanced.plugins.Pagination
• डेटा खोज - dojox.grid.enhanced.plugins.Search

निर्णय

एक डेटा वेयरहाउस बनाएं

dojo.require("dojo.data.ItemFileWriteStore"); //   var data = { identifier: 'id', //        items: [] //     JSON }; //   var store = new dojo.data.ItemFileWriteStore({data: data}); 

एक तालिका लेआउट बनाएँ

 var layout = [[ {'name': 'Column 1', 'field': 'id'}, {'name': 'Column 2', 'field': 'col2'}, {'name': 'Column 3', 'field': 'col3', 'width': '230px'}, {'name': 'Column 4', 'field': 'col4', 'width': '230px'} ]]; 

एक ग्रिड बनाएँ

 dojo.require("dojox.grid.EnhancedGrid"); var grid = new dojox.grid.EnhancedGrid({ id: 'grid', store: store, structure: layout, rowSelector: '20px', selectionMode: 'multiple' }, document.createElement('div')); dojo.byId("gridDiv").appendChild(grid.domNode); // grid grid.startup(); }); 

हमारा ग्रिड तैयार है!

परिणाम

बढ़ी हुई ग्रिड का उपयोग करके, हम किसी भी संरचना के टेबल के साथ काम कर सकते हैं, केवल तालिका के लेआउट को निर्दिष्ट कर सकते हैं और डेटा लोड कर सकते हैं।

एक उदाहरण और स्रोत यहां पाया जा सकता है।