应无所住,而生其心
排名
1
文章
860
粉丝
112
评论
163
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

WPF DataGrid表头Checkbox 全选与全反选

10086人阅读 2017/2/9 16:10 总访问:5194486 评论:0 收藏:0 手机
分类: C++


    WPF 在使用DataGrid展示数据的时候经常会使用到checkbox列,特别是id列

    例如下面这种效果:

WPF 要实现DataGrid checkbox全选与全反选,方法有几种



  方法一:使用DataGridTemplateColumn自定义模板

  先用模板把前台布局好  

  1.    <DataGridTemplateColumn Header="选择" >
  2.                     
  3.                     <DataGridTemplateColumn.HeaderTemplate>
  4.                         <DataTemplate>
  5.                             <CheckBox Click="CheckBox_Click_3" ></CheckBox>
  6.                         </DataTemplate>
  7.                     </DataGridTemplateColumn.HeaderTemplate>
  8.                     
  9.                     
  10.                     <DataGridTemplateColumn.CellTemplate>
  11.                         
  12.                         <DataTemplate>
  13.                             <CheckBox VerticalAlignment="Center" Loaded="CheckBox_Loaded_1"  Tag="{Binding Id}" Click="CheckBox_Click_1" HorizontalAlignment="Center"></CheckBox>
  14.                         </DataTemplate>
  15.                     </DataGridTemplateColumn.CellTemplate>
  16.                                    
  17.                 </DataGridTemplateColumn>


 用模板的方式虽然灵活,但是不好获取到里边的控件,比如这里的checkbox

直接获取是不行的   

  1.        private void CheckBox_Click_3(object sender, RoutedEventArgs e)
  2.         {
  3.             CheckBox headercb = (CheckBox)sender;
  4.  
  5.             for (int i = 0; i < mydg.Items.Count; i++)
  6.             {
  7.                 //获取行
  8.                 DataGridRow neddrow = (DataGridRow)mydg.ItemContainerGenerator.ContainerFromIndex(i);
  9.  
  10.                 //获取该行的某列
  11.                 CheckBox cb = (CheckBox)mydg.Columns[0].GetCellContent(neddrow);
  12.  
  13.                 cb.IsChecked = headercb.IsChecked;
  14.             }
  15.         }

因为不是直接用的DataGridCheckBoxColumn,获取到的不是直接的checkbox

 如果要获取可以使用树递归来获取   

  1.     //获取并选中DependencyObject中的CheckBox
  2.         public void GetVisualChild(DependencyObject parent)
  3.         {
  4.             int numVisuals = VisualTreeHelper.GetChildrenCount(parent);
  5.             for (int i = 0; i < numVisuals; i++)
  6.             {
  7.                 DependencyObject v = (DependencyObject)VisualTreeHelper.GetChild(parent, i);
  8.                 CheckBox child = v as CheckBox;
  9.  
  10.                 if (child == null)
  11.                 {
  12.                     GetVisualChild(v);
  13.                 }
  14.                 else
  15.                 {
  16.                    child.IsChecked = true;
  17.                    return ;
  18.                 }
  19.             }
  20.         }

调用:

  1.    private void CheckBox_Click_3(object sender, RoutedEventArgs e)
  2.         {
  3.             GetVisualChild(mydg);
  4.         }

 但是直接这样他是把所有的checkbox都选中了的,包括其他列的,而且由于遍历datagrid所有的行列,效率很低

我们可以找到需要的列在调用该方法  ,  就可以不用遍历整个datagrid了,而且可以一次找到

  1.      private void CheckBox_Click_3(object sender, RoutedEventArgs e)
  2.         {
  3.             for (int i = 0; i < mydg.Items.Count; i++)
  4.             {
  5.                 //获取行
  6.                 DataGridRow neddrow = (DataGridRow)mydg.ItemContainerGenerator.ContainerFromIndex(i);
  7.  
  8.                 //获取该行的某列
  9.                 var cb = mydg.Columns[0].GetCellContent(neddrow);
  10.  
  11.                 //获取到需要的列之后在去获取需要的控件
  12.                 GetVisualChild(cb);
  13.             }
  14.         }



方法二:在控件的加载事件里边把控件缓存下来再用

  1.  List<CheckBox> headerChecks = new List<CheckBox>();
  2.  
  3.  
  4.         /// <summary>
  5.         /// 由于不是太好获取就把控件先放到内存中缓存下来
  6.         /// </summary>
  7.         /// <param name="sender"></param>
  8.         /// <param name="e"></param>
  9.         private void CheckBox_Loaded_1(object sender, RoutedEventArgs e)
  10.         {
  11.             CheckBox cbtemp = (CheckBox)sender;
  12.  
  13.             headerChecks.Add(cbtemp);
  14.         }

然后使用就非常方便了,比如如果要全选的话,一句话就搞定了

  1.   private void CheckBox_Click_3(object sender, RoutedEventArgs e)
  2.         {
  3.             headerChecks.ForEach(a=>a.IsChecked=true);
  4.         }


 方法三:使用DataGridCheckBoxColumn


  使用DataGridCheckBoxColumn只需要获取到第1列的内容就可以直接转化成chekbox了,然后操作就行了 

  前台:

  1. <DataGridCheckBoxColumn >
  2.                     <DataGridCheckBoxColumn.HeaderTemplate >
  3.                         <DataTemplate>
  4.                             <CheckBox Click="CheckBox_Click_2" HorizontalAlignment="Center" VerticalAlignment="Center" Tag="{Binding Id}"></CheckBox>
  5.                         </DataTemplate>
  6.                     </DataGridCheckBoxColumn.HeaderTemplate>
  7.  
  8.                     <DataGridCheckBoxColumn.CellStyle >
  9.                         <Style  >
  10.                             <Setter Property="CheckBox.VerticalAlignment"  Value="Center"></Setter>
  11.                             <Setter Property="CheckBox.HorizontalAlignment"  Value="Center"></Setter>
  12.                         </Style>
  13.                     </DataGridCheckBoxColumn.CellStyle>
  14.                   
  15.                 </DataGridCheckBoxColumn>

后台:

  1.   private void CheckBox_Click_2(object sender, RoutedEventArgs e)
  2.         {
  3.             CheckBox headercb = (CheckBox)sender;
  4.  
  5.             for (int i = 0; i < mydg.Items.Count; i++)
  6.             {
  7.                 //获取行
  8.                 DataGridRow neddrow = (DataGridRow)mydg.ItemContainerGenerator.ContainerFromIndex(i);
  9.  
  10.                 //获取该行的某列
  11.                 CheckBox cb = (CheckBox)mydg.Columns[0].GetCellContent(neddrow);
  12.  
  13.                 cb.IsChecked = headercb.IsChecked;
  14.             }
  15.         }

但是使用DataGridCheckBoxColumn如何绑定数据又成了一个问题


 为DataGridCheckBoxColumn绑定数据和设置一点简单的样式

  1.  <DataGridCheckBoxColumn >
  2.                     <DataGridCheckBoxColumn.HeaderTemplate >
  3.                         <DataTemplate>
  4.                             <CheckBox Click="CheckBox_Click_2" HorizontalAlignment="Center" VerticalAlignment="Center" Tag="{Binding Id}"></CheckBox>
  5.                         </DataTemplate>
  6.                     </DataGridCheckBoxColumn.HeaderTemplate>
  7.  
  8.                     <!--为该列的CheckBox Tag属性绑定值-->
  9.                     <DataGridCheckBoxColumn.ElementStyle>
  10.                         <Style TargetType="CheckBox">
  11.                             <Setter Property="Tag" Value="{Binding Id}"></Setter>
  12.                         </Style>
  13.                     </DataGridCheckBoxColumn.ElementStyle>
  14.                      
  15.                     <!--设置一点样式-->
  16.                     <DataGridCheckBoxColumn.CellStyle >
  17.                         <Style  >
  18.                             <Setter Property="CheckBox.VerticalAlignment"  Value="Center"></Setter>
  19.                             <Setter Property="CheckBox.HorizontalAlignment"  Value="Center"></Setter>
  20.                         </Style>
  21.                     </DataGridCheckBoxColumn.CellStyle>
  22.                   
  23.                 </DataGridCheckBoxColumn>

  这样就能实现全选全反选,并能实现数据的绑定了

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

excel(泛型和datatable)帮助类含添加和读取表头批注

usingSystem; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Text; usingSystem.Threading.Tasks; ...

vue-element-admin表头样式。element table 设置表头颜色

在表格上增加:header-cell-style就行了&lt;el-table ref=&quot;multipleTable&quot; :data=&quot;tableData&quot; toolt...

layui表头与内容对不齐。layui表头设置宽度无效

就是列申明中间多了逗号!仔细检查一下 比如这种左边有,右边也有就有问题了

element ui表头样式,行样式,行间距。自定义分页条样式

element ui表头样式,行样式element ui表头样式,行样式可以使用header-cell-style和row-style设置 &lt;el-table :data=&...

vue修改element ui card表头样式

直接给一个样式就可以了哇,不用深入组件内部去修改,比如这里给一个headerdeepcolor样式: &lt;el-card class=&quot;box-...

ElementUI Table 动态表头,动态数据,动态列

表格显示的列不确定的时候就需要使用动态的方式,而不是预先绑定好。 [TOC]前端的实现数据源对于前端来说数据源和前面的一...

判断table表格中Checkbox 未选中的数据

判断table表格中checkbox 未选中的数据 var arrays = $(table).find(&quot;input[name=&#39;sel_sw&#39;]:not(:checked)&qu...

DataTables-Checkboxes 中的复选框

在后台左边添加一列复选框如下随后实现复选框全选全不选中//页面上点击此属性,将当前页的列表数据全部选中 $(&#39;#sel...

Layui 复选框选择事件,Checkbox选择事件

复选框点击勾选时触发,回调函数返回一个object参数,携带两个成员:form.on(&#39;checkbox(filter)&#39;,function(data){ ...

Layui动态选中复选框,动态选中CheckboxLayui给表单赋值

Layui给表单赋值://给表单赋值 form.val(&quot;formTest&quot;,{//formTest即class=&quot;layui-form&quot;所在元素属性l...

Layui 复选框点击事件,Checkbox点击事件

form.on(&#39;checkbox(filter)&#39;, function (data) { console.log(data.elem); //得到checkbox原始DOM对象 c...

uni-app 中怎么获取所有Checkbox 选中的值

官方文档:https://uniapp.dcloud.net.cn/component/checkbox.html这个文档的示例真的太少了,就光一个获取所有checkbox 选...