当前位置： 移动技术网 > IT编程>开发语言>.net > gridview实现服务器端和客户端全选的两种方法分享

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

张艺源王者归来,甘南县教师进修学校,re...japanesque

复制代码 代码如下:

<%@ 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>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网