在aspx页面中有条件地显示/隐藏jQuery数据表列

Z时代
2024-01-10
分类：问答

我在apsx页面中有一个单选按钮列表，并希望根据单选按钮选择显示/隐藏jQuery数据表中的列。在aspx页面中有条件地显示/隐藏jQuery数据表列

我设法做到了，但与仅填充基于单选按钮选择的数据表中的数据并没有触及列可见性相比，它的速度非常慢。

这是我有什么，我曾尝试：

（假设单选按钮，列表中包含“选项1”，“选项2”，“方案3”和“选4”的选择，再加上“所有“）。

<asp:RadioButtonList runat="server" ID="rblOptions" 
    ClientIDMode="Static" 
    DataSourceID="odsOptionss" 
    DataTextField="Option" 
    DataValueField="OptionID" 
    AutoPostBack="true" 
    AppendDataBoundItems="true"> 
    <asp:ListItem Text="All" Value="-1" Selected="True" /> 
</asp:RadioButtonList> 
<div runat="server" id="divAll" clientidmode="Static"> 
    <table id="svDataTable" class="table table-striped table-bordered table-hover table-responsive"> 
     <thead> 
      <tr> 
       <th>Col1</th> 
       <th>Col2</th> 
       <th>Col3</th> 
       <th>Col4</th> 
       <th>Col5</th> 
      </tr> 
     </thead> 
     <tbody> 
      <asp:Repeater runat="server" ID="rptTableData"> 
       <ItemTemplate> 
        <tr> 
         <td runat="server" id="tdCol1"><%# Eval("Col1Data") %></td> 
         <td runat="server" id="tdCol2"><%# Eval("Col2Data") %></td> 
         <td runat="server" id="tdCol3"><%# Eval("Col3Data") %></td> 
         <td runat="server" id="tdCol4"><%# Eval("Col4Data") %></td> 
         <td runat="server" id="tdCol5"><%# Eval("Col5Data") %></td> 
        </tr> 
       </ItemTemplate> 
      </asp:Repeater> 
     </tbody> 
    </table> 
</div>

Javascript代码：

<script typeof="text/javascript"> 
    $(function() { 
     bindDataTable(); // bind data table on first page load 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable); // bind data table on every UpdatePanel refresh 
    }); 
    function bindDataTable() { 
     var selectedOption = $("#rblOptions input[type=radio]:checked"); 
     var optionId = selectedOption.val(); 
     var option = selectedOption.next().html(); 
     if ($.fn.dataTable.isDataTable('#svDataTable')) { 
      table = $('#svDataTable').DataTable(); 
     } 
     else { 
      table = $('#svDataTable').DataTable({ 
       "bStateSave": true, 
       "fnStateSave": function (oSettings, oData) { 
        localStorage.setItem('svDataTable', JSON.stringify(oData)); 
       }, 
       "fnStateLoad": function (oSettings) { 
        return JSON.parse(localStorage.getItem('svDataTable')); 
       } 
      }); 
     } 
     switch (option) { 
      case 'All': 
       break; 
      case 'Option 1': 
       table.column(3).visible(false); 
       table.column(4).visible(false); 
       table.column(5).visible(false); 
       break; 
      case 'Option 2': 
       table.column(2).visible(false); 
       table.column(3).visible(false); 
       break; 
      case 'Option 3': 
       break; 
      case 'Option 4': 
       table.column(1).visible(false); 
       table.column(2).visible(false); 
       break; 
     } 
    }

更新

我适应Alex的建议如下图所示，虽然我不知道如果我理解正确的亚历克斯，如果我这样做正确。我想不会becuasee“调试”我把剧本从来没有被击中：

$(function() { 
    bindDataTable(); // bind data table on first page load 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable); // bind data table on every UpdatePanel refresh 
}); 
function bindDataTable() { 
    if ($.fn.dataTable.isDataTable('#svDataTable')) { 
     table = $('#svDataTable').DataTable(); 
    } 
    else { 
     table = $('#svDataTable').DataTable({ 
      "bStateSave": true, 
      "fnStateSave": function (oSettings, oData) { 
       localStorage.setItem('svDataTable', JSON.stringify(oData)); 
      }, 
      "fnStateLoad": function (oSettings) { 
       return JSON.parse(localStorage.getItem('svDataTable')); 
      } 
     }); 
    } 
} 
$('#rblSysType').on('click', '[type=radio]', function() { 
    var tbl = $('#svDataTable'); 
    $('td, th', tbl).show(); 
debugger 
    var selectedSysType = $("#rblSysType input[type=radio]:checked"); 
    var sysTypeId = selectedSysType.val(); 
    var sysType = selectedSysType.next().html(); 
    switch (sysType) { 
     case 'Option 2': 
     case 'Opion 4': 
     case 'All': 
      break; 
     case 'Option 1': 
      $('tr>*:nth-child(8)', tbl).hide(); 
      $('tr>*:nth-child(9)', tbl).hide(); 
      $('tr>*:nth-child(10)', tbl).hide(); 
      $('tr>*:nth-child(11)', tbl).hide(); 
      $('tr>*:nth-child(12)', tbl).hide(); 
      $('tr>*:nth-child(13)', tbl).hide(); 
      break; 
     case 'Option 3': 
      $('tr>*:nth-child(11)', tbl).hide(); 
      $('tr>*:nth-child(12)', tbl).hide(); 
      $('tr>*:nth-child(13)', tbl).hide(); 
      break; 
     case 'Option 5': 
      $('tr>*:nth-child(11)', tbl).hide(); 
      $('tr>*:nth-child(12)', tbl).hide(); 
      break; 
    } 
});

回答：

<asp:RadioButtonList呈现为input type="radio"列表，并在您的示例Repeater是table。所以你想在客户端轻松完成。像这样的东西。基于OP更新

更新

ASP.NET可以添加前缀的控件ID所以它是聪明的使用CSS类来代替。只要确保它们在页面上是唯一的。

<asp:RadioButtonList runat="server" ID="rblOptions" CssClass="make-list"...

最后更新

首先决定你到底想要什么。

如果内容和布局中继的取决于RadioButtonList选择的话，最好的选择是使用服务器端代码（与单选按钮列表AutoPostBack="true"），并决定如何显示/隐藏在repeater_ItemDataBound处理程序。如果你仍然想从

ScriptManagerRegisterStartupScript(...

$('.make-list').on('click', '[type=radio]', function() {  
    //var make = this.parentNode.innerText; //if you want to use text instead of value (not recommended)  
    var tbl = $('#svDataTable');  
    $('td, th', tbl).show();  
    if (this.value == -1)  
    return; //show all  
    switch (this.value) {//**this** is radio button clicked  
    case "1":  
     $('tr>*:nth-child(1),tr>*:nth-child(3)', tbl).hide();  
     break;  
    case "2":  
     $('tr>*:nth-child(2),tr>*:nth-child(3),tr>*:nth-child(5)', tbl).hide();  
     break;  
    default:  
     $('tr>*:nth-child(' + this.value + ')', tbl).hide();  
     break;  
    }  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<div id="opts" class="make-list">Hide a column  
    <label><input type="radio" name="opt" value="-1" />show all</label>  
    <label><input type="radio" name="opt" value="1" />one</label>  
    <label><input type="radio" name="opt" value="2" />two</label>  
    <label><input type="radio" name="opt" value="3" />three</label>  
    <label><input type="radio" name="opt" value="4" />four</label>  
    <label><input type="radio" name="opt" value="5" />five</label>  
</div>  
<table id="svDataTable" class="table table-striped table-bordered table-hover table-responsive">  
    <thead>  
    <tr>  
     <th>Col1</th>  
     <th>Col2</th>  
     <th>Col3</th>  
     <th>Col4</th>  
     <th>Col5</th>  
    </tr>  
    </thead>  
    <tbody>  
    <tr>  
     <td>dat 1.1</td>  
     <td>dat 1.2</td>  
     <td>dat 1.3</td>  
     <td>dat 1.4</td>  
     <td>dat 1.5</td>  
    </tr>  
    <tr>  
     <td>dat 2.1</td>  
     <td>dat 2.2</td>  
     <td>dat 2.3</td>  
     <td>dat 2.4</td>  
     <td>dat 2.5</td>  
    </tr>  
    </tbody>  </table>