zoukankan      html  css  js  c++  java
  • GridView全选和反选用JQuery实现(转)

    <asp:GridView ID="grid" runat="server" AutoGenerateColumns="false" GridLines="Horizontal"
    OnPreRender
    ="grid_PreRender">
    <Columns>
    <asp:TemplateField>
    <HeaderTemplate>
    <input type="checkbox" id="chkAll" />
    </HeaderTemplate>
    <ItemTemplate>
    <input type="checkbox" id="chkItem" code='<%# Eval("Code") %>' />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="Code" HeaderText="Code" HtmlEncode="true" />
    <asp:BoundField DataField="Name" HeaderText="Name" HtmlEncode="true" />
    <asp:BoundField DataField="Age" HeaderText="Age" HtmlEncode="true" />
    <asp:BoundField DataField="Address" HeaderText="Address" HtmlEncode="true" />
    </Columns>
    </asp:GridView>
    //全选/反选
    $("#chkAll").click(function () {
    $('#<%=grid.ClientID %> > tbody > tr > td > input:checkbox').attr("checked", this.checked);
    });

    //若所有tbody中的项都选中了,自动将表头中的chkAll选中.
    $("#<%=grid.ClientID %> > tbody > tr > td > input:checkbox").click(function () {
    //获取所有选中的checkbox元素
    var expression1 = $("#<%=grid.ClientID %> > tbody > tr > td > input:checkbox:checked");
    //获取所有checkbox元素
    var expression2 = $("#<%=grid.ClientID %> > tbody > tr > td > input:checkbox");
    var hasChecked = $(expression1).length == $(expression2).length;
    $("#chkAll").attr("checked", hasChecked);
    });

    //获取表格中选中的值
    $("#btnGetByGridCheckedElement").click(function () {
    var selectedCodes = new Array();
    var checkedItems = $("#<%=grid.ClientID %> > tbody > tr > td > input:checkbox:checked[@name$='chkItem']");
    $.each(checkedItems, function () {
    selectedCodes.push(this.code);
    });
    if (0 == selectedCodes.length) {
    alert("没有选中任何项..");
    return;
    }
    alert(selectedCodes.join(","));
    });



  • 相关阅读:
    freemarker时间转换197
    用FileZilla服务器端和客户端实现本机与虚拟机之间文件上传和下载197
    springboot pom 详解197
    eclipse svn197
    eclipse 安装git197
    listen()函数中backlog参数分析
    linux 函数库使用
    gdb调试问题汇总
    gdb调试多线程
    linux-C 多线程编程
  • 原文地址:https://www.cnblogs.com/shenyixin/p/2298413.html
Copyright © 2011-2022 走看看