Question

我正在研究.NET MVC项目中的列过滤器。我的要求是，在下拉控件中，所有表头列名都将与复选框绑定。默认情况下，选择所有选项。当我从下拉列表中取消选择它反映到表格数据的任何选项时，该列将不会显示。

我编写了一些代码，但无法实现复选框功能。请帮我。如果jquery插件可用，对我也有帮助。

代码

public static object GETSTATE_SAP(string SAP)
{
 object _location = MyDynamicObject();
try
        {

         _location.strState = Convert.ToString(dtSap.Rows[0][0]);
            _location.strSiteAdd = Convert.ToString(dtSap.Rows[0][0]);
            _location.strLatitude = Convert.ToString(dtSap.Rows[0][0]);
            _location.strLongtiude = Convert.ToString(dtSap.Rows[0][0]);
    }

    return _location;`

Answer 1

我认为您希望更轻松地进行多选：使用select2：

＆＃13;

$("#myOptions").select2({
  tags: true
}).change(function() {
  var test = $("#myOptions").val();
  $("td").show();
  for (var j = 0, len = test.length; j < len; j++) {
    $('td:nth-child(' + test[j] + ')').hide();
  }

});

＆＃13;

body{font-family:calibri;}
  table { padding: 0; border-collapse: collapse; }
  table thead td { background-color: #f2f2f2; font-weight:bold;}
  table td { border: 1px solid #d7d7d7; padding: 5px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<select id="myOptions" multiple="multiple" style="width:100%">
  <option value="1">Name</option>
  <option value="2">Address</option>
  <option value="3">City</option>
  <option value="4">Country</option>
</select>  
<table id="myTable" cellspacing="0" cellpadding="0">
  <thead>
    <tr class="headercell">
      <td>Name</td>
      <td>Address</td>
      <td>City</td>
      <td>Country</td>
    </tr>
  </thead>
  <tbody>
    <tr class="datacell">
      <td>Anand</td>
      <td>2404/71</td>
      <td>Mohali</td>
      <td>India</td>
    </tr>
    <tr class="datacell">
      <td>Nilesh</td>
      <td>236/10</td>
      <td>Chandigarh</td>
      <td>India</td>
    </tr>
    <tr class="datacell">
      <td>Rahul</td>
      <td>A 71 Radhepuri</td>
      <td>New Delhi</td>
      <td>India</td>
    </tr>
    <tr>
      <td>Pratius</td>
      <td>Trishna Apartment-740</td>
      <td>Hydrabad</td>
      <td>India</td>
    </tr>
  </tbody>
  </table>

＆＃13;

使用jquery在复选框选择上显示/隐藏列

1 个答案: