欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

gridview实现服务器端和客户端全选的两种方法分享

程序员文章站 2024-02-25 08:10:58
复制代码 代码如下:<%@ page language="c#" autoeventwireup="true"%>

复制代码 代码如下:

<%@ page language="c#" autoeventwireup="true"%>

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<script runat="server">
  // 计算数据,完全可以从数据看取得
  icollection createdatasource()
  {
    system.data.datatable dt =new system.data.datatable();
    system.data.datarow dr;
    dt.columns.add(new system.data.datacolumn("序号", typeof(system.string)));
    dt.columns.add(new system.data.datacolumn("学生姓名", typeof(system.string)));
    dt.columns.add(new system.data.datacolumn("语文", typeof(system.decimal)));
    dt.columns.add(new system.data.datacolumn("数学", typeof(system.decimal)));
    dt.columns.add(new system.data.datacolumn("英语", typeof(system.decimal)));
    dt.columns.add(new system.data.datacolumn("计算机", typeof(system.decimal)));

    for (int i =0; i <8; i++)
    {
      system.random rd =new system.random(environment.tickcount * i); ;
      dr = dt.newrow();
      dr[0] = i.tostring();
      dr[1] ="【孟子】"+ i.tostring();
      dr[2] = system.math.round(rd.nextdouble() *100, 2);
      dr[3] = system.math.round(rd.nextdouble() *100, 2);
      dr[4] = system.math.round(rd.nextdouble() *100, 2);
      dr[5] = system.math.round(rd.nextdouble() *100, 2);
      dt.rows.add(dr);
    }
    system.data.dataview dv =new system.data.dataview(dt);
    return dv;
  }

  protected void page_load(object sender, eventargs e)
  {
    if (!ispostback)
    {

      gridview2.datasource = gridview1.datasource = createdatasource();
      gridview2.databind();
      gridview1.databind();
    }
  }

  protected void button1_click(object sender, eventargs e)
  {
    ret1.text ="";
    foreach (gridviewrow gvr in gridview1.rows)
    {
      checkbox ch = (checkbox)gvr.findcontrol("itemcheckbox");
      if (ch.checked)
      {
        ret1.text +="<li>gridview1 您选择的是(键值):"+ gridview1.datakeys[gvr.dataitemindex].value.tostring();
      }
    }
  }

  protected void button2_click(object sender, eventargs e)
  {
    ret2.text ="";
    foreach (gridviewrow gvr in gridview2.rows)
    {
      checkbox ch = (checkbox)gvr.findcontrol("itemcheckbox");
      if (ch.checked)
      {
        ret2.text +="<li>gridview2 您选择的是(键值):"+ gridview2.datakeys[gvr.dataitemindex].value.tostring();
      }
    }
  }

  protected void checkall(object sender, eventargs e)
  {
    checkbox cbx = (checkbox)sender;
    foreach (gridviewrow gvr in gridview1.rows)
    {
      checkbox ch = (checkbox)gvr.findcontrol("itemcheckbox");
      ch.checked = cbx.checked;
    }
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>gridview 实现服务器端和客户端全选的两种方法</title>

  <script type="text/javascript">
  //<![cdata[
  function checkall(ocheckbox)
  {
   var gridview2 = document.getelementbyid("<%=gridview2.clientid %>");
   for(i =1;i < gridview2.rows.length; i++)
   {
    gridview2.rows[i].cells[0].getelementsbytagname("input")[0].checked = ocheckbox.checked;
   }
  }

  //]]>
  </script>

</head>
<body>
  <form id="form1" runat="server">
    <table style="width:800px;font-size:12px;">
      <tr valign="top">
        <td>
          <asp:gridview id="gridview1" runat="server" font-size="12px" backcolor="#ffffff"
            gridlines="both" cellpadding="4" datakeynames="序号" autogeneratecolumns="false">
            <headerstyle backcolor="#ededed" height="26px"/>
            <columns>
              <asp:templatefield>
                <headertemplate>
                  <asp:checkbox id="checkbox1" runat="server" text="全选" autopostback="true" oncheckedchanged="checkall"/>
                </headertemplate>
                <itemtemplate>
                  <asp:checkbox id="itemcheckbox" runat="server"/>
                </itemtemplate>
              </asp:templatefield>
              <asp:boundfield datafield="学生姓名" headertext="学生姓名"/>
              <asp:boundfield datafield="语文" headertext="语文"/>
              <asp:boundfield datafield="数学" headertext="数学"/>
              <asp:boundfield datafield="英语" headertext="英语"/>
              <asp:boundfield datafield="计算机" headertext="计算机"/>
            </columns>
          </asp:gridview>
          <asp:button id="button1" runat="server" onclick="button1_click" text="得到选择的行值"/>
        </td>
        <td align="right">
          <asp:gridview id="gridview2" runat="server" font-size="12px" backcolor="#ffffff"
            gridlines="both" cellpadding="4" datakeynames="序号" autogeneratecolumns="false">
            <headerstyle backcolor="#ededed" height="26px"/>
            <columns>
              <asp:templatefield>
                <headertemplate>
                  <input id="checkbox2" type="checkbox" onclick="checkall(this)" runat="server"/><label>全选</label>
                </headertemplate>
                <itemtemplate>
                  <asp:checkbox id="itemcheckbox" runat="server"/>
                </itemtemplate>
              </asp:templatefield>
              <asp:boundfield datafield="学生姓名" headertext="学生姓名"/>
              <asp:boundfield datafield="语文" headertext="语文"/>
              <asp:boundfield datafield="数学" headertext="数学"/>
              <asp:boundfield datafield="英语" headertext="英语"/>
              <asp:boundfield datafield="计算机" headertext="计算机"/>
            </columns>
          </asp:gridview>
          <asp:button id="button2" runat="server" onclick="button2_click" text="得到选择的行值"/>
        </td>
      </tr>
      <tr valign="top">
        <td>
          <asp:literal id="ret1" runat="server"></asp:literal>
        </td>
        <td align="right">
          <asp:literal id="ret2" runat="server"></asp:literal>
        </td>
      </tr>
    </table>
  </form>
</body>
</html>