ASP Gridview与Javascript的“全选”问题
我收到了一个旧的ASP.NET代码进行审查,并用最少的努力解决了问题。在检查代码时,我发现,它使用简单的ASP Gridview,然后使用JavaScript选择所有行。它还与Jquery数据表集成。下面是Gridview的代码-ASP Gridview与Javascript的“全选”问题,javascript,asp.net,gridview,Javascript,Asp.net,Gridview,我收到了一个旧的ASP.NET代码进行审查,并用最少的努力解决了问题。在检查代码时,我发现,它使用简单的ASP Gridview,然后使用JavaScript选择所有行。它还与Jquery数据表集成。下面是Gridview的代码- <asp:UpdatePanel ID="UpdatePanelgv" runat="server"> <ContentTemplate> <asp:GridView ID="gv1" runat="server"
<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、搜索、排序功能正常。如果我停留在第1页,单击全选复选框,它也可以正常工作
但当我转到任何其他页面(如第3页)并单击“全选”复选框时,问题就出现了。它正在将我恢复到第1页,并保持第3页上的选择完好无损。如果我再次返回第3页,我可以看到所有选中的行
我无法理解或修复为什么它总是在点击其他页面的全选复选框后切换到第1页。如何解决这个问题?这是由于UpdatePanel造成的吗?如果是,如何在不移除标签的情况下修复此问题
注意:只有当我单击“选择所有复选框而不是单个行”复选框时,才会发生这种情况。我发现了问题。这是由于jquery 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)
到
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)