在客户端实现DataGrid的全选

最新推荐文章于 2023-03-08 15:58:58 发布

yoyo83

最新推荐文章于 2023-03-08 15:58:58 发布

阅读量761

点赞数

分类专栏： ASP.NET 文章标签： datagrid webform asp javascript microsoft function

本文链接：https://blog.csdn.net/yoyo83/article/details/457175

版权

ASP.NET 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果如下：单击模版列表头checkbox,该列所有checkbox都选中或者都不选中。

前台代码：

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm4.aspx.vb" Inherits="AccessDataGrid.WebForm4"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <title>WebForm4</title>
  <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <script language="javascript">
  
  </script>
</HEAD>
<body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
   <table>
    <tr>
     <td>
      <asp:DataGrid Runat="server" ID="gridData" AutoGenerateColumns="False">
       <Columns>
        <asp:TemplateColumn>
         <HeaderTemplate>
          <input type="checkbox" id="chkSelectAll" name="chkSelectAll" οnclick="selectAll()">
         </HeaderTemplate>
         <ItemTemplate>
          <asp:CheckBox Runat="server" ID="chkSelect"></asp:CheckBox>
         </ItemTemplate>
        </asp:TemplateColumn>
        <asp:BoundColumn DataField="编号" HeaderText="编号"></asp:BoundColumn>
        <asp:BoundColumn DataField="水果名称" HeaderText="水果名称"></asp:BoundColumn>
        <asp:BoundColumn DataField="价格" HeaderText="价格"></asp:BoundColumn>
       </Columns>
      </asp:DataGrid>
     </td>
    </tr>
   </table>
  </form>
</body>
</HTML>

后台代码：

mports System.Data.SqlClient
Public Class WebForm4
Inherits System.Web.UI.Page
Private tb As DataTable = makeData()

#Region " Web 窗体设计器生成的代码 "

'该调用是 Web 窗体设计器所必需的。
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

End Sub
Protected WithEvents gridData As System.Web.UI.WebControls.DataGrid

    '注意: 以下占位符声明是 Web 窗体设计器所必需的。
    '不要删除或移动它。
    Private designerPlaceholderDeclaration As System.Object

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: 此方法调用是 Web 窗体设计器所必需的
        '不要使用代码编辑器修改它。
        InitializeComponent()
    End Sub

#End Region
    Private Function makeData() As DataTable
        Dim tb As New DataTable("mytable")
        tb.Columns.Add("编号", GetType(Integer))
        tb.Columns.Add("水果名称", GetType(String))
        tb.Columns.Add("价格", GetType(Single))

        Dim newrow1 As DataRow = tb.NewRow
        newrow1.Item("编号") = 1
        newrow1.Item("水果名称") = "苹果"
        newrow1.Item("价格") = 1.2
        tb.Rows.Add(newrow1)

        Dim newrow2 As DataRow = tb.NewRow
        newrow2.Item("编号") = 2
        newrow2.Item("水果名称") = "桃子"
        newrow2.Item("价格") = 2.4
        tb.Rows.Add(newrow2)

        Dim newrow3 As DataRow = tb.NewRow
        newrow3.Item("编号") = 3
        newrow3.Item("水果名称") = "西瓜"
        newrow3.Item("价格") = 0.8
        tb.Rows.Add(newrow3)

        Dim newrow4 As DataRow = tb.NewRow
        newrow4.Item("编号") = 4
        newrow4.Item("水果名称") = "芒果"
        newrow4.Item("价格") = 2.5
        tb.Rows.Add(newrow4)

Return tb

End Function

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        '在此处放置初始化页的用户代码
        If Not IsPostBack Then
            gridData.DataSource = tb
            gridData.DataBind()
        End If
    End Sub

End Class