Javascript 的 ASP Gridview“全选”问题答案

【问题标题】：ASP Gridview "Select All" issue with JavascriptJavascript 的 ASP Gridview“全选”问题
【发布时间】：2020-05-25 21:31:15
【问题描述】：

我收到了一个旧的 ASP.NET 代码，用于审查并以最小的努力解决问题。在检查代码时，我发现它使用简单的 ASP Gridview，然后使用 JavaScript 选择所有行。它还与 Jquery Datatable 集成。这是 Gridview 的代码 -

<asp:UpdatePanel ID="UpdatePanelgv" runat="server">
    <ContentTemplate>
        <asp:GridView ID="gv1" runat="server" UseAccessibleHeader="true" AutoGenerateColumns="False"
        DataKeyNames="ID,NAME,SALARY" Height="125px" Width="100%" OnPreRender="gv1_PreRender">
            <Columns>
                <asp:TemplateField ControlStyle-Width="30px">
                    <HeaderTemplate>
                        <asp:CheckBox ID="allchk" runat="server" onclick="javascript:toggle(this);" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="selectchk" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
                <asp:BoundField DataField="NAME" HeaderText="NAME" SortExpression="NAME" />
                <asp:BoundField DataField="SALARY" HeaderText="SALARY" SortExpression="SALARY" ControlStyle-Width="125" />
            </Columns>
                <EmptyDataTemplate>
                    <label style="font-weight: bold; text-align: center">
                        No Records Available
                </EmptyDataTemplate>
                <EmptyDataRowStyle HorizontalAlign="Center" />
        </asp:GridView>
</asp:UpdatePanel>

这里是切换选择的 Javascript -

<script type="text/javascript">
        function toggle(source) {
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i] != source)
                    checkboxes[i].checked = source.checked;
            }
        }
</script>

在页面加载时他们如何集成 Datatable -

ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "", "<script type='text/javascript'>$(document).ready(function () { $('#gv1').dataTable({autowidth: false}).yadcf([{ column_number: 1 },{ column_number: 2 },{ column_number: 3 }]);});<" + "/script>", False)

基本功能包括分页、数据表、yadcf、搜索、排序功能正常。如果我停留在第 1 页，单击“全选”复选框，它也可以正常工作。

但是当我转到任何其他页面（例如分页 3）时，会出现问题，单击“全选”复选框。它使我恢复到 PAGE-1，在 PAGE-3 上保持选择不变。如果我再次返回 PAGE-3，我可以看到所有被选中的行。

我无法理解或修复为什么在单击其他 PAGE 的“全选”复选框后它总是切换到 PAGE-1。如何解决这个问题？这是由于 UpdatePanel 造成的吗？如果是，如何在不删除该标签的情况下解决此问题？

注意：仅当我单击“全选”复选框而不是单个行复选框时才会发生这种情况。

【问题讨论】：

标签： javascript asp.net gridview

【解决方案1】：

我发现了问题。这是由于 jquery 数据表的第一列的默认排序属性而发生的。我已经通过修改这个来改变数据表的初始化 -

ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "", "<script type='text/javascript'>$(document).ready(function () { $('#gv1').dataTable({autowidth: false}).yadcf([{ column_number: 1 },{ column_number: 2 },{ column_number: 3 }]);});<" + "/script>", False)

到

ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "", "<script type='text/javascript'>$(document).ready(function () { $('#gv1').dataTable({autowidth: false, order: [], aoColumnDefs: [{ 'bSortable': false, 'aTargets': [0] }]}).yadcf([{ column_number: 1 },{ column_number: 2 },{ column_number: 3 }]);});<" + "/script>", False)

【讨论】：