चिकनी, अनंत स्क्रॉलिंग के साथ सर्वश्रेष्ठ ओपन-सोर्स ग्रिड

Question

जब मैंने अपनी वर्तमान परियोजना पर काम करना शुरू किया तो मुझे काफी कठिन कार्य दिया गया - कुछ ऐसा बनाने के लिए जो बड़े पैमाने पर स्प्रेडशीट को प्रतिस्थापित करने का अनुमान लगाता है, लोग मेरी कंपनी में आंतरिक रूप से उपयोग करते हैं।

यही कारण है कि हमने सोचा कि एक पेजिनेटेड टेबल कभी काम नहीं करेगा, और काफी ईमानदारी से मुझे लगता है कि अंकन बेवकूफ है। एक पेजिनेटेड टेबल पर गतिशील रूप से बदलते डेटा प्रदर्शित करना लंगड़ा है। अगले डेटा अपडेट के साथ पृष्ठ # 2 पर एक आइटम कहें पृष्ठ पर जो कुछ भी हो सकता है।

इसलिए हमें अच्छी अनंत स्क्रॉल के साथ ग्रिड बनाने की आवश्यकता थी। मुझे गलत मत समझो, मैंने कई अलग-अलग समाधानों की कोशिश की है। सबसे पहले, मैंने वेनिला एनजी-दोहराने वाली चीज़ बनाई और ng-infinite-scroll का उपयोग करने की कोशिश की, और फिर ng-scroll from UI.Utils। वह जल्दी मुझे उस बिंदु पर ले जाता है जहां स्क्रॉलिंग दर्दनाक रूप से धीमी हो गई, और मैंने जटिल सेल टेम्पलेट्स, ng-if एस या फ़िल्टर जैसे किसी भी पागल सामान का भी उपयोग नहीं किया है। बहुत जल्द प्रदर्शन मेरा सबसे बड़ा दर्द बन गया। जब मैंने आकार बदलने योग्य कॉलम और कस्टम सेल टेम्पलेट्स जैसे सामान जोड़ना शुरू किया, तो कोई ब्राउज़र अब उन सभी बाइंडिंग को संभाल नहीं सकता था।

फिर मैंने ng-grid की कोशिश की, और सबसे पहले मुझे इसे पसंद आया - उपयोग करने में आसान, इसमें कुछ अच्छी सुविधाएं हैं जिनकी मुझे आवश्यकता है, लेकिन जल्द ही मुझे एहसास हुआ - एनजी-ग्रिड भयानक है। वर्तमान संस्करण बग के साथ भरवां, सभी योगदानकर्ताओं ने उन्हें ठीक करना बंद कर दिया और अगले संस्करण पर काम करने के लिए स्विच किया। और केवल भगवान जानता है कि वह कब उपयोग करने के लिए तैयार होगा। एनजी-ग्रिड भी वेनिला एनजी-दोहराना से भी काफी बदतर हो गया।

मैं कुछ बेहतर खोजने की कोशिश करता रहा। trNgGrid अच्छा लग रहा था, लेकिन रास्ता बहुत सरल है और यह उन सुविधाओं की पेशकश नहीं करता है जिन्हें मैं बॉक्स से बाहर ढूंढ रहा था।

ng-table एनजी-ग्रिड से बहुत अलग नहीं दिखता था, शायद यह मुझे एक ही प्रदर्शन के मुद्दों का कारण बनता।

और निश्चित रूप से मुझे बाइंडिंग को अनुकूलित करने का एक तरीका ढूंढना आवश्यक था। कोशिश की bind-once - संतुष्ट नहीं था, ग्रिड अभी भी लगी थी। (अद्यतन: कोणीय 1.3 एक बार बाध्यकारी के लिए {{::foo}} वाक्यविन्यास प्रदान करता है)

फिर मैंने प्रतिक्रिया की कोशिश की। प्रारंभिक प्रयोग आशाजनक लग रहा था, लेकिन कुछ और जटिल बनाने के लिए मुझे प्रतिक्रिया विनिर्देशों को सीखने की आवश्यकता है, इसके अलावा उस चीज़ को थोड़े गैर-anguleresque लगता है और कौन जानता है कि कोणीय + प्रतिक्रिया के साथ बनाए गए निर्देशों का परीक्षण कैसे करें। अच्छा स्वचालित परीक्षण बनाने के मेरे सभी प्रयास विफल रहे - मुझे एक दूसरे को (जो शायद अधिक प्रेत की समस्या है) की तरह प्रतिक्रिया और PhanthomJS बनाने का कोई तरीका नहीं मिल सका। क्या बेहतर हेडलेस ब्राउज़र है) इसके अलावा प्रतिक्रिया "हल करने" को हल नहीं करती है DOM "समस्या - जब आप डेटा तत्वों में नए तत्वों को धक्का देते हैं, तो कुछ मिलीसेकंड ब्राउज़र के लिए यूआई थ्रेड को अवरुद्ध करता है। बेशक यह पूरी तरह से अलग तरह की समस्या है।

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

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

इसके अलावा, मैं इस article पाया, और इसके बारे में मिश्रित भावनाओं था, इन लोगों कुछ गैर-दस्तावेज वाले हैक को कोणीय में लागू किया और संभवतः वे कोणीय के फीचर संस्करणों के साथ टूट जाएंगे।

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

तो आखिरकार, मेरे प्रश्न पर - क्या अनंत स्क्रॉलिंग के साथ अच्छा ग्रिड रखने के लिए अच्छा, गारंटीकृत, कम दर्दनाक तरीका है? क्या कोई अच्छे उदाहरण, परियोजनाओं या वेब पृष्ठों को इंगित कर सकता है? क्या यह ux-angularjs-datagrid का उपयोग करना सुरक्षित है या कोणीय का उपयोग करके अपनी खुद की चीज बनाने के लिए बेहतर है? किसी ने कभी केंडो या विज्मो ग्रिड की कोशिश की?

कृपया! इस सवाल को बंद करने के लिए वोट न दें, मुझे पता है कि स्टैक ओवरफ्लो पर बहुत सारे प्रश्न हैं, और मैंने उनमें से लगभग हर एक को पढ़ा है, फिर भी सवाल खुला रहता है।

Answer 1

शायद समस्या मौजूदा विगेट्स के साथ नहीं है, लेकिन जिस तरह से आप इसका उपयोग करते हैं उससे अधिक। आपको यह समझना होगा कि 2000 से अधिक बाइंडिंग कोणीय पाचन चक्र यूआई के लिए आसानी से प्रस्तुत करने में बहुत अधिक समय ले सकते हैं। उसी विचार में आपके पृष्ठ पर जितने अधिक HTML नोड्स हैं, उतनी अधिक मेमोरी आप उपयोग करेंगे और आप आसानी से कई नोड्स प्रस्तुत करने के लिए ब्राउज़र क्षमता तक पहुंच सकते हैं। यह एक कारण है कि लोग इस "लंगड़ा" अंकन का उपयोग क्यों करते हैं।

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

This plunker आपको smart-table के साथ विचार दिखाता है। स्क्रॉल करते समय, अगला पृष्ठ लोड हो जाता है (स्क्रॉल करते समय आपको पिछले पृष्ठ को लागू करना होगा)। और किसी भी समय पंक्तियों की अधिकतम राशि 40.

function getData(tableState) { 

      //here you could create a query string from tableState 
      //fake ajax call 
      $scope.isLoading = true; 

      $timeout(function() { 

       //if we reset (like after a search or an order) 
       if (tableState.pagination.start === 0) { 
        $scope.rowCollection = getAPage(); 
       } else { 
        //we load more 
        $scope.rowCollection = $scope.rowCollection.concat(getAPage()); 

        //remove first nodes if needed 
        if (lastStart < tableState.pagination.start && $scope.rowCollection.length > maxNodes) { 
         //remove the first nodes 
         $scope.rowCollection.splice(0, 20); 
        } 
       } 

       lastStart = tableState.pagination.start; 

       $scope.isLoading = false; 
      }, 1000); 

     } 

है इस समारोह जब भी उपयोगकर्ता स्क्रॉल नीचे बुलाया और

(प्रदर्शन कारण के लिए निश्चित रूप से थ्रोटल के साथ) एक सीमा तक पहुँच जाने लेकिन महत्वपूर्ण हिस्सा है है जहां आप मॉडल में पहली प्रविष्टियों को हटाते हैं, यदि आपने किसी दिए गए डेटा से अधिक लोड किया है।

Answer 2

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