ASP Gridview "Select All" Javascript 问题

Question

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

在此处加载页面时，他们如何集成数据表 -

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、搜索、排序等基本功能正常运行。如果我停留在 PAGE-1，点击 "Select All" 复选框，它也工作正常。

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

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

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

Answer 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)

ASP Gridview "Select All" Javascript 问题

ASP Gridview "Select All" issue with Javascript

javascript

asp.net

gridview