जावास्क्रिप्ट के साथ एक डाटाग्रिड कॉलम छुपाएं?

Question

मेरे पास कुछ 20 कॉलम के साथ एक .NET डेटाग्रिड है। मुझे जावास्क्रिप्ट का उपयोग करके बटन के क्लिक के आधार पर टॉगल करने के लिए कॉलम की दृश्यता की आवश्यकता है। कोई विचार?

Answer 1

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

यहाँ फिर जाना ...

function hideColumns(tableId, colIndexArray) { 
    var tbl = document.getElementById(tableId); 
    if(!tbl) return; 

    var rows = tbl.getElementsByTagName("TBODY"); 

    if(rows.length == 0) 
    rows = tbl.getElementsByTagName("TR"); 
    else 
    rows = rows[0].getElementsByTagName("TR"); 

    var cols = rows[rows.length - 1].getElementsByTagName("TD"); 
    var colgroup = document.createElement("COLGROUP"); 

    for(var i = 0, l = cols.length; i < l; i++) { 
    var col = document.createElement("COL"); 

    for(var num in colIndexArray) { 
     if(colIndexArray[num] == i) { 
     if(document.all) 
      col.style.display = 'none' 
     else 
      col.style.visibility = 'collapse'; 

     break; 
     } 
    } 

    colgroup.appendChild(col); 
    } 

    tbl.insertBefore(colgroup, tbl.childNodes[0]); 
} 

इस तरह यह प्रयोग करें ...

var columnsToHide = [0, 1, 2]; // hide the first 3 columns 
var tableId = "tableIdHere"; // view the source of your page to get this 
hideColumns(tableId, columnsToHide); 

IE7 और FF3 में परीक्षण किया गया: Hide Table Columns Using Javascript

Answer 2

jQuery का उपयोग करें! यह विस्मयकारी है।

आपका लिंक इस तरह दिखेगा कर सकते हैं:

<a href="javascript:ToggleColumn();">Toggle My Column</a> 

आपका जावास्क्रिप्ट समारोह इस तरह दिख सकता:

function ToggleColumn() 
{ 
    $(".myColumn").toggle(); 
} 

वांछित स्तंभ में उत्पन्न प्रत्येक विशेषता वर्ग = "MyColumn" होनी चाहिए तो आपका जावास्क्रिप्ट इसे ढूंढ सकता है। ऐसा करने के लिए, आप अपने डेटा ग्रिड के वांछित स्तंभ के लिए एक <ItemStyle /> तत्व जोड़ सकते हैं, इस तरह:

<asp:TemplateColumn runat="server"> 
    <ItemStyle CssClass="myColumn" /> 
</asp:TemplateColumn> 

और अंत में, jQuery के लिए एक लिंक इस तरह, कहीं आपके हेडर फाइल में शामिल करना न भूलें:

<script src="/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 

आप download jQuery here कर सकते हैं।

Answer 3

मेरी निजी राय JQuery का उपयोग करना होगा।

कॉलम ढूंढने के लिए चयनकर्ताओं का उपयोग करें और शैली में 'छुपा: सत्य' जोड़ें। यह एक शुद्ध जेएस समाधान है।

Answer 4

इस jQuery प्लगइन पर देखो,

http://p.sohei.org/jquery-plugins/columnmanager/

अपने पृष्ठ पर इस प्लगइन शामिल और लिंक के क्लिक करें घटना पर यह कहते हैं।

Answer 5

अन्य लोगों के सुझाव के रूप में jquery का उपयोग करें ... इस तरह कुछ चयनकर्ता इसे करना चाहिए। यह अनिवार्य रूप से स्तंभ को छिपाने के हैं 3.

$('table.tableCSS tr').find('td:eq(2)').hide(); // eq(index)