在DataGrid的GridColumn列中加入按钮宣染器

墨蓝 2022-01-21 05:35 89阅读 0赞

在项目中需要做如一个如下图效果的这样一个功能：

![20130620093056453][]

需要在DataGrid的GridColumn列中加入按钮宣染器：

1 首先声明一个spark  DataGrid.在最后一列中加入按钮宣染器，红色代码部分

<s:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="on" width="100%" height="100%" minHeight="200" skinClass="com.tm.skin.DataGridSkin">
    	<s:columns>
    			<s:ArrayList>
    				<s:GridColumn headerText="地区名称" dataField="areaName" />
    				<s:GridColumn headerText="地区NO" dataField="areaNo" />
    				<s:GridColumn headerText="是否使用" dataField="isUse" labelFunction="isUseValue"/>
    				<s:GridColumn itemRenderer="com.tm.renderer.OperateItem" editable="false"/> 
    			</s:ArrayList>
    	</s:columns>
    </s:DataGrid>

2 在宣染器类GridItemRenderer中，有2个按钮，并且为这2个按钮，加了自定义事件，派发出去：

<fx:Script>
    		<![CDATA[
    			import com.tm.event.OperateEvent;
    			private function removeItem():void {
    				trace(data);
    				var removeEvent:OperateEvent = new OperateEvent(OperateEvent.REMOVE,data);
    				this.dispatchEvent(removeEvent);								
    			}
    			
    			private function updateItem():void {
    				var updateEvent:OperateEvent = new OperateEvent(OperateEvent.UPDATE,data);
    				this.dispatchEvent(updateEvent);								
    			}
    		]]>
    </fx:Script>
    	
    <s:Button label="编辑" click="updateItem()"/>
    <s:Button label="删除" click="removeItem()"/>

3 自定义事件如下：

public class OperateEvent extends Event
    	{
    		public var data:Object;
    		public static const REMOVE:String = "remove";
    		public static const UPDATE:String = "update";
    		public function OperateEvent(type:String,data:Object, bubbles:Boolean=true, cancelable:Boolean=false)
    		{
    			this.data = data;
    			super(type, bubbles, cancelable);
    		}
    	}

4  最后我们需要在主程序中，也就是使用了spark 的 DataGrid的类中，在creationComplete初始化方法中，加入对自定义事件的监听方法：

protected function CompleteHandler(event:FlexEvent):void
    			{
    				DataGrid2.addEventListener(OperateEvent.REMOVE,removeUI); DataGrid2.addEventListener(OperateEvent.UPDATE,updateUI);
    				serverPagingBar1.dataGrid=DataGrid2;
    				//flex 分页
    				serverPagingBar1.pagingFunction=pagingFunction;
    			}

5  在监听到这两件事件之后，编写处理函数： removeUI 删除 ，update  编辑 .如下：

protected function updateUI(event:OperateEvent):void
    			{
    				var areaUI:AreaUI = PopUpManager.createPopUp(this,AreaUI) as AreaUI;
    				areaUI.state = "update";
    				areaUI.areaVo = event.data as AreaVo;
    				PopUpManager.centerPopUp(areaUI);
    			}

protected function removeUI(event:OperateEvent):void
    			{
    				Alert.okLabel = '确定';
    				Alert.cancelLabel = '取消';
    				Alert.show("确定要删除该记录","确定删除该记录？",Alert.OK|Alert.CANCEL,this,removeFunction);
    				recId = event.data.recNo;
    				
    			}

结束！

[20130620093056453]: /images/20220121/2b2fa4b1f5f64294a07f5c87b6386075.png