बड़ी तालिका प्रदर्शन पर jQuery शो/छुपा कॉलम

Question

मेरे पास लगभग 30 कॉलम के साथ HTML तालिका है और कहीं 10 से 500 आइश पंक्तियों के बीच है। मैं एक बटन क्लिक के कॉलम के एक सेट को दिखाना/छिपाना चाहता हूं।

2 की कोशिश की है दृष्टिकोण

1. तालिका के thead वीं के माध्यम से दोहराएं और .show() या .hide() वें और टीडी पर करते हैं।
2. तालिका के थैड वें के माध्यम से पुनरावृत्त करें और TH और TD को दिखाने/छुपाने के लिए कक्षा बदलें।

फ़ंक्शन को निम्न स्निपेट के रूप में कार्यान्वित किया गया है। हालांकि, प्रदर्शन इतना अच्छा नहीं है। दिखाएँ/छुपाएं 20 कॉलम डेटा की 80 ~ 120 पंक्तियों पर लगभग 5 ~ 10 सेकंड लेते हैं।

मैं सोच रहा हूं कि क्या कुछ भी है जो हम इसे तेजी से करने के लिए कर सकते हैं।

function ToggleHeadVisibility(showHide) { 

    var index = 0; 

    $('#' + gridViewName + ' thead th').each(function(index) { 
     index++; 
     if (showHide == "SHOW") { 
      /* 
      $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show(); 
      $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show(); 
      */ 
      $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide'); 
      $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide'); 
     } else if (showHide = "HIDE") { 
      /* 
      //if (showColumnArray.has($(this).get(0).innerHTML)) { 
      if (showColumnArray.has($(this).attr('title'))) { 
      $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show(); 
      $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show(); 
      } 
      else { 
      $('#' + gridViewName + ' th:nth-child(' + (index) + ')').hide(); 
      $('#' + gridViewName + ' td:nth-child(' + (index) + ')').hide(); 
      } 
      */ 
      if (showColumnArray.has($(this).attr('title'))) { 
       $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide'); 
       $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide'); 
      } else { 
       $('#' + gridViewName + ' th:nth-child(' + (index) + ')').addClass('columnHide'); 
       $('#' + gridViewName + ' td:nth-child(' + (index) + ')').addClass('columnHide'); 
      } 

     } 
    }); 
} 

Answer 1

कुछ सुझाव:

1. एक मेज के निर्माण करते हैं, शीर्ष लेख और डेटा कोशिकाओं को col1, col2, col3 आदि जैसे सीएसएस वर्गों जोड़ें। फिर आप संबंधित कॉलम को छिपाने के लिए $("td.col1").hide(); कर सकते हैं। यह एन-वें बच्चे चयनकर्ता से तेज़ है।

2. आईई और फ़ायरफ़ॉक्स में, आप visibility: collapse को पूरे कॉलम को ध्वस्त करने के लिए col तत्व पर सेट कर सकते हैं। यह बहुत तेज होगा। दुर्भाग्यवश वेबकिट ब्राउज़र http://www.quirksmode.org/css/columns.html में समर्थित नहीं है।आप ब्राउजर के आधार पर अपना कोड ब्रांच कर सकते हैं ताकि कम से कम आईई और फ़ायरफ़ॉक्स में तेज़ हो।

3. यदि आपकी तालिका में table-layout: fixed है, तो यह प्रदर्शन में काफी सुधार कर सकता है क्योंकि जब भी आप ऑटो मोड में तालिका को स्पर्श करते हैं तो आपके ब्राउज़र को स्तंभों की चौड़ाई की गणना करने की आवश्यकता नहीं होती है।

4. डीओएम पेड़ से तालिका को हटाने पर विचार करें (.remove() के माध्यम से), थोक शो/छुपाएं ऑपरेशन करें और इसे वापस डालें। जब भी आप डोम पेड़ पर थोक ऑपरेशन करना चाहते हैं तो यह एक सामान्य नियम है।

Answer 2

जाहिर है, इस विकल्प दिखा और तत्वों को छिपाने के लिए एक छोटे से snappier है:

.css({'display':'none'}) & .css({'display':'block'}); 

http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance

लेकिन मुझे लगता है तुम्हारा असली समस्या यह है कि पाश है।

Answer 3

यहाँ

if (true) { 
     $('th:nth-child(' + c + ')').show(); 
     $('td:nth-child(' + c + ')').show();       
    } 
    else { 
     $('th:nth-child(' + c + ')').hide(); 
     $('td:nth-child(' + c + ')').hide();       
    } 

से मिलता-जुलता कोड मैं छिपाने के लिए मेरी ग्रिड में "वें" कॉलम का उपयोग किया की शांति है ..., सिवाय मैं jQuery टॉगल "दिखाएँ/छिपाएँ" का इस्तेमाल किया;

यह दिखाने के लिए 400 पंक्तियों की/छिपाने स्तंभ 1second के तहत ...

Borik

Answer 4

आप कैशिंग के क्षेत्र में एक बहुत कुछ कर सकता है लगता है।

var gridView = $('#' + gridViewName); 

और बाद में एक पंक्ति कैश्ड किया जा सकता है: शुरुआत के लिए, अपने GridView कंटेनर कैश

var row[0] = gridView.find('tr:nth-child(0)'); // Not sure the path is right, but you get the idea... 

इसके अलावा, सेट का उपयोग वास्तविक छिपाने प्रदर्शन बल्कि एक .प्रत्येक()

से

row[0].addClass('columnHide'); // Calls addClass() on each element in the set 

$ के साथ बार-बार पूछताछ करने के बजाय तत्वों के कैशिंग सेट, और लूप के बजाए तत्वों के सेट पर क्रियाएं करने से प्रदर्शन में लंबा रास्ता तय हो सकता है।

Answer 5

पंक्तियों और स्तंभों के माध्यम से इटरेशन हमेशा चीजों को धीमा करने जा रहा है। अपनी जावास्क्रिप्ट में पुनरावृत्ति से बचने के लिए सीधे सीएसएस नियमों में हेरफेर करने का प्रयास करें और ब्राउजर को आपके लिए यह करने के लिए मजबूर करें।

प्लगइन्स jQueryRule और jQueryCSSRule चेकआउट करें।

सीएसएस नियमों को मैनिपुलेट करना सीधे फायदेमंद हो सकता है यदि आप सभी नियमों को जोड़ते हैं। यहां 500 पंक्तियों और 50 कॉलम के साथ quick test है। अधिकांश समय पुन: प्रस्तुत करने में व्यतीत होता है, और जावास्क्रिप्ट फ़ंक्शन के भीतर बिताए गए समय में मुझे क्रोम पर औसत 200-300 ms और फ़ायरफ़ॉक्स पर 0 ms पर देता है। वर्तमान में यह मानक एपीआई का उपयोग कर रहा है, लेकिन यह आईई को विस्तारित करने के लिए तुच्छ है।

यह दस्तावेज़ के भीतर एक नया <style> नोड बनाकर और सभी कॉलम मैनिपुलेशन जोड़कर काम करता है। मुख्य विचार कुछ स्तंभों को छिपाने के दौरान सभी नियमों को एक साथ जोड़ना है। ऐसा करने के बजाय:

table tr :nth-child(1) { display: none; } 
table tr :nth-child(4) { display: none; } 
table tr :nth-child(7) { display: none; } 

यह करता है:

table tr :nth-child(1), table tr :nth-child(4), table tr :nth-child(7) { 
    display: none; 
} 

जब सभी स्तंभों वापस प्रदर्शित किया जाना चाहिए, हटाने कि ऊपर यह एक नियम विशेष कॉलम छुपा रहा है।

Answer 6

क्या मैं ऐसा कुछ सुझा सकता हूं?

$(function() { 
    $('#show').click(function() { 
     var i; 
     for (i = 0; i < titles.length; i++) 
     { 
      ToggleHeadVisibility('SHOW', titles[i]); 
     } 
    }); 

    $('#hide').click(function() { 
     var i; 
     for (i = 0; i < titles.length; i++) 
     { 
      ToggleHeadVisibility('HIDE', titles[i]); 
     } 
    }); 
}); 

var titles = ['one', 'three', 'five']; 

function ToggleHeadVisibility(showHide, title) 
{ 
    var x = $('th[title=' + title + ']').index(); 
    var selectString = 'th:nth-child(' + (x + 1) + '), td:nth-child(' + (x + 1) + ')'; 
    var $set = $(selectString); 

    if (showHide === "SHOW") 
    { 
     $set.show(); 
    } 
    else if (showHide === "HIDE") 
    { 
     $set.hide(); 
    } 
} 

मुझे लगता है कि वास्तव में, यह आपके लूप को परेशानी है। आप तालिका में प्रत्येक वें पर पुनरावृत्त कर रहे हैं। यदि आप केवल विशिष्ट लोगों को ढूंढना चाहते हैं, तो आप उन लोगों पर फिर से प्रयास क्यों न करें जिन्हें आप ढूंढना चाहते हैं?

तो, यहां क्या होता है ठीक है। "शो" (या "छुपाएं") बटन पर क्लिक करने पर, हम टॉगलहेड दृश्यता को कॉल करते हुए शीर्षक सरणी पर फिर से सक्रिय होते हैं।

उस फ़ंक्शन में, हमें दिए गए शीर्षक के साथ पहले तत्व की अनुक्रमणिका मिलती है, और फिर nth-child (x) नोड्स को दिखाएं या छुपाएं।

मैंने इसे 6 कॉलम वाले एक टेबल पर चलाया है, जो एक समय में 3 दिखा रहा है और छिपा रहा है, और 1000 से अधिक पंक्तियां। यह बहुत तेज़ है, यह क्या कर रहा है।

ध्यान दें कि यदि आपका शीर्षक एस अद्वितीय नहीं है, तो यह केवल तालिका में पहला वाला होगा।