2012-09-20 22 views
10

मैं jqGrid पर काम कर रहा हूं।ग्रिडव्यू क्यों है: सच के लिए उपयोग किया जाता है और इसका क्या अर्थ है?

मैं जानना चाहता हूं कि अगर हम gridview:true निर्दिष्ट करते हैं तो इसका क्या अर्थ है।

और हमें किन मामलों में प्रदान करने की आवश्यकता है?

मैं हाल ही में एक ऐसे jqGrid पर काम कर रहा था और मेरे afterInsertRow को कॉल नहीं किया जा रहा था, एक बार जब मैंने gridview:true को फिर से हटा दिया था तो कॉल किया गया था।

यह एक ऐसा मामला है जिसे मैंने स्वयं अनुभव किया था, मैं सोच रहा था कि क्या अन्य मामले भी हैं जिन्हें हमें पता होना चाहिए कि gridview:true का उपयोग किया जाता है।

कृपया मुझे इस पर मार्गदर्शन करें।

+0

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options&s[ ]=gridview विवरण ग्रिडव्यू के लिए और क्यों। –

+0

सहमत हुए। कुछ और विवरणों के लिए मेरा उत्तर देखें। –

+2

इसके अलावा, मैं यह भी जोड़ना चाहूंगा कि 'ग्रिडव्यू' इस विकल्प के लिए एक गरीब नाम है, क्योंकि इसका मतलब यह नहीं है कि जब तक आप दस्तावेज़ों को पार नहीं करते हैं ... सुनिश्चित नहीं है कि मैं अपने सिर के शीर्ष में से एक बेहतर सुझाव दे सकता हूं, हालांकि :) –

उत्तर

14

मैं मानता हूं कि gridview: true विकल्प दस्तावेज़ में अच्छी तरह से समझाया नहीं गया है। कुछ मामलों में (जैसे ट्रीग्रिड के मामले में) विकल्प स्वचालित रूप से सेट हो जाएगा। इसलिए मैं यह समझाने की कोशिश करता हूं कि इसका क्या अर्थ है और मैं हमेशा gridview: true विकल्प का उपयोग करने की सलाह क्यों देता हूं और कभी भी afterInsertRow का उपयोग नहीं करता।

कई लोग जावास्क्रिप्ट के रूप में कुछ अन्य कंप्यूटर भाषाओं के साथ शुरू करते हैं और प्रोग्राम के लेखन की कुछ शैली के बाद वेब ब्राउज़र में अपना पहला प्रोग्राम लिखते हैं। मुझे 3 साल पहले भी यही समस्या थी। यह समझना महत्वपूर्ण है कि HTML पृष्ठ पर कुछ बदलाव करने के बाद वेब ब्राउज़र को क्या करना है। JQuery के उपयोग के उपयोग में यह वही चीज है जो आप स्थायी रूप से करते हैं।

यदि आप पृष्ठ पर कुछ DOM तत्व बदलते हैं तो पृष्ठ पर मौजूद अन्य सभी DOM तत्वों की स्थिति बदला जा सकता है।यदि आप फ़्लोटिंग मॉडल (float: left के साथ) या कई अन्य सीएसएस सेटिंग्स के बारे में सोचते हैं तो आप समझेंगे कि वेब ब्राउज़र मौजूदा पृष्ठ के बिटमैप प्रस्तुति को स्थानांतरित नहीं कर सकता है और नया डाला गया तत्व डालने में सक्षम नहीं है। तो वेब ब्राउज़र को पृष्ठ पर मौजूद सभी तत्वों की स्थिति का पुनर्मूल्यांकन करना होगा और कुछ अन्य तत्वों से पर स्थानांतरित करना होगा। यहां तक ​​कि यदि आप किसी तत्व की सीएसएस शैली बदलते हैं तो नामित रीफ्लो होता है। मैं आपको the article पढ़ने और विषय के बारे में वीडियो देखने के लिए अनुशंसा करता हूं।

पृष्ठ पर परिवर्तनों की संख्या को कम करने के लिए उपर्युक्त वर्णित वेब ब्राउज़र के प्रदर्शन में सुधार करने का मुख्य विचार होगा। तो क्या आपको एक डीओएम तत्वों की 5 शैलियों को बदलने की जरूरत है, आपको इसे एक ऑपरेशन में करना चाहिए। आप 0 अलग-अलग कॉल की बजाय सभी बदली शैलियों के साथ jQuery.css({...}) का उपयोग कर सकते हैं। एक सीएसएस वर्ग को परिभाषित करने और jQuery.addClass विधि का उपयोग करने के लिए भी बेहतर हो सकता है।

jqGrid के मामले में ग्रिड की सभी पंक्तियों और कोशिकाओं के साथ <tbody> भरने की आवश्यकता है। यदि आप gridview: true विकल्प का उपयोग करते हैं तो jqGrid HTML पंक्तियों के साथ तारों के रूप में सभी पंक्तियों की सामग्री एकत्रित करता है। बाद में jqGrid jQuery.appendthe line में कॉल करें जो पृष्ठ पर पूरे HTML खंड को सेट करने के लिए आंतरिक रूप से innerHTML संपत्ति सेट करता है।

क्योंकि इसी कारण से आप का उपयोग करना चाहिए cellattr, rowattr या custom formatters जो एचटीएमएल टुकड़े के साथ काम करता कोशिकाओं या पंक्तियों तार के रूप में प्रतिनिधित्व। अंत में तारों को अन्य तारों में जोड़ा जाएगा और ऊपर वर्णित जैसा कि jQuery.append ऑपरेशन में उपयोग किया जाएगा।

afterInsertRow कॉलबैक फ़ंक्शन का उपयोग की आवश्यकता है कि ग्रिड के हर पंक्ति पृष्ठ पर रखा afterInsertRow कॉलबैक की कॉल करने से पहले हो जाएगा। इसलिए यह gridview: true विकल्प का उपयोग असंभव बनाता है और धीरे-धीरे पृष्ठ का काम करता है।

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

5

gridview के लिए jqGrid documentation के अनुसार:

3.4.x सहित jqGrid के पिछले संस्करणों में, एक अपेक्षाकृत बड़े डेटा सेट (पंक्तियों की संख्या> = 100) पढ़ने की गति समस्याओं का कारण बना। इसका कारण यह था कि प्रत्येक सेल को ग्रिड में डाला गया था क्योंकि हमने इसके बारे में 5 से 6 jQuery कॉल किए थे। अब यह समस्या हल हो गई है; अब हम एक jQuery एपेंड के साथ एक साथ प्रविष्टि पंक्ति डालते हैं। नतीजा प्रभावशाली है - लगभग 3 से 5 गुना तेज। यदि हम सभी डेटा एक बार में सम्मिलित करते हैं तो परिणाम क्या होगा? हां, यह ग्रिडव्यू विकल्प की सहायता से किया जा सकता है (इसे सत्य पर सेट करें)। परिणाम एक ग्रिड है जो 5 से 10 गुना तेज है। बेशक, जब यह विकल्प सत्य पर सेट होता है तो हमारे पास कुछ सीमाएं होती हैं। यदि सत्य पर सेट किया गया है तो हम TreeGrid, subGrid, या afterInsertRow ईवेंट का उपयोग नहीं कर सकते हैं। यदि आप ग्रिड में इन तीन विकल्पों का उपयोग नहीं करते हैं तो आप इस विकल्प को सही पर सेट कर सकते हैं और गति का आनंद ले सकते हैं।

तो इस विकल्प का उपयोग करके आप एक अच्छे गति में सुधार, चेतावनी के साथ प्राप्त कर सकते हैं कि यह TreeGrid, subgrid, या afterInsertRow साथ संगत नहीं है। मेरा मानना ​​है कि सीमाओं की सीमा है। यदि आपको और भी पता चलता है, तो हमें बताएं कि दस्तावेज़ीकरण को अपडेट किया जा सकता है।


क्या इसके लायक है के लिए

, आप वास्तव में see specific casesgrid.base.js में तरीकों addXmlData और addJSONData जहां afterInsertRow को छोड़ दिया जाता है कर सकते हैं:

if(ts.p.gridview === false) { 
    $("tbody:first",t).append(rowData.join('')); 
    $(ts).triggerHandler("jqGridAfterInsertRow", [rid, rd, xmlr]); 
    if(afterInsRow) {ts.p.afterInsertRow.call(ts,rid,rd,xmlr);} 
    rowData=[]; 
} 

TreeGrid और subgrid सीमाओं और अधिक सूक्ष्म होते हैं और स्पष्ट रूप में बाहर बुलाया नहीं कर रहे हैं कोड।

+0

केवल छोटे सुधार। आपके द्वारा संदर्भित दस्तावेज से पाठ में छोटी गलतियों थी। 1) ट्रीग्रिड का वर्तमान कार्यान्वयन * * ग्रिडव्यू: सत्य 'विकल्प का उपयोग करता है (यह * सेट * इसे: देखें [रेखा] (https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid कोड के .treegrid.js # L135)। 2) पाठ "अब हम एक बार में प्रविष्टि पंक्ति डालें" सही नहीं है। पाठ को अप्रत्यक्ष रूप से बाद में सही किया जाएगा: "अगर हम ** सभी डेटा ** एक बार ** डालें तो परिणाम क्या होगा?"। किसी भी तरह से 'gridview: true' के मामले में सभी पंक्तियों के साथ पूरे पंक्तियों के साथ' पंक्तियों 'के रूप में' jQuery *append' के कॉल * के रूप में रखा जाएगा। – Oleg