Question

我在下表中使用AJAX / JSON填充了数据当我点击一个特定的行时，它会填充一些文本框，其中包含来自表格行的值，该行正常工作，根据行中的值，我将隐藏或显示一些复选框，但我无法使该部分工作。下面是我的代码，不知道做错了什么。感谢您的帮助

    <script type="text/javascript">
    $(document).ready(function () {
        "responsive"; true,
        "serverSide"; true,
        "info"; true,
        "stateSave"; true,
     $.ajax({
         type: "POST",
         dataType: "json",
         url:"CustomerService.asmx/GetCustomer",
         success: function (data) {
             var datatableVariable = $('#dtCustomers').DataTable({

                 data: data,
                 columns: [
                     { 'data': 'iD' },
                     { 'data': 'AccountNumber' },
                     { 'data': 'Name' },
                      { 'data': 'FirstName' },
                       { 'data': 'LastName' },
                        { 'data': 'Balance' },
                         { 'data': 'TypeOfAccount' }
                 ],
                 columnDefs: [
             { "visible": false, "targets": 0 },
              { "visible": false, "targets": 3 },
               { "visible": false, "targets": 4 },
               { "visible": false, "targets": 6 }
                 ]
             });
             datatableVariable.columns().every(function () {
                 var column = this;
                 $(this.footer()).find('input').on('keyup change', function () {
                     column.search(this.value).draw();
                 });
             });
             $('.showHide').on('click', function () {
                 var tableColumn = datatableVariable.column($(this).attr('data-columnindex'));
                 tableColumn.visible(!tableColumn.visible());
             });


             $('#dtCustomers').on('click', 'tr', function () {

                 var data = datatableVariable.row(this).data();
                 $(document.getElementById('<%= customerids.ClientID %>')).val(data.iD);
                 $(document.getElementById('<%= lblFnames.ClientID %>')).val(data.FirstName);
                 $(document.getElementById('<%= lblLnames.ClientID %>')).val(data.LastName);
                 $(document.getElementById('<%= lblacc.ClientID %>')).val(data.AccountNumber);
                 $(document.getElementById('<%= lblBals.ClientID %>')).val(data.Balance);
                 $(document.getElementById('<%= acctypes.ClientID %>')).val(data.TypeOfAccount);
                 //debugger;
                 switch (data.TypeOfAccount) {
                     case 0:
                         $(document.getElementById('<%= chkNCs.ClientID %>')).hide
                         $(document.getElementById('<%= chkODs.ClientID %>')).hide
                         $(document.getElementById('<%= chkRODs.ClientID %>')).hide
                         break;
                     case 4:
                         $(document.getElementById('<%= chkNCs.ClientID %>')).visible
                         $(document.getElementById('<%= chkODs.ClientID %>')).visible
                         $(document.getElementById('<%= chkRODs.ClientID %>')).visible
                         break;

                     default:

                 }
             });
         }
     });
    });

</script>
<div class="">
   <ul style="list-style-type:none;float:left;display: inline;margin:0;padding:0;">
      <li class="list"><asp:CheckBox runat="server" id="chkRODs" name="chkRODs"  Text="Repayment of OD" visible="false"/></li>
      <li class="list"><asp:CheckBox runat="server" id="chkODs" name="chkODs"  Text="Interest on Repayment" visible="false" /></li>
     <li class="list"><asp:CheckBox runat="server" id="chkNCs" name="chkNCs"  Text="Non-Cash Transaction" visible="false" /></li>
</ul>

Answer 1

这里给出的代码有几点需要注意：

1）因为您在ASPX控件上设置了“Visible = false”选项，这意味着复选框的标记永远不会呈现给页面 - 您可以通过在完成的页面上使用View Source并搜索来验证这一点它们。

2）它应该是.hide()而不是.hide - 没有()该方法实际上不会执行。你应该使用.show()作为反面而不是.visible - 这只是HTML对象的一个属性（所以你必须设置它），但它不存在于jQuery对象上，你正试图用它来反对。

3）所有这些都是在你的ajax“成功”功能的上下文中完成的。这意味着，每次运行ajax函数时，都会创建所有事件处理程序的另一个副本 - 这意味着如果运行ajax 3次，则每个表行将有3个“click”事件处理程序。这可能会令人困惑。您需要使用“off”删除以前的处理程序，或者在ajax方法之外声明处理程序。

最后，切换所有复选框的最简单，最简洁的方法是实际切换封闭的div - 这将隐藏其中的所有内容：

<强> HTML

<div id="options" style="display:none;">
   <ul style="list-style-type:none;float:left;display: inline;margin:0;padding:0;">
      <li class="list"><asp:CheckBox runat="server" id="chkRODs" name="chkRODs"  Text="Repayment of OD" /></li>
      <li class="list"><asp:CheckBox runat="server" id="chkODs" name="chkODs"  Text="Interest on Repayment" /></li>
     <li class="list"><asp:CheckBox runat="server" id="chkNCs" name="chkNCs"  Text="Non-Cash Transaction" /></li>
   </ul>
</div>

<强>脚本

$('#dtCustomers').on('click', 'tr', function () {
  var data = datatableVariable.row(this).data();
  //etc...until
  switch (data.TypeOfAccount) {
    case 0:
      $("#options").hide();
      break;
    case 4:
      $("#options").show();
      break;
    default:
  }
});

请参阅此处展示原则的简化但有效的示例：https://jsfiddle.net/5hyvwLqg/

使用Jquery切换复选框显示/隐藏

1 个答案: