`
sony-soft
  • 浏览: 1105115 次
文章分类
社区版块
存档分类
最新评论

DataGrid 的 全选/取消全选 控制(CheckBox)

 
阅读更多

DataGrid控件:

  <Columns>
<asp:TemplateColumn>
<HeaderStyle Width="10px"></HeaderStyle>
<HeaderTemplate>
<INPUT id="CheckAll" name="CheckAll" type="checkbox" onclick="ChooseAll()">
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="CheckBox1" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="序号">
<HeaderStyle Wrap="False"></HeaderStyle>
<ItemTemplate>
<asp:Label runat="server" ID="labNO"></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>

JavaScript函数:

  var checkFlag = true;
    function ChooseAll()
    {
      //if( !document.all("CheckAll").Checked ) // 全选 
      if( checkFlag ) // 全选 
      {
        var inputs = document.all.tags("INPUT");
        for (var i=0; i < inputs.length; i++) // 遍历页面上所有的 input
        {
          if (inputs[i].type == "checkbox" && inputs[i].id != "CheckAll" )
          {
            inputs[i].checked = true;
          }
        }
        checkFlag = false;
      }
      else // 取消全选
      {
        var inputs = document.all.tags("INPUT");
        for (var i=0; i < inputs.length; i++) // 遍历页面上所有的 input
        {
          if (inputs[i].type == "checkbox" && inputs[i].id != "CheckAll" )
          {
            inputs[i].checked = false;
          }
        }
        checkFlag = true;
      }
    }

    // <summary>
    // 让用户加以确认删除数据。
    // </summary>
    function DelRec()
    {
      var inputs = document.all.tags("input");
      var selectedLen = 0;
      for( var i=0;i < inputs.length; i ++)
      {
        if(inputs[i].type == "checkbox")
        {
          if( inputs[i].checked )
          {
            if(inputs[i].id != "CheckAll")
            {
              selectedLen ++;
            }
          }
        }
      }
      if( selectedLen == 0 )
      {
        alert("请先选择您要删除的数据!");
      }
      else
      {
        var flag = confirm("您确定要删除所选择的这 " + selectedLen + " 条数据吗?");
        if(flag)
        {
          document.all("BtnDelRecord").click();
        }
      }
    }

分享到:
评论

相关推荐

    flex datagrid checkbox 全选/反选

    ### Flex DataGrid Checkbox 全选/反选知识点详解 #### 一、概述 Flex DataGrid 控件是Adobe Flex框架中的一个重要组成部分,它提供了一个灵活的方式来展示数据列表,并且支持多种功能,如排序、分组、筛选等。在...

    在DataGrid中进行复选框的操作(全选和取消)

    2. 编写后台代码,处理全选/取消全选的事件,并同步复选框状态。 3. 实现`SelectionChanged`、`Checked`和`Unchecked`事件,确保数据源与界面状态一致。 通过以上步骤,你可以在`DataGrid`中实现复选框的全选和取消...

    flex在DataGrid中实现checkbox全选或取消

    2. 添加一个CheckBox组件,作为全选/取消全选的控制。 3. 实现CheckBox的change事件监听,调用数据模型的全选/取消全选方法。 4. 配置DataGrid列,使其显示复选框,并与数据模型中的“selected”字段绑定。 5. 可能...

    DataGrid全选并获取选中条目数

    现在,你已经具备了实现DataGrid全选功能和获取选中条目数的能力。这个功能对于用户交互和数据操作提供了很大的便利。在实际项目中,你可以根据需求进行适当的优化,例如添加异步处理或错误处理机制。同时,注意在...

    在DataGrid中使用CheckBox,实现全选功能

    例如,在MVVM中,ViewModel可以有一个`IsAllSelected`属性,绑定到全选CheckBox,并且有一个方法来更新所有数据项的IsSelected状态: ```csharp public bool IsAllSelected { get { return _isAllSelected; } set...

    WPF DATAGRID全选全不选

    **WPF DATAGRID全选全不选**是Windows Presentation Foundation (WPF)框架中一个常见的功能需求,特别是在数据展示和操作的场景下。在WPF的DataGrid控件中,用户可能希望实现一键全选或一键全不选所有显示的数据行。...

    flex Datagrid checkbox全选

    这样,整个Datagrid的checkbox就可以实现全选或全取消的效果。 为了实际应用这个功能,你需要将这些自定义类集成到你的项目中,为Datagrid的相应列指定`CheckBoxHeaderColumn`类,并配置好表头和行的渲染器。在Flex...

    winform DataGridView表头带CheckBox全选

    在这个特定的场景中,我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`,以便实现全选和全不选的功能。这将大大提升用户体验,使得用户可以快速地对所有行进行操作,如批量删除、更新等。 首先,我们需要...

    DataGridView标头CheckBox全选反选

    要实现在列头添加`CheckBox`并控制全选/反选的功能,我们需要遵循以下步骤: 1. **创建自定义列头**: 首先,我们需要创建一个自定义的`DataGridViewColumn`,继承自`DataGridViewTextBoxColumn`,并在其中添加`...

    Flex dataGrid 全选、反选

    本文将详细讨论如何在Flex DataGrid中实现全选和反选功能,并结合`checkBox`来优化这一过程。 首先,我们要理解DataGrid的结构。DataGrid由多个列组成,每一列可能包含不同类型的控件,如文本、图像或复选框。在...

    Flex DataGrid CheckBox 一个简单的全选

    反之,当全选CheckBox取消选中时,将所有行的CheckBox设为未选中。这需要对DataGrid的itemRenderer进行自定义,以便在其中添加全选逻辑。 五、快速获取选中的值 为了获取选中行的数据,我们需要监听DataGrid的...

    WPF在dataGrid中添加CheckBox支持单选,多选,全选功能

    项目中用到DataGrid, 需要在第一列添加checkbox, 可以多选、全选。 其中涉及的概念DataTemplate, DataGridCellStyle, DataGridCellControlTemplate,Binding, OnPropertyChanged等。

    Flex Datagrid全选功能

    "Flex Datagrid全选功能"是指在Datagrid中实现一个功能,让用户能够一键选择所有行,这在处理大量数据时非常有用。下面我们将详细探讨如何在Flex中实现Datagrid的全选功能。 1. **Datagrid组件**: Datagrid是Adobe ...

    WPF-DataGrid中CheckBox实现全选与非全选

    然而,这只是实现了全选和全不选的基础功能,我们还需要处理数据绑定时的双向同步问题,确保当用户在DataGrid行中手动改变CheckBox状态时,也能影响到全选CheckBox。这需要在DataGrid的Loaded事件中添加代码,以及在...

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助...

    WPF CheckBox全选、反选比较通用

    同时,我们还需要确保当用户更改列表中的任何单个CheckBox时,全选CheckBox的状态也会自动更新。这可以通过使用ICollectionView和ICollectionViewLiveShaping实现。ICollectionView提供了一个Filter方法,可以用来...

    DataGrid和AdvancedDataGrid CheckBox全选功能

    另一个部分是每个数据行中的CheckBox,它们的选中状态应与全选CheckBox保持同步。以下是如何实现这个功能的关键步骤: 1. **创建CheckBox**: 首先,你需要在`DataGrid`或`AdvancedDataGrid`的头部分添加一个...

    三种方式实现checkbox全选,反选

    以下是三种实现Checkbox全选和反选的方法,以及它们的JavaScript和Java实现细节。 ### 方法一:使用`checked`属性 **JavaScript实现**: 在JavaScript中,可以通过获取全选按钮的`checked`属性来控制所有复选框的...

    VB.NET为DataGridView添加CheckBox实现全选全不选复选框

    Datagridview控件没有全选或取消全选的复选框,本资源用VB2015通过扩展DataGridViewColumnHeaderCell类,在列头绘制一个复选框checkbox控件,通过定义checkbox鼠标单击事件来实现行的全选或取消全选。checkbox还可以...

Global site tag (gtag.js) - Google Analytics