如何将 asp:CheckBoxList 的每个项目设置为分隔 bootstrap 数据表 ASP.NET 的行

Question

我的 .aspx 页面有一个 asp:CheckBoxList。我希望 asp:CheckBoxList 的每个项目作为 bootstrap 数据表的单独行。我的代码如下

<asp:table id="tblUserToRoleList">
   <thead>
      <tr>
       <th>
          Role List
        </th>
        <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
           <asp:CheckBoxList ID="chkRoleList" runat="server" Width="250px"></asp:CheckBoxList>
         </td>
         <td></td>
      </tr>
    </tbody>

输出是这样的

这里所有的项目都在一个 td of single tr

下

但我需要所有项目来分隔 tr，我可以从 bootstrap 数据表 的默认值中搜索项目搜索框

请帮帮我

Answer 1

<asp:CheckBoxList> 生成 HTML table.The 问题是此 table 没有定义 <th> 元素和 Bootstrap DataTable 要求存在这些标签。

解决方案？在调用DataTable()之前手动添加<th>标签;

<head runat="server"> <title></title> <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <script type="text/javascript"> $(function () { debugger; $("<thead><tr><th>Roles</th></tr><thead>").insertBefore("#chkRoleList tbody"); $('#chkRoleList').DataTable(); }); </script> </head> <body> <form id="form1" runat="server"> <asp:CheckBoxList ID="chkRoleList" runat="server" Width="250px"></asp:CheckBoxList> </form> </body>

输出：

如何将 asp:CheckBoxList 的每个项目设置为分隔 bootstrap 数据表 ASP.NET 的行

How to set each item of a asp:CheckBoxList to seperate row of a bootstrap datatable ASP.NET

asp.net

checkboxlist

twitter-bootstrap