在客户端实现DataGrid的全选

最新推荐文章于 2023-03-08 15:58:58 发布
最新推荐文章于 2023-03-08 15:58:58 发布
阅读量750 收藏
点赞数
分类专栏： ASP.NET 文章标签： datagrid webform asp javascript microsoft function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yoyo83/article/details/457175
版权

         效果如下：单击模版列表头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">
  <!--
      function selectAll()
      {
          for(var i=0;i<document.all.length;i++)
          {
             var e=document.all[i];
             if(e.id != "chkSelectAll")
                e.checked=document.all.chkSelectAll.checked;
          }
      }
  //-->
  </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

yoyo83
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vb.net给DataGridView添加全选功能
Emily_1021的博客
01-18 1130
 Private Sub AddSelectAllCheckBox(ByVal dgv As DataGridView)         Dim cbx As New CheckBox         cbx.Name = "SelectAll"         cbx.Size = New Size(14, 14)         Dim rect As Rectangle         r...
VB.NET为DataGridView添加CheckBox实现全选全不选复选框
12-27
Datagridview控件没有全选或取消全选的复选框，本资源用VB2015通过扩展DataGridViewColumnHeaderCell类，在列头绘制一个复选框checkbox控件，通过定义checkbox鼠标单击事件来实现行的全选或取消全选。checkbox还可以实现中间态，效果非常好！
javascript 实现 DataGrid中复选框的全选
weixin_30420305的博客
08-10 107
1.添加datagrid或者2005的GridView 2.添加一个数据绑定列ID 3.添加模板列，HeaderTemplate中放一个html的checkbox控件，命名cbx_selAll; ItemTemplate中放一个html的checkbox控件，命名cbx_sel，runat=server；（这里之所以runat=server是因为在后台代码中要findcontrol。 ...
JS实现DataGrid的全选
Java_c#
06-12 888
时间开始范围： 时间结束范
vue2.0在table中实现全选和反选的示例代码
08-28
主要介绍了vue2.0在table中实现全选和反选的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
silverlight实现datagrid全选、反选、分页、导出EXCEL
05-14
在本文中，我们将深入探讨如何使用Silverlight技术来实现数据网格(DataGrid)的全选、反选、分页以及导出到Excel的功能。Silverlight是一种由微软开发的富客户端技术，用于创建丰富的交互式Web应用程序。 ### ...
Flex导出Excel之as3xls(包括datagrid全选功能)
04-02
"datagrid全选功能"意味着在DataGrid中提供了全选所有行的选项，这通常是通过单击表头或者设置特定的复选框来实现的。全选功能可以配合导出功能，一次性将DataGrid中的所有数据保存到Excel文件中。 在实现这个功能...
js操作CheckBoxList实现全选/反选(在客服端完成)
12-10
对于CheckBoxList控件来说，一方面要实现大量数据在服务器端的绑定工作，另一方面往往要求实现全选、反选等功能。虽然可以在服务器端完成这方面的工作，但这样一个简单的工作似乎更应该在客户端完成。 具体方法： 在...
Flex 全选效果 批量删除
12-11
在实现这一功能时，需要注意的是要确保与服务器的数据同步。如果数据是在服务器上存储，那么在本地删除条目后，还需要发送一个请求到服务器，同步这些变更。这就涉及到客户端和服务端的通信，可以使用Flex的...
模仿EXT效果的datagrid
01-06
EXT是一个流行的JavaScript库，特别在创建富客户端应用时被广泛使用。EXT提供的DataGrid组件是其核心特性之一，它能够展示大量数据，并提供强大的分页、排序、过滤和编辑功能。在没有EXT库的情况下，我们可以使用...
扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）
webabcd的专栏
01-08 690
GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。[索引页][源码下载]扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）作者：webabcd/*正式版的实现 开始*/介绍扩展GridView控件：联动复选框（复选框的全选和取消全选）。选中指定的父复选框，则设置指定的
上接扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）
weixin_33795833的博客
01-08 70
上接>> 7、声明几个私有变量 /// <summary> /// 用于存每组的全选复选框ID /// </summary> private string _checkAllIDString; //...
Dev GridControl 控件在C# Winfrm窗体界面下创建选择框，实现全选、取消全选，反选
努力工作是为了更美好的生活，平凡的生活不应充斥着繁琐的工作！
05-19 1333
前言：小编这块GridControl控件绑定的数据源是 DataTable，所以，就拿DataTable来演示功能！ 一、创建选择列。 //1.添加复选框 dt.Columns.Add("选择", typeof(bool)); //2.设置复选框位置 dt.Columns["选择"].SetOrdinal(0); int j = 0; //3.复选框赋予初始值
在asp.net 的webform中使用jquery进行对gridview中的checkbox进行全选和反全选的操作。...
weixin_30580943的博客
07-07 164
很久没有写技术博客了，今天抽闲分享一下一点感受。先简单说说下述代码的由来：我在项目中使用bootstrap 的 metronic框架导致使用jquery设定checkbox的选中和不选中时，checkbox选择状态值(true/false)改变但页面中展现的状态并不改变。为解决此问题，度娘和GG都用上了，也做了不少Demo，最后确定产生问题的原因是metronic框架中的脚本缺陷(至少我是这样认为...
WinForm应用实战开发指南 - 教你如何实现表头的全选操作？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
10-31 359
本文将为大家介绍在进行WinForm应用开发时，如何实现表头全部勾选的这个操作，欢迎下载相关推荐组件来美化应用程序界面。
今天解决了DataGrid无刷新全选删除问题。
diedangxiang4092的博客
10-12 70
<%@PageLanguage="vb"AutoEventWireup="false"Codebehind="WebForm2.aspx.vb"Inherits="WebApplication1grid.WebForm2"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">&...
datagridview 表头添加全选/全不选 选择框
UruseiBest 的技术专栏
07-11 4570
实现 datagridview 表头添加全选/全不选 选择框，而且当勾选改行复选框后选中该行，实现选中多行。 1、由于虽然列可以设置为DataGridViewCheckBoxColumn，但是表头是没有checkbox的。那么可以将checkbox控件放置在表头位置。 2、由于点击某行后选中该行，会导致其它行不被选中。那么可以通过修改背景色和前景色来模拟选中。 实现效果： 具体代码如下： 定义窗体级变量： Dim chk As CheckBox 添加测试数据的代码： Pri
datagrid全选
一只很酸de橘子
03-08 565
easyui datagrid全选
wpf datagrid全选
最新发布
07-02
### 回答1： 在WPF中，可以通过以下方式实现DataGrid的全选功能： 1. 首先，需要在XAML文件中创建一个CheckBox来表示全选功能。例如，可以在DataGrid的上方添加一个CheckBox控件，并设置一个命名，如"全选CheckBox"。 2. 接下来，在代码文件中，可以使用DataGrid的SelectionChanged事件来处理全选功能。在事件处理程序中，可以获取到全选CheckBox的状态，然后根据其状态来改变DataGrid中的所有行的选中状态。 3. 在SelectionChanged事件处理程序中，可以使用VisualTreeHelper来遍历DataGrid中的所有行，并根据全选CheckBox的状态改变每一行的选中状态。具体步骤如下： a. 首先，使用VisualTreeHelper.GetChildrenCount方法获取DataGrid中的所有子元素的数量。 b. 然后，使用VisualTreeHelper.GetChild方法来获取每个子元素。 c. 判断获取到的子元素是否为DataGridRow，如果是，则可以使用DataGrid的SelectedItems属性来判断其选中状态并进行更新。 4. 最后，需要在全选CheckBox的Checked和Unchecked事件中调用全选功能的实现代码。例如，可以在Checked事件中将所有行都选中，而在Unchecked事件中将所有行都取消选中。 综上所述，以上是使用WPF实现DataGrid全选功能的基本步骤。按照这种方法，可以实现DataGrid的全选功能，并根据全选CheckBox的状态来改变每一行的选中状态。可以将以上代码嵌入到WPF项目中相应的位置并且根据个人需求进行调整。 ### 回答2： 在WPF的DataGrid中实现全选的方法如下所示： 1. 首先，我们需要在DataGrid控件中添加一个全选的复选框列。可以使用DataGridTemplateColumn来创建一个模板列，其中包含一个CheckBox控件。 2. 在XAML代码中，我们可以添加以下的代码片段： ```xaml <DataGrid x:Name="myDataGrid"> <DataGrid.Columns> <DataGridTemplateColumn> <DataGridTemplateColumn.Header> <CheckBox x:Name="chkSelectAll" Content="全选" Checked="chkSelectAll_Checked" Unchecked="chkSelectAll_Unchecked"/> </DataGridTemplateColumn.Header> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <!-- 其他列 --> </DataGrid.Columns> </DataGrid> ``` 3. 在代码后台的.cs文件中，我们可以添加以下代码： ```csharp private void chkSelectAll_Checked(object sender, RoutedEventArgs e) { foreach (var item in myDataGrid.ItemsSource) { // 获取数据项中名为"IsSelected"的属性，并将其设置为true PropertyInfo propertyInfo = item.GetType().GetProperty("IsSelected"); propertyInfo.SetValue(item, true); } } private void chkSelectAll_Unchecked(object sender, RoutedEventArgs e) { foreach (var item in myDataGrid.ItemsSource) { PropertyInfo propertyInfo = item.GetType().GetProperty("IsSelected"); propertyInfo.SetValue(item, false); } } ``` 在这个示例中，我们通过遍历DataGrid中的每个数据项，使用反射来获取名为"IsSelected"的属性，并将其设置为true或false来实现全选或取消全选的功能。 请注意，上述示例假设数据项中有一个名为"IsSelected"的布尔属性来表示每一行是否被选中。您可以根据自己的需求调整代码。 ### 回答3： 要实现 WPF DataGrid 的全选功能，可以按照以下步骤进行操作： 1. 在 XAML 文件中，创建一个 DataGrid 控件，并指定其 Name 属性，以便在后面的代码中引用它。 ```xml <DataGrid x:Name="myDataGrid"> <!-- DataGrid 的列定义 --> </DataGrid> ``` 2. 在代码文件中，定义一个集合来存储 DataGrid 的数据源，并将其绑定到 DataGrid 控件。 ```csharp public ObservableCollection<MyDataModel> MyDataCollection { get; set; } myDataGrid.ItemsSource = MyDataCollection; ``` 3. 添加一个复选框作为全选按钮，并为其添加一个点击事件处理程序。 ```xml <CheckBox x:Name="selectAllCheckBox" Click="SelectAllCheckBox_Click" Content="全选" /> ``` 4. 在点击事件处理程序中，通过遍历 DataGrid 的行，选中或取消选中每一行的复选框。 ```csharp private void SelectAllCheckBox_Click(object sender, RoutedEventArgs e) { CheckBox checkBox = (CheckBox)sender; bool isChecked = checkBox.IsChecked ?? false; foreach (var item in MyDataCollection) { item.IsSelected = isChecked; } } ``` 5. 在 DataGrid 的列定义中，添加一个模板列，其中包含一个复选框，用于选中或取消选中每一行。 ```xml <DataGrid.Columns> <!-- 其他列定义 --> <DataGridTemplateColumn> <DataGridTemplateColumn.HeaderTemplate> <DataTemplate> <!-- 全选按钮的复选框 --> <CheckBox Click="SelectAllCheckBox_Click" IsChecked="{Binding ElementName=selectAllCheckBox, Path=IsChecked, Mode=TwoWay}" /> </DataTemplate> </DataGridTemplateColumn.HeaderTemplate> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <!-- 行的复选框 --> <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> ``` 通过以上步骤，你可以在 WPF DataGrid 中实现全选功能。点击全选复选框时，所有行的复选框会被选中或取消选中，然后可以通过访问数据源的 IsSelected 属性来获取被选中的行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值