लाखों पंक्तियों के लिए जावास्क्रिप्ट डेटा ग्रिड [बंद]

Question

मुझे जावास्क्रिप्ट का उपयोग करके ग्रिड में उपयोगकर्ता को बड़ी संख्या में डेटा (यानी लाखों पंक्तियों) को प्रस्तुत करने की आवश्यकता है।

उपयोगकर्ता को पृष्ठ नहीं देखना चाहिए या एक समय में केवल परिमित मात्रा में डेटा देखना चाहिए।

बल्कि, यह प्रकट होना चाहिए कि सभी डेटा उपलब्ध हैं।

एक बार में सभी डेटा डाउनलोड करने के बजाय, छोटे विखंडू डाउनलोड किए जाते हैं क्योंकि उपयोगकर्ता उनके पास आता है (यानी ग्रिड के माध्यम से स्क्रॉल करके)।

इस फ्रंट एंड के माध्यम से पंक्तियों को संपादित नहीं किया जाएगा, इसलिए रीड-ओनली ग्रिड स्वीकार्य हैं।

जावास्क्रिप्ट में लिखे गए डेटा ग्रिड, इस तरह के सहज पेजिंग के लिए मौजूद हैं?

Comments

मैंने jqgrid उत्तर को अस्वीकार कर दिया, क्योंकि यह बड़े डेटा सेटों के लिए विफल लगता है ... कोई अन्य सुझाव? Ext-livegrid.com के बारे में क्या ?

— रुडिगर

खुद लिखिए। मुझे यकीन है कि अन्य लोग घुट रहे हैं क्योंकि वे सिर्फ डोम से जुड़ते रहते हैं। मुझे लगता है कि आपको लगता है कि एक समाधान की आवश्यकता होगी हटा देगा के रूप में वे स्क्रॉल पंक्तियों बंद स्क्रीन। यही एक मात्र मार्ग है। आप बस DOM में एक लाख तालिका पंक्तियाँ नहीं रख सकते हैं और हर ब्राउज़र को हर वातावरण में मूल रूप से प्रदर्शित और स्क्रॉल करने की अपेक्षा कर सकते हैं। उचित बनो।

— जोश स्टोडोला ने

@Rudiger: SlickGrid अब मूल रूप से असीमित संख्या में पंक्तियों का समर्थन करता है। Github.com/mleibman/SlickGrid/tree/unlimited-rows देखें । एक बार जब यह अच्छी तरह से परीक्षण हो जाता है तो इसे मुख्य शाखा में मिला दिया जाएगा।

— टिन

और मुझे खेद है कि आप किस फर्म में काम कर रहे हैं। आपकी जानकारी के लिए, केवल 1 मिलियन पंक्तियों के साथ 1920x1080 स्क्रीन, स्क्रॉल पट्टी पर हर एक पिक्सेल के आंदोलन के लिए 20 पंक्ति कूद जाएगी । अपना समय बर्बाद करने के बजाय कुछ प्रयोज्य परीक्षण करें।

— स्लीपर स्मिथ

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

— सैम वाटकिंस

Answer 1

( डिस्क्लेमर: मैं स्लिकग्रिड का लेखक हूं )

अद्यतन यह अब SlickGrid में लागू किया गया है ।

कृपया SlickGrid को बड़ी संख्या में पंक्तियों के साथ काम करने पर चल रही चर्चा के लिए http://github.com/mleibman/SlickGrid/issues#issue/22 देखें ।

समस्या यह है कि स्लिकग्रिड स्क्रोलबार को वर्चुअलाइज नहीं करता है - स्क्रॉल करने योग्य क्षेत्र की ऊंचाई सभी पंक्तियों की कुल ऊंचाई पर सेट है। उपयोगकर्ता को स्क्रॉल करते समय पंक्तियों को अभी भी जोड़ा और हटाया जा रहा है, लेकिन स्क्रॉलिंग ब्राउज़र द्वारा ही की जाती है। यह बहुत तेजी से अभी तक चिकनी होने की अनुमति देता है (onscroll की घटनाएं कुख्यात हैं)। चेतावनी यह है कि ब्राउज़र के CSS इंजन में बग / सीमाएँ होती हैं जो किसी तत्व की संभावित ऊँचाई को सीमित करती हैं। IE के लिए, यह 0x123456 या 1193046 पिक्सेल का होता है। अन्य ब्राउज़रों के लिए यह अधिक है।

"लार्गेनम-फिक्स" शाखा में एक प्रायोगिक वर्कअराउंड है, जो स्क्रॉल करने योग्य क्षेत्र को 1M पिक्सेल ऊंचाई पर सेट "पेज" के साथ पॉप्युलेट करके और फिर उन पृष्ठों के भीतर सापेक्ष स्थिति का उपयोग करके काफी सीमा तक बढ़ा देता है। चूंकि सीएसएस इंजन में ऊंचाई सीमा वास्तविक लेआउट इंजन की तुलना में अलग और काफी कम लगती है, इसलिए यह हमें बहुत अधिक ऊपरी सीमा देता है।

मैं अभी भी प्रदर्शन बढ़त को छोड़ दिए बिना असीमित संख्या में पंक्तियों को प्राप्त करने का एक रास्ता खोज रहा हूं जो कि वर्तमान में स्लिकग्रिड अन्य कार्यान्वयन पर है।

रुडिगर, क्या आप इसे हल कर सकते हैं कि आपने इसे कैसे हल किया?

Comments

मैंने स्लिकग्रिड को सबसे आकर्षक माना है - खासकर अगर कोई jQuery के साथ काम करता है। बधाई! (esp। महान दृष्टिकोण और दृढ़ता के लिए।) :-)

— एंड्रास वास

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

— वनयरस

SlickGrid v2.1 में कॉलम के साथ-साथ पंक्तियों के लिए वर्चुअल स्क्रॉलिंग का उपयोग किया गया है। साथ ही, अतिप्रवाहित स्तंभ समस्या हल हो गई है।

— टिन

@ टिन - यह मेरे दृष्टिकोण के समान है; मैं अपने समय से आगे था! "वेब अनुप्रयोगों में अनंत स्क्रॉल बनाने के लिए एक आलसी ब्लॉक लेआउट आदिम।" docs.google.com/document/d/…

— रुडिगर

@Rudiger हाँ, मैंने इसे लगभग एक महीने पहले ब्लिंक समूह पर देखा है, लेकिन मुझे यकीन नहीं है कि यह तस्वीर में कैसे फिट होगा। आलसी लेआउट वास्तव में डोम में मौजूद तत्वों पर काम करता है, जो हम वास्तव में नहीं कर सकते हैं। कृपया विस्तार से बताएं :)

— टिन

Answer 2

https://github.com/mleibman/SlickGrid/wiki

" SlickGrid वर्चुअल रेंडरिंग का उपयोग करता है ताकि आप आसानी से प्रदर्शन में किसी भी बूंद के बिना सैकड़ों हजारों आइटमों के साथ काम कर सकें। वास्तव में, 10 पंक्तियों बनाम 100'000 पंक्तियों के साथ ग्रिड के साथ काम करने के बीच प्रदर्शन में कोई अंतर नहीं है। "

कुछ मुख्य बातें:

• अनुकूली वर्चुअल स्क्रॉलिंग (सैकड़ों हज़ारों पंक्तियों को संभालें)
• अत्यधिक तेजी से प्रतिपादन की गति
• अमीर कोशिकाओं के लिए पृष्ठभूमि के बाद प्रतिपादन
• विन्यास और अनुकूलन
• पूर्ण कीबोर्ड नेविगेशन
• कॉलम आकार / पुन: व्यवस्थित / शो / छुपाता है
• कॉलम ऑटोसाइजिंग और फोर्स-फिट
• प्लग करने योग्य सेल फ़ॉर्मेटर्स और संपादक
• नई पंक्तियों के संपादन और निर्माण के लिए समर्थन। “ मैलीमैन द्वारा

यह मुफ़्त (MIT लाइसेंस) है। यह jQuery का उपयोग करता है।

Comments

यह ठीक 131,001 पंक्तियों तक ठीक काम करता है ... यानी, इस तरह कोड की एक पंक्ति है: data.length = Math.min(131000, parseInt(resp.total));... और, ज़ाहिर है, कि एक कारण के लिए कठिन-कोडित :(

— रुडिगर

इसमें थोड़ा काम हुआ, लेकिन मैंने dataसरणी की लंबाई से ग्रिड को स्वतंत्र बनाने के लिए कुछ बदलाव किए । यह एक कीचड़ है, लेकिन मेरे पास एक bigdataसरणी को आबाद करने वाली प्रतिक्रियाएं हैं , और छोटे सरणी dataसे खींचती हैं bigdata। स्क्रॉल-बार माप और कुछ अन्य स्थानों को छोड़कर, जो अब बड़ी संख्या में पंक्तियों के लिए अबाधित हैं, कार्यक्रम के बाकी छोटे डेटा सरणी का उपयोग करता है। सब सब में, अपने खुद के लेखन की तुलना में बहुत आसान था।

— रुडिगर

@Rudiger: SlickGrid अब मूल रूप से असीमित संख्या में पंक्तियों का समर्थन करता है। Github.com/mleibman/SlickGrid/tree/unlimited-rows देखें । एक बार जब यह अच्छी तरह से परीक्षण हो जाता है तो इसे मुख्य शाखा में मिला दिया जाएगा।

— टिन

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

— वनियोस

यदि आप वास्तव में कुछ तेज चाहते हैं, तो उस चीज़ पर भरोसा न करें जो कोर में चीजों को करने के लिए jquery का उपयोग करता है, और इसके बजाय DOM एपेंड की तुलना में इनर HTML का उपयोग करें। जावास्क्रिप्ट स्क्रॉलबार धीमी कंप्यूटर पर ब्राउज़र स्क्रॉलबार की तुलना में ध्यान देने योग्य धीमा हो सकते हैं, जटिल सीएसएस नियमों से बच सकते हैं, और आपको एक पंक्ति के लेआउट को सरल बनाने में समय बिताना चाहिए। इस मामले में सूक्ष्म-अनुकूलन महत्वपूर्ण हो सकते हैं। यह प्रदर्शन में सुधार करने के लिए सिर्फ सामान्य प्रैटिस है। jsPerf.com आपका मित्र है।

— विटिम.स

Answer 3

मेरी राय में सबसे अच्छा ग्रिड नीचे हैं:

• फ्लेक्सिग्रिड: http://flexigrid.info/
• jQuery ग्रिड: http://www.trirand.com/blog/
• jqGridView: http://plugins.jquery.com/project/jqGridView
• jqxGrid: http://www.jqwidgets.com/
• इंग्रिड: http://reconstrukt.com/ingrid/
• स्लिकग्रिड http://github.com/mleibman/SlickGrid
• DataTables http://www.datatables.net/index
• ShieldUI http://demos.shieldui.com/web/grid-virtualization/performance-1mil-row

मेरे सबसे अच्छे 3 विकल्प हैं jqGrid, jxxGrid और DataTables। वे हजारों पंक्तियों के साथ काम कर सकते हैं और वर्चुअलाइजेशन का समर्थन कर सकते हैं।

Comments

सूची के लिए +1, हालांकि तुलना के मामले में बहुत अधिक नहीं है। एक अच्छी शुरुआत फ्लेक्सग्रिड के लिए प्रत्येक के लिए कमिट्स की संख्या को जोड़ने की होगी - अब तक, स्लिकग्रिड के लिए 491 बनाम।

— डैन डस्केल्सस्कु

पेंच SO की 5 मिनट की टिप्पणी संपादित करें सीमा। # 1 - jqGrid - 1000+ कमिट करता है ; # 2 - 752 डेटाटेबल्स के लिए ; # 3 - 491 स्लिकग्रिड के लिए ; # 4 - 33 Flexigrid के लिए प्रतिबद्ध है । इंग्रिड - जून 2011 के बाद से कोई अपडेट नहीं । jqGridView - 2009 के बाद से कोई अपडेट नहीं

— Dan Dascalescu

पिछली टिप्पणी पर निर्माण, मैं यहाँ प्रति परियोजना कांटे की संख्या शामिल कर रहा हूँ: # 1 - स्लिकग्रिड - 670 कांटे; # 2 - jqGrid - 358 कांटे; # 3 - फ्लेक्सीग्रिड - 238; # 4 - डेटाटेबल्स - 216; # 5 - इंग्रिड - 41; # 6 - jqGridView - 0;

— ljs.dev

करने के लिए एक नजर डालें nexts.github.io/Clusterize.js

— डेनिस

क्या मैं टिप्पणी कर सकता हूं कि स्लीकग्रिड अभी भी जीवित है और अच्छी तरह से, लेकिन ऊपर दिए गए mleibman रेपो मृत है। नया लिंक: github.com/6pac/SlickGrid (mleibman इसे अपने रेपो पर अंतिम नोट में संदर्भित करता है), या www.slickgrid.net

— बेन

Answer 4

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

क्या वे (या आप) गंभीरता से सोचते हैं कि एक व्यक्ति (ग्रिड को देख रहा है) उस तरह की एकाग्रता को बनाए रख सकता है? क्या वे वास्तव में उस 1 सेकंड में बहुत कुछ कर रहे हैं, या वे (अधिक संभावना है) सामान को फ़िल्टर नहीं करना चाहते हैं? मुझे संदेह है कि "यथोचित आकार" वाले सबसेट को देखने के बाद, वे आपके लिए एक फ़िल्टर का वर्णन कर सकते हैं जो स्वचालित रूप से उन रिकॉर्डों को फ़िल्टर कर देगा।

पैक्सिडाब्लो और स्लीपर स्मिथ और लेसे वी कार्लसन ने भी निहित किया, आपने (और वे) आवश्यकताओं के माध्यम से नहीं सोचा है। ऊपर की तरफ, अब जब आपने स्लिकग्रिड पाया है, मुझे यकीन है कि उन फिल्टर की आवश्यकता तुरंत स्पष्ट हो गई है।

Comments

लाखों पंक्तियों की आवश्यकता हमेशा उन्हें देखने के बारे में नहीं है। कभी-कभी ग्राहक अपने स्वयं के डेटा विश्लेषण प्रणालियों में चलने के लिए रिकॉर्ड का एक आंशिक डंप चाहते हैं।

— cbmeeks 22

यदि इसका डेटा अपने स्वयं के विश्लेषण के लिए डंप होता है, तो यह एक वेबपेज पर ग्रिड में प्रदर्शित नहीं होगा, क्या यह होगा?

— स्टीवन बेनिटेज़

मुझे उन सबको एक साथ देखने की ज़रूरत नहीं है। वह स्तंभ किसके Ctrl+Fलिए है और किसके लिए है। विकल्प (पेजिंग, वेब-साइट खोज) बहुत खराब है। जब उपयोगकर्ता या उपयोगकर्ता के टिप्पणी इतिहास के माध्यम से स्क्रॉल करने के लिए Reddit, प्रश्न या उत्तर के माध्यम से स्क्रॉल करने का प्रयास कर रहे हैं, तो StackOverflow को देखें। सॉर्टिंग और तत्काल खोज एक ऐसी शक्ति प्रदान करते हैं जो विंडोज एक्सप्लोरर के पास है, लेकिन वेब-साइटों की कमी है।

— इयान बॉयड

Answer 5

मैं बहुत अच्छी निश्चितता के साथ कह सकता हूं कि आपको गंभीरता से उपयोगकर्ता को लाखों पंक्तियों को दिखाने की आवश्यकता नहीं है।

दुनिया में कोई भी उपयोगकर्ता नहीं है जो उस डेटा सेट को समझने या प्रबंधित करने में सक्षम होगा, भले ही आप तकनीकी रूप से इसे बंद करने का प्रबंधन करें, आप उस उपयोगकर्ता के लिए किसी भी ज्ञात समस्या का समाधान नहीं करेंगे।

इसके बजाय मैं इस बात पर ध्यान केंद्रित करूंगा कि उपयोगकर्ता डेटा क्यों देखना चाहता है। उपयोगकर्ता केवल डेटा देखने के लिए डेटा नहीं देखना चाहता है, आमतौर पर एक सवाल पूछा जाता है। यदि आप इसके बजाय उन सवालों के जवाब देने पर ध्यान केंद्रित करते हैं, तो आप किसी ऐसी चीज़ के बहुत करीब होंगे जो वास्तविक समस्या का समाधान करती है।

Comments

मेरे उपयोगकर्ता शोधकर्ता हैं जो डेटा की पेटबाइट के लिए उपयोग किए जाते हैं । मुझे लगता है कि मैं अपने उपयोगकर्ताओं को आपके काम से थोड़ा बेहतर जानता हूं, हालांकि आप सामान्य मामले में निश्चित रूप से सही हैं। के रूप में क्यों , इस datagrid बस बड़ा डेटा के प्रबंधन के लिए उपकरणों का एक सेट का हिस्सा है।

— रुडिगर

Answer 6

मैं बफ़र्ड व्यू सुविधा के साथ एक्सट जेएस ग्रिड की सिफारिश करता हूं।

http://www.extjs.com/deploy/dev/examples/grid/buffer.html

Comments

एक्स्टजे, वास्तव में। यह मूल रूप से डेटा प्रस्तुति के लिए विशेष रूप से बनाया गया है

— KdgDev

ExtJs इतना अच्छा है कि मैं रोना चाहता हूं कि इसका निर्माण jQuery के ऊपर नहीं हुआ

— जेम्स वेस्टगेट

अब आप केवल एक्सटजेएस के ग्रिड से संबंधित अंशों को लोड कर सकते हैं, ताकि आपके आवेदन में एक्सटीजेएस ग्रिड को जोड़ना बहुत भारी न हो। हालांकि, आपको अभी भी उपस्थिति में अंतर पर विचार करना होगा और उस घटक के लिए थीमिंग के एक्सटीजेएस तरीके का उपयोग करना होगा।

— JD स्मिथ

Answer 7

(अस्वीकरण: मैं w2ui का लेखक हूं)

मैंने हाल ही में 1 मिलियन रिकॉर्ड ( http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records ) के साथ जावास्क्रिप्ट ग्रिड को लागू करने के तरीके पर एक लेख लिखा है । मुझे पता चला कि अंततः 3 प्रतिबंध हैं जो इसे अधिक लेने से रोकते हैं:

1. Div की ऊँचाई की एक सीमा होती है (वर्चुअल स्क्रॉलिंग द्वारा इसे दूर किया जा सकता है)
2. 1 मिलियन रिकॉर्ड के बाद सॉर्ट और सर्च जैसे ऑपरेशन धीमी गति से शुरू हो रहे हैं
3. RAM सीमित है क्योंकि डेटा JavaScript सरणी में संग्रहीत है

मैंने 1 मिलियन रिकॉर्ड (IE को छोड़कर) के साथ ग्रिड का परीक्षण किया है और यह अच्छा प्रदर्शन करता है। डेमो और उदाहरण के लिए लेख देखें।

Comments

इस एक मिलियन रिकॉर्ड के साथ आपका html पेज 3MB आकार का है, लेकिन जब मैं अपना डेटा लोड करता हूं तो पेज 15MB का होता है, क्या w2ui इसे संभाल सकता है? मुझे कुछ गणनाओं के लिए सभी डेटा की आवश्यकता है।

— चेतन एस। चौधरी

Answer 8

dojox.grid.DataGrid डेटा के लिए एक जेएस अमूर्त प्रदान करता है ताकि आप इसे प्रदान किए गए dojo.data स्टोर के साथ विभिन्न बैक अप या अपने खुद के लिख सकें। आपको स्पष्ट रूप से एक की आवश्यकता होगी जो इस कई रिकॉर्ड के लिए यादृच्छिक अभिगम का समर्थन करता है। DataGrid भी पूर्ण पहुँच प्रदान करता है।

यहाँ संपादित करें मैथ्यू रसेल के लेख की एक कड़ी है जो आपको आवश्यक उदाहरण प्रदान करना चाहिए, डोजोक्सग्रिड के साथ लाखों रिकॉर्ड देखें। ध्यान दें कि यह ग्रिड के पुराने संस्करण का उपयोग करता है, लेकिन अवधारणाएं समान हैं, बस कुछ असंगत एपीआई सुधार थे।

ओह, और यह पूरी तरह से मुक्त खुला स्रोत है।

Answer 9

मैंने jQuery ग्रिड प्लगइन का उपयोग किया , यह अच्छा था।

क़ौम

Comments

Dojo भी एक अच्छा ग्रिड प्रदान करता है: docs.dojocampus.org/dojox/grid/DataGrid

— Select0r

Jqgrid देखने के लिए यहां काम नहीं दु: खी ... वे से जोड़ने के stackoverflow.com/questions/tagged/jqgrid उनकी वेबसाइट से trirand.net

— Rüdiger

Answer 10

यहाँ कुछ अनुकूलन किए गए हैं जिनसे आप चीजों को गति दे सकते हैं। बस जोर से सोच रहा था।

चूंकि पंक्तियों की संख्या लाखों में हो सकती है, इसलिए आप सर्वर से केवल JSON डेटा के लिए एक कैशिंग सिस्टम चाहते हैं। मैं किसी को भी सभी एक्स मिलियन आइटम डाउनलोड करने की इच्छा नहीं कर सकता, लेकिन अगर उन्होंने किया, तो यह एक समस्या होगी। 20M + सरणी पर सरणी के लिए Chrome पर यह थोड़ा परीक्षण मेरी मशीन पर लगातार क्रैश होता है।

var data = [];
for(var i = 0; i < 20000000; i++) {
    data.push(i);
}
console.log(data.length);​

आप LRU या कुछ अन्य कैशिंग एल्गोरिथ्म का उपयोग कर सकते हैं और एक ऊपरी सीमा है कि आप कितना डेटा कैश करने के लिए तैयार हैं।

स्वयं तालिका कोशिकाओं के लिए, मुझे लगता है कि DOM नोड्स का निर्माण / विनाश महंगा हो सकता है। इसके बजाय, आप केवल X संख्या की कोशिकाओं को पूर्व-परिभाषित कर सकते हैं, और जब भी उपयोगकर्ता किसी नई स्थिति पर स्क्रॉल करता है, तो JSON डेटा को इन कक्षों में इंजेक्ट करता है। स्क्रॉलबार का वास्तव में कोई सीधा संबंध नहीं होता है कि संपूर्ण डेटासेट का प्रतिनिधित्व करने के लिए कितनी जगह (ऊंचाई) की आवश्यकता होती है। आप मनमाने ढंग से टेबल कंटेनर की ऊँचाई सेट कर सकते हैं, 5000px कह सकते हैं, और कुल पंक्तियों की संख्या के अनुसार मैप कर सकते हैं। उदाहरण के लिए, यदि कंटेनरों की ऊँचाई 5000px है और कुल 10M पंक्तियाँ हैं, तो कंटेनर के ऊपर से स्क्रॉल की दूरी starting row ≈ (scroll.top/5000) * 10Mकहाँ है scroll.top। यहां छोटा डेमो ।

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

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

Answer 11

मुझे पता है कि यह एक पुराना सवाल है, लेकिन फिर भी .. इसमें dhtmlxGrid भी है जो लाखों पंक्तियों को संभाल सकता है। 50,000 पंक्तियों वाला एक डेमो है लेकिन ग्रिड में लोड / संसाधित की जा सकने वाली पंक्तियों की संख्या असीमित है।

अस्वीकरण: मैं DHTMLX टीम से हूं।

Comments

मैं 10 एमबी जसन डेटा दिखाना चाहता हूं और गणना में इसका उपयोग करना चाहता हूं, क्या DHTMLX वह काम कर सकता है, उस डेटा और HTML टैग्स के साथ मेरे ब्राउज़र का पेज लगभग 15 एमबी का है। क्या यह DHTMLX का उपयोग करने लायक है?

— चेतन एस। चौधरी

Answer 12

मेरा सुझाव है कि आप इसे पढ़ें

http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/

Answer 13

अस्वीकरण: मैं लंबे समय तक सिरदर्द के बिना YUI डेटाटेबल का भारी उपयोग करता हूं । यह शक्तिशाली और स्थिर है। अपनी आवश्यकताओं के लिए, आप एक स्क्रॉलिंगटाटाटेबल विच suports का उपयोग कर सकते हैं

• एक्स-स्क्रॉलिंग
• y-स्क्रॉलिंग
• xy स्क्रॉलिंग
• एक शक्तिशाली घटना तंत्र

आपको क्या चाहिए, मुझे लगता है कि आप चाहते हैं कि एक तालिका है । इसके एपीआई कहते हैं

जब फिक्स्ड स्क्रॉलिंग डेटाटेबल में स्क्रॉल होता है।

जैसा कि प्रत्येक DataTable एक DataSource का उपयोग करता है, आप अपने स्क्रॉलिंगडाटाटेबल को अपनी आवश्यकताओं के अनुसार पॉप्युलेट करने के लिए रेंडर लूप आकार के साथ tableScrollEvent के माध्यम से इसके डेटा की निगरानी कर सकते हैं।

रेंडर लूप का आकार कहता है

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

• डिफ़ॉल्ट रूप से रेंडरलोप्लाइज़ 0 होता है, इसलिए सभी पंक्तियों को एक ही लूप में प्रस्तुत किया जाता है। एक रेंडरलूपसाइज़> 0 ओवरहेड जोड़ता है इसलिए सोच-समझकर उपयोग करें।
• यदि आपके डेटा का सेट काफी बड़ा है (पंक्तियों की संख्या X कॉलम कॉलम X फॉर्मेटिंग जटिलता की संख्या) जो उपयोगकर्ता दृश्य रेंडरिंग में विलंबता का अनुभव करते हैं और / या यह स्क्रिप्ट को लटका देने का कारण बनता है, तो रेंडरअप को सेट करने पर विचार करें ।
• 50 के तहत एक रेंडरप्लेसाइज संभवत: इसके लायक नहीं है। एक renderLoopSize> 100 शायद बेहतर है।
• एक डेटा सेट को संभवतः तब तक बड़ा नहीं माना जाता जब तक कि उसमें सैकड़ों और सैकड़ों पंक्तियाँ न हों।
• रेंडरलोपॉपसाइज़> 0 और <कुल पंक्तियों के कारण तालिका एक लूप में रेंडर होने का कारण बनती है (जैसे रेंडरलॉपसाइज़ = 0)।

उदाहरण के लिए

// Render 100 rows per loop
 var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
     renderLoopSize:100
 });

<WHERE_DOES_THE_DATA_COME_FROM> बस एक ही है डेटास्रोत । यह एक JSON, JSFunction, XML और यहां तक ​​कि एक HTML तत्व भी हो सकता है

यहाँ आप मेरे द्वारा प्रदान किया गया एक साधारण ट्यूटोरियल देख सकते हैं। ध्यान रहे कोई और DATA_TABLE प्लगिन एक ही समय में सिंगल और डुअल क्लिक का समर्थन नहीं करता है। YUI डेटाटेबल आपको अनुमति देता है। और तो और, आप इसका उपयोग बिना किसी सिरदर्द के JQuery के साथ भी कर सकते हैं

कुछ उदाहरण, आप देख सकते हैं

• सामग्री सूचीबद्ध करें

YUI DataTable के बारे में किसी और चीज के बारे में पूछने के लिए स्वतंत्र महसूस करें।

सादर,

Answer 14

मैं इस बिंदु को देखने में विफल रहता हूं, jqGrid के लिए आप वर्चुअल स्क्रॉलिंग कार्यक्षमता का उपयोग कर सकते हैं:

http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling

लेकिन फिर, फ़िल्टरिंग के साथ लाखों पंक्तियाँ की जा सकती हैं:

http://www.trirand.net/aspnetmvc/grid/performancelinq

मैं वास्तव में "के रूप में अगर कोई पृष्ठ नहीं हैं" के बिंदु को देखने में विफल रहता है, हालांकि, मेरा मतलब है ... ब्राउज़र में एक बार में 1,000,000 पंक्तियों को प्रदर्शित करने का कोई तरीका नहीं है - यह HTML कच्ची 10MB है, मैं देखने में असफल हूं उपयोगकर्ता पृष्ठ क्यों नहीं देखना चाहेंगे।

वैसे भी ...

Answer 15

सर्वश्रेष्ठ दृष्टिकोण जो मैं सोच सकता था कि स्क्रॉल खत्म होने से पहले हर स्क्रॉल या कुछ सीमा के लिए डेटा को जंक प्रारूप में लोड करके। json को आसानी से वस्तुओं में बदला जा सकता है और इसलिए तालिका पंक्तियों का निर्माण आसानी से विनीत रूप से किया जा सकता है

Comments

मेरे पास यह कैसा है। JSON में वापस भेजे गए पंक्तियों के एक सेट के लिए एक अनुरोध किया गया है ... मैं एक जावास्क्रिप्ट क्लाइंट साइड रेंडरर की तलाश कर रहा हूं जो इसका समर्थन करता है!

— रुडिगर

क्या??? बिल्ली "क्लाइंट साइट रेंडरर" क्या है? किसी भी जावास्क्रिप्ट को अभी भी अजाक्स कॉल करने की आवश्यकता होगी - इसलिए आपको अभी भी कुछ परिवहन प्रारूप पर समझौता करना होगा। आप कुछ काम करने से बच नहीं सकते। कोई-कोई तुम्हारे दोस्त मेरे लिए ऐसा नहीं करेंगे।

— एंड्री Drozdyuk

मुझे पता है कि AJAX कॉल करना पड़ता है; यह हिस्सा सरल है। क्लाइंट "स्टार्ट = 20 & लिमिट = 20" जैसी किसी चीज़ का अनुरोध करता है और सर्वर (XML या JSON फॉर्मेट) से पंक्तियों को 20-39 प्राप्त करता है। "क्लाइंट-साइड रेंडरर" (मेरी शब्दावली!) इन अनुरोधों को समझदारी से बनाता है (उदाहरण के लिए, जब उपयोगकर्ता स्क्रॉल करता है), और एक सुंदर ग्रिड में मूल परिणाम प्रस्तुत करता है। आप जो कहते हैं उसके विपरीत, किसी और ने मेरे लिए यह काम किया है। इस प्रश्न के अन्य सभी उत्तर क्या हैं।

— रुडिगर

ठीक है, ऐसा लगता है कि किसी ने भी "आपके लिए" नहीं किया है :)

— एंड्री डार्ज़िडुक

Answer 16

मैं अत्यधिक खुले रिको की सिफारिश करूंगा । शुरुआत में इसे लागू करना मुश्किल है, लेकिन एक बार जब आप इसे पकड़ लेंगे तो आप कभी पीछे मुड़कर नहीं देखेंगे।

Answer 17

मुझे पता है कि यह सवाल कुछ साल पुराना है, लेकिन jqgrid अब वर्चुअल स्क्रॉलिंग का समर्थन करता है:

http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php

लेकिन पेजिंग के साथ विकलांग

Answer 18

मेरा सुझाव है कि सिग्मा ग्रिड, सिग्मा ग्रिड में एम्बेडिंग पेजिंग विशेषताएं हैं जो लाखों पंक्तियों का समर्थन कर सकती हैं। और यह भी, आपको इसे करने के लिए एक रिमोट पेजिंग की आवश्यकता हो सकती है। डेमो देखें http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

Answer 19

DGrid पर एक नज़र डालें:

https://dgrid.io/

मैं मानता हूं कि उपयोगकर्ता कभी भी, कभी भी एक साथ लाखों डेटा देखने की आवश्यकता नहीं है, लेकिन dGrid उन्हें जल्दी से प्रदर्शित कर सकता है (एक समय में एक स्क्रीनफुल)।

एक कप चाय बनाने के लिए समुद्र को उबालें नहीं।

Comments

आपकी चाय का कप (लिंक) नहीं मिला है। :)

— अक्षय

अब इसकी अपनी साइट है :)

— कोलमैन्टो