datagrid添加checkbox

最新推荐文章于 2014-08-12 16:34:58 发布

j416066989

最新推荐文章于 2014-08-12 16:34:58 发布

阅读量395

点赞数

分类专栏： flex 文章标签：大数据

本文链接：https://blog.csdn.net/j416066989/article/details/84372644

版权

flex 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

参考地址：http://www.flexbj.com/post-29.html


<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   creationComplete="Init()"
					   xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:comp="comp.*">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>


	<fx:Script>
		<![CDATA[

			import mx.events.ListEvent;
			import mx.controls.Alert;
			import flash.trace.Trace;   
			import comp.CheckBoxHeaderRenderer;
			import comp.CheckBoxItemRenderer;

			import mx.collections.ArrayCollection;   

			public var dataArray:ArrayCollection = new ArrayCollection;   
			private function Init():void{   
				dataArray.addItem({name:'张三',phone:'2270',email:'12@123.com'});   
				dataArray.addItem({name:'李四',phone:'2270',email:'12@123.com'});
				dataArray.addItem({name:'王五',phone:'2270',email:'12@123.com'});
				dataArray.addItem({name:'赵六',phone:'2270',email:'12@123.com'});
				dataArray.addItem({name:'小七',phone:'2270',email:'12@123.com'});   
				dgId.dataProvider = dataArray;   
			}   
			private function ladygaga():void{
				var arr:Array=cbc.selectItems;
				var s:String='';
				for each(var o:Object in arr)
				s+=o.name+"\t";
				Alert.show(s);
			}
			//选择某行时，同时选中checkbox
			private function selItem():void{
				var selindex:int=dgId.selectedIndex;
				var dataArr:ArrayCollection=dgId.dataProvider as ArrayCollection;
				var selectItems:Array = cbc.selectItems;
				for(var i:int=0;i<dataArr.length;i++){
					if(i==selindex){
						var obj:Object=dataArr.getItemAt(i);
						trace(obj.dgSelected);
						obj.dgSelected=!obj.dgSelected;
						trace(obj.dgSelected);
						if(obj.dgSelected)
							selectItems.push(obj);
						else{
							for(var j:int = 0; j<selectItems.length; j++){  
								if(selectItems[j] == obj){
									selectItems.splice(j,1);
								}
							}
						}
					}
				}
				dataArr.refresh();
			}
			//清除checkbox选中
			private function clearChecked():void{
				cbc.selectItems.splice(0,cbc.selectItems.length);
				var da:ArrayCollection = dgId.dataProvider as  ArrayCollection;
				for each(var obj:Object in da){
					obj.dgSelected=false;
				}
				cbc.cloumnSelected=false;
				da.refresh();
			}


		]]>
	</fx:Script>


	<mx:DataGrid id="dgId" x="10" y="10" width="450" height="200" itemClick="selItem()" fontSize="12">   
		<mx:columns>   
			<comp:CheckBoxColumn dataField="dgSelected" width="25" id="cbc" 
								 draggable="false" resizable="false" sortable="false" 
								 headerRenderer="{new ClassFactory(comp.CheckBoxHeaderRenderer)}"
								 itemRenderer="{new ClassFactory(comp.CheckBoxItemRenderer)}"/>
			<mx:DataGridColumn headerText="姓名" dataField="name"/>
			<mx:DataGridColumn headerText="电话" dataField="phone"/>
			<mx:DataGridColumn headerText="邮件" dataField="email"/>
			<mx:DataGridColumn headerText="操作" itemRenderer="comp.Operate" dataField="name"/>
			<mx:DataGridColumn headerText="操作" itemRenderer="ddd.ddd" dataField="phone"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:HBox y="300">
		<mx:Button top="300" click="ladygaga()" label="弹出选中" fontSize="12"/>   
		<mx:Button click="clearChecked()" label="清除选中"  fontSize="12"/>
	</mx:HBox>
</s:WindowedApplication>


<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
						  xmlns:s="library://ns.adobe.com/flex/spark" 
						  xmlns:mx="library://ns.adobe.com/flex/mx" 
						  focusEnabled="true">

	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;

			protected function lblData_clickHandler(event:MouseEvent):void
			{
				Alert.show(dataGridListData.label);
			}

		]]>
	</fx:Script>

	<s:HGroup top="0" left="0" right="0" bottom="0" horizontalAlign="center">
		<s:Label text="删除" click="lblData_clickHandler(event)" buttonMode="true" />
	</s:HGroup>
</s:MXDataGridItemRenderer>

bug：已有选中行后，如果在点击checkbox不起作用，或者是不是想要的结果
修复：在checkboxitemrenderer的change事件中派发一个事件，通知父组件不要在触发itemclick事件
dispatchEvent(new Event(CHECKBOX_CHANGE));
addEventListener(CheckBoxItemRenderer.CHECKBOX_CHANGE, function(){
checkboxClick = true;
}, true);
private function itemClick():void{
if(checkboxClick) {
// 这里直接返回不继续执行
checkboxClick = false;
return;
}
}