项目需要写了一个带CheckBox的DataGridColumn,在网上找了几个例子都不行,于是就参照着自己写了一个。本来是考虑在组件中使用一个属性或者用一个类来保存每一行CheckBox选中的属性,但是发现如果拉动滚动条的化就会出现已选择和为选择的行的“选中状态”变的混乱等等一些情况,后来发现这是因为DataGrid在拉动滚动条时会去动态的设置新显行的数据,而由于只初始化了一定数量的行,因此DataGrid会将新显示行的数据设置到因为滚动而不显示的行对象中,这样通过改变数据的方式来改变每行显示的数据,而这是我保存在行对象中CheckBox的属性也都会被重新设置,也就出现了混乱的情况,现在采用数据源来保存选中的状态该问题得以解决,但是该方法要求在数据源里新增加一个属性,始终觉的还是不太好,希望能有更好点的又不太复杂的方法能够解决此问题
/**
* 在DataGrid中使用显示CheckBox列的组件,该组件会保存用户选中的数据当前行的引用,
* 该组件要求在数据源中存在属性dgSelected属性,此属性用来记录当前行是否被选中
* 2008-12-15
* */
package org.puremvc.as3.demos.flex.weborb.commPkg.components.checkBoxColumn
{
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.ListData;
public class CheckBoxColumn extends DataGridColumn{
public var cloumnSelected:Boolean=false;//保存该列是否全选的属性(用户先点击全选后在手动的取消几行数据的选中状态时,这里的状态不会改变)
public var selectItems:Array = new Array();//用户保存用户选中的数据
public function CheckBoxColumn(columnName:String=null){
super(columnName);
}
}
}
/**
* 显示CheckBox列组件的列标题,点击时会将整个数据源中的数据全部选中,反之全不选
* 2008-12-15
* */
package org.puremvc.as3.demos.flex.weborb.commPkg.components.checkBoxColumn
{
import flash.events.Event;
import mx.collections.ArrayCollection;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
public class CheckBoxHeaderRenderer extends CheckBox{
private var _data:CheckBoxColumn;//定义CheckBox列对象
public function CheckBoxHeaderRenderer(){
super();
this.addEventListener(Event.CHANGE,onChange);//CheckBox状态变化时触发此事件
this.label = "全选";
}
override public function get data():Object{
return _data;//返回的是CheckBox列的对象
}
override public function set data(value:Object):void{
_data = value as CheckBoxColumn;
trace(_data.cloumnSelected);
selected = _data.cloumnSelected;
}
private function onChange(event:Event):void{
var dg:DataGrid = DataGrid(listData.owner);//获取DataGrid对象
var column:CheckBoxColumn = dg.columns[listData.columnIndex];//获取整列的显示对象
var dgDataArr:ArrayCollection = dg.dataProvider as ArrayCollection;
column.cloumnSelected = this.selected;//更改列的全选状态
column.selectItems = new Array();//重新初始化用于保存选中列的对象
if(this.selected){//如果为全部选中的化就将数据源赋值给column.selectItems,不是就不管他,上一步已经初始化为空
column.selectItems = (dg.dataProvider as ArrayCollection).toArray();
}
for(var i:int = 0; i < dgDataArr.length ; i++){
Object(dgDataArr[i]).dgSelected = this.selected;//更改没一行的选中状态
}
}
}
}
/**
* 显示CheckBox列组件中每一行显示的ItemRenderer,用于在每一行前面添加一个CheckBox组件,
* 用户选择后会将该行数据添加到CheckBoxColumn组件中的数组中保存
* 2008-12-15
* */
package org.puremvc.as3.demos.flex.weborb.commPkg.components.checkBoxColumn
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
public class CheckBoxItemRenderer extends CheckBox{
private var currentData:Object; //保存当前一行值的对象
public function CheckBoxItemRenderer(){
super();
this.addEventListener(Event.CHANGE,onClickCheckBox);
}
override public function set data(value:Object):void{
this.selected = value.dgSelected;
this.currentData = value; //保存整行的引用
}
//点击check box时,根据状况向selectedItems array中添加当前行的引用,或者从array中移除
private function onClickCheckBox(e:Event):void{
var dg:DataGrid = DataGrid(listData.owner);//获取DataGrid对象
var column:CheckBoxColumn = dg.columns[listData.columnIndex];//获取整列的显示对象
var selectItems:Array = column.selectItems;
this.currentData.dgSelected = this.selected;//根据是否选中的状态,更改数据源中选中的标记
if(this.selected){
selectItems.push(this.currentData);
}else{
for(var i:int = 0; i<selectItems.length; i++){
if(selectItems[i] == this.currentData){
selectItems.splice(i,1)
}
}
}
}
}
}
<mx:DataGrid id="dg" height="100%" width="100%" rowCount="5" dataProvider="{busiOperData}" fontSize="12">
<mx:columns>
<checkBoxColumn:CheckBoxColumn headerText="" width="20" textAlign="center" sortable="false"
itemRenderer="{new ClassFactory(CheckBoxItemRenderer)}"
headerRenderer="{new ClassFactory(CheckBoxHeaderRenderer)}">
</checkBoxColumn:CheckBoxColumn>
<mx:DataGridColumn dataField="name" headerText="操作名称"/>
<mx:DataGridColumn dataField="real" headerText="操作实现"/>
<mx:DataGridColumn dataField="realType" headerText="实现类型"/>
<mx:DataGridColumn dataField="useScope" headerText="使用范围"/>
<mx:DataGridColumn dataField="depict" headerText="说明"/>
</mx:columns>
</mx:DataGrid>
分享到:
相关推荐
成功的实现了,datagrid中嵌套checkbox实现全选的功能。分享代码供大家分享。项目为flex3。
项目中用到DataGrid, 需要在第一列添加checkbox, 可以多选、全选。 其中涉及的概念DataTemplate, DataGridCellStyle, DataGridCellControlTemplate,Binding, OnPropertyChanged等。
在DataGrid中实现了 简单的全选与非全选。
Datagridview控件没有全选或取消全选的复选框,本资源用VB2015通过扩展DataGridViewColumnHeaderCell类,在列头绘制一个复选框checkbox控件,通过定义checkbox鼠标单击事件来实现行的全选或取消全选。checkbox还可以...
NULL 博文链接:https://tony0101.iteye.com/blog/579404
winform DataGridView表头带CheckBox全选;winform DataGridView表头带CheckBox全选
flex Datagrid checkbox全选 Datagrid
NULL 博文链接:https://yunzhongxia.iteye.com/blog/652902
在flex中的datagrid中运用checkbox实现全选和单选
实现了向dataGrid中添加checkBox的功能,可以支持多选,单选,全选。
NULL 博文链接:https://yunzhongxia.iteye.com/blog/1145400
NULL 博文链接:https://dazhi4java.iteye.com/blog/1849623
最近懒 想在网上找个DataGrid ColumnHeader里面添加CheckBox全选,但是网上没找到,于是就自己写了一个这样的样式,具体功能实现你们就自己去写吧。 分享给大家。 有什么问题可以直接加WPF/Silverlight 找晴天就...
Flex_全选或取消DataGrid中的checkbox, 解决了, flex的checkbox的问题
主要写了一个全选列,功能包括设置选择框的默认选择状态, 默认可用状态, 全选以及快速获取选中的值,呵呵!
WPF 实现CheckBox全选、反选功能,界面简单实用,功能代码可以很好地套用到自己的项目,希望对有需要的小伙伴有帮助。
重写DataGridView,在标头添加复选框,实现列中的复选框全选和反选
最经典的datagrid全选/反选控件,自定义渲染类,带有使用说明。如果不明白可随时联系