带有复选框控件的 ASP.Net GridView 和 Jquery dataTable

Posted 2023-05-08

【中文标题】带有复选框控件的 ASP.Net GridView 和 Jquery dataTable

【英文标题】：ASP.Net GridView and Jquery dataTable with checkbox contol

【发布时间】：2018-07-19 11:50:39

【问题描述】：

我正在使用 asp.net gridview 和 jquery dataTable。我已经在 gridview 中实现了 jquery dataTable，如下所示：

                <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" class="table table-striped"
                    Width="100%">
                    <Columns>
<%--                        <asp:TemplateField>
                            <HeaderTemplate>
                                <asp:CheckBox ID="chkAll" runat="server"
                                    onclick="checkAll(this);" />
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox ID="chk" runat="server"
                                    onclick="Check_Click(this)" />
                            </ItemTemplate>
                        </asp:TemplateField>--%>
                        <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
                        <asp:BoundField DataField="ContactName" HeaderText="Name" />
                        <asp:BoundField DataField="Country" HeaderText="Country" />
                    </Columns>
                </asp:GridView>

我的java脚本是这样的：

<script type="text/javascript">
    $(function () 
        $('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable(
            "responsive": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
            null,
            null,
             "bSortable": false 
            ]
        );
    );
</script>

我想在侧网格视图中添加带有标题复选框的复选框以检查所有功能。 Jquery dataTable 不允许网格内的模板列。我需要检索复选框的值以进行删除。我还需要一个链接按钮来重定向到网格内的另一个页面。 任何帮助都将被接受。

编辑： 我已经编辑了我的 javascript 代码，例如：

$(function () 
            $('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable(
                columnDefs: [
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0,
                    responsive: true,
                    sPaginationType: 'full_numbers'
                ],
                aoColumns: [ "bSortable": false , null, null,  "bSortable": false ]
            );
        );

现在我得到以下输出：

在加载过程中，我收到类似“DataTables 警告：非表节点初始化 (INPUT)。有关此错误的更多信息，请参阅 http://datatables.net/tn/2”，但搜索、排序、分页正在运行。 有什么想法吗？

谢谢

帕萨

【问题讨论】：

“datatablr 不允许模板列”是什么意思？什么是错误？如果不需要，还可以从 gridview 中删除注释的 html

网格扭曲。每行都带有标题，并且没有显示搜索和分页选项。错误是“Uncaught TypeError: Cannot read property 'mData' of undefined at HTMLTableCellElement. (jquery.dataTables.min.js:90) at Function.each (jquery-1.10.2.min.js:21) at init.each (jquery-1.10.2.min.js:21) ------"

也许 Gyrocode 的 checkboxes plugin 会很有用。

【参考方案1】：

首先，您的Gridview 标记没有错，尽管格式不正确。我已经在我的机器上本地测试了您的代码并取消注释 TemplateField 代码，因为复选框列本质上就是您要查找的内容。

问题在于您的DataTable 调用。我使用了以下简单的选择器 #gvCustomers 而不是您所拥有的，并且它可以在没有您提到的错误的情况下工作。此外，值得确保您的 aoColumns 数组长度与您拥有的列数相匹配。最后，我觉得在定义DataTable 选项时不需要使用双引号。我们不处理 JSON，所以没有引号是可以的。希望这会有所帮助。

见下文：

$('#gvCustomers').DataTable(
            columnDefs: [
                orderable: false,
                className: 'select-checkbox',
                targets: 0,
                responsive: true,
                sPaginationType: 'full_numbers'
            ],
            aoColumns: [null, null,  bSortable: false , null],
            select: 
                style: 'os',
                selector: 'td:first-child'
            ,
            order: [[1, 'asc']]
        );

【讨论】：

感谢您的回复。 Checkbox 来了但是无法获取分页、排序和过滤选项。