Flex中DataGrid列中添加按钮

不多说了，具体代码贴出来：

1、在最后一列，添加了按钮，按钮上面的文字根据从数据库返回的值 分别显示“锁定”、“解锁”两种状态；

 

<?xml version="1.0" encoding="utf-8"?> <mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%" initialize="userRO.getUsers(null,null,null,'1')"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> <s:RemoteObject id="userRO" destination="userRI"> <s:method name="getUsers" result="getUsers_ResultHandler(event)" fault="getUsers_FaultHandler(event)"> <s:arguments> <loginName> {logname.text} </loginName> <realName> {username.text} </realName> <deptName> {departname.text} </deptName> <state> {userState.selectedItem.data} </state> </s:arguments> </s:method> <s:method name="changeUserState" result="changeUserState_ResultHandler(event)" fault="changeUserState_FaultHandler(event)"> </s:method> </s:RemoteObject> </fx:Declarations> <fx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.core.FlexGlobals; import mx.events.ListEvent; import mx.managers.PopUpManager; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; [Bindable] public var userStateData:ArrayCollection = new ArrayCollection([{value:"锁定",data:"2"},{value:"未锁定",data:"1"}]); [Bindable] private var userinfoDP:ArrayCollection = null; [Bindable] private var userid:int=1; private function getUsers_ResultHandler(event:ResultEvent):void{ userinfoDP = event.result as ArrayCollection; } protected function getUsers_FaultHandler(event:FaultEvent):void{ Alert.show(event.fault.message,"遇到错误"); } protected function searchBT_clickHandler(event:MouseEvent):void { userRO.getUsers(); } private function showRowNum(item:Object,colu:int):String{ var iIndex:int = userinfoDP.getItemIndex(item)+1; return String(iIndex); } public function changeUserState(event:Event):void{ var state:String = this.userinfogDG.selectedItem.state; if(state=="1"){/*转换state的状态*/ state = "2"; }else if(state=="2"){ state ="1"; } userRO.changeUserState(this.userinfogDG.selectedItem.id,state); } private function changeUserState_ResultHandler(event:ResultEvent):void{ userRO.getUsers(); } private function changeUserState_FaultHandler(event:FaultEvent):void{ Alert.show(event.fault.message,"遇到错误"); } protected function userinfogDG_itemClickHandler(event:ListEvent):void { this.roleDispaterBTN.enabled = true; } protected function roleDispaterBTN_clickHandler(event:MouseEvent):void { FlexGlobals.topLevelApplication.centerModule.url = "com/xdja/pms/flex/xtpz/editUserRole.swf?id="+this.userinfogDG.selectedItem.id; } ]]--> </fx:Script> <s:Label x="23" y="15" text="用户管理" width="128" height="23" fontSize="18" fontWeight="bold" fontStyle="normal" textDecoration="none"/> <mx:HRule x="14" y="41" width="95%"/> <s:Label x="58" y="54" text="登录名：" fontSize="13"/> <s:TextInput id="logname" restrict="a-zA-Z" y="53" x="112" borderVisible="true"/> <s:Label x="332" y="56" text="用户名：" fontSize="13"/> <s:TextInput id="username" x="385" y="55"/> <s:Label x="43" y="85" text="部门名称：" width="70" height="16" fontSize="13"/> <s:TextInput id="departname" x="112" y="85"/> <s:Label x="319" y="88" text="用户状态：" fontSize="13"/> <s:DropDownList x="386" y="87" width="129" id="userState" dataProvider="{userStateData}" selectedIndex="1" labelField="value"></s:DropDownList> <s:Button id="searchBT" x="572" y="89.5" label="查询" click="searchBT_clickHandler(event)"/> <mx:DataGrid id="userinfogDG" dataProvider="{userinfoDP}" horizontalCenter="-4" y="116" width="95%" height="386" textAlign="center" itemClick="userinfogDG_itemClickHandler(event)"> <mx:columns> <mx:DataGridColumn headerText="序号" labelFunction="showRowNum"/> <mx:DataGridColumn headerText="登录名" dataField="loginName"/> <mx:DataGridColumn headerText="用户名" dataField="realName"/> <mx:DataGridColumn headerText="所属部门" dataField="deptName"/> <mx:DataGridColumn headerText="角色" dataField="roleName"/> <mx:DataGridColumn headerText="用户状态" dataField="stateName"/> <mx:DataGridColumn headerText="操作" dataField="id" textAlign="center"> <mx:itemRenderer> <fx:Component> <mx:HBox textAlign="center"> <mx:Button id="lockBT" label="{data.state == '1'?'锁定':'解锁'}" width="50%" click="this.outerDocument.changeUserState(event)"/> </mx:HBox> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> <s:Button id="roleDispaterBTN" label="分配角色" width="77" enabled="false" click="roleDispaterBTN_clickHandler(event)" right="40" bottom="0"/> </mx:Module>

 

2、在一列中添加“编辑”“删除”两个按钮

<?xml version="1.0" encoding="utf-8"?> <mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%" initialize="roleRO.getAllRoles()"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> <s:RemoteObject id="roleRO" destination="roleRI"> <s:method name="getAllRoles" result="getAllRoles_ResultHandler(event)" fault="getAllRoles_FaultHandler(event)"></s:method> <s:method name="getRolesByPar" result="getRolesByPar_ResultHandler(event)" fault="getRolesByPar_FaultHandler(event)"> <s:arguments> <roleCode> {roleCodeTI.text} </roleCode> <roleName> {roleNameTI.text} </roleName> </s:arguments> </s:method> <s:method name="deleteCumstomRole" result="deleteRole_resultHandler(event)"> </s:method> </s:RemoteObject> </fx:Declarations> <fx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.core.FlexGlobals; import mx.events.CloseEvent; import mx.events.ListEvent; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; [Bindable] private var roleinfoDP:ArrayCollection=null; private function getAllRoles_ResultHandler(event:ResultEvent):void{ roleinfoDP = event.result as ArrayCollection; } private function getAllRoles_FaultHandler(event:FaultEvent):void{ Alert.show("读取用户信息失败！"); } private function showRowNum(item:Object,colu:int):String{ var iIndex:int = roleinfoDP.getItemIndex(item)+1; return String(iIndex); } private function getRolesByPar_ResultHandler(event:ResultEvent):void{ roleinfoDP = event.result as ArrayCollection; } private function getRolesByPar_FaultHandler(event:FaultEvent):void{ Alert.show("读取用户信息失败！"); } protected function searchBTN_clickHandler(event:MouseEvent):void { roleRO.getRolesByPar(); } protected function addRoleBTN_clickHandler(event:MouseEvent):void { FlexGlobals.topLevelApplication.centerModule.url = "com/xdja/pms/flex/xtpz/addRole.swf"; } public function editOper_clickHandler(event:MouseEvent):void{ FlexGlobals.topLevelApplication.centerModule.url = "com/xdja/pms/flex/xtpz/editRole.swf?id="+this.roleinfoDG.selectedItem.id+"&roleCode="+this.roleinfoDG.selectedItem.roleCode+"&roleName="+this.roleinfoDG.selectedItem.roleName+"&roleMemo="+this.roleinfoDG.selectedItem.roleMemo; } public function deleteOper_clickHandler(event:MouseEvent):void{ Alert.show("确定要删除此角色吗?", "删除确认", Alert.YES|Alert.NO, this, alertConfirmHandler,null,Alert.NO); } private function alertConfirmHandler(event:CloseEvent):void{ if(event.detail==Alert.YES){ roleRO.deleteCumstomRole(this.roleinfoDG.selectedItem.id); } } private function deleteRole_resultHandler(event:ResultEvent):void{ if(event.result==null){ Alert.show("数据成功删除","成功",Alert.YES,this,deleteSuccessHander,null,Alert.YES); }else{ Alert.show("删除失败。<br/>"+event.result.message,"错误"); } } private function deleteSuccessHander(event:CloseEvent):void{ roleRO.getAllRoles(); } protected function roleinfoDG_itemClickHandler(event:ListEvent):void { this.bindPrivBTN.enabled = true; } protected function bindPrivBTN_clickHandler(event:MouseEvent):void { FlexGlobals.topLevelApplication.centerModule.url = "com/xdja/pms/flex/xtpz/editRoleMenuPriv.swf?id="+this.roleinfoDG.selectedItem.id } ]]--> </fx:Script> <s:Label x="34" y="21" text="角色管理" fontSize="18" width="78"/> <mx:HRule x="15" y="47" width="95%"/> <s:Label x="23" y="66" text="角色编码：" fontSize="13"/> <s:TextInput x="84" y="61" restrict="a-zA-Z_0-9" id="roleCodeTI"/> <s:Label x="223" y="66" text="角色名称：" fontSize="13"/> <s:TextInput x="285" y="61" id="roleNameTI"/> <s:Button x="432" y="61.5" label="查询" id="searchBTN" click="searchBTN_clickHandler(event)"/> <mx:DataGrid id="roleinfoDG" dataProvider="{roleinfoDP}" horizontalCenter="-7" y="99" width="95%" height="70%" textAlign="center" itemClick="roleinfoDG_itemClickHandler(event)"> <mx:columns> <mx:DataGridColumn headerText="序号" labelFunction="showRowNum"/> <mx:DataGridColumn headerText="角色编码" dataField="roleCode"/> <mx:DataGridColumn headerText="角色名称" dataField="roleName"/> <mx:DataGridColumn headerText="角色类型" dataField="roleTypeName"/> <mx:DataGridColumn headerText="描述" dataField="roleMemo"/> <mx:DataGridColumn headerText="操作"> <mx:itemRenderer> <fx:Component> <mx:HBox> <mx:Button label="编辑" visible="{data.roleType=='1'?false:true}" click="this.outerDocument.editOper_clickHandler(event)"> </mx:Button> <mx:Button label="删除" visible="{data.roleType=='1'?false:true}" click="this.outerDocument.deleteOper_clickHandler(event)"> </mx:Button> </mx:HBox> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> <s:Button x="646" y="60.5" label="添加角色" id="addRoleBTN" click="addRoleBTN_clickHandler(event)"/> <s:Button x="761" y="60" label="绑定权限" id="bindPrivBTN" enabled="false" click="bindPrivBTN_clickHandler(event)"/> </mx:Module>

 

以上两个代码，在添加额外控件上是相似的，重要代码如下：

<mx:DataGridColumn headerText="操作"> <mx:itemRenderer> <fx:Component> <mx:HBox> <mx:Button label="编辑" visible="{data.roleType=='1'?false:true}" click="this.outerDocument.editOper_clickHandler(event)"> </mx:Button> <mx:Button label="删除" visible="{data.roleType=='1'?false:true}" click="this.outerDocument.deleteOper_clickHandler(event)"> </mx:Button> </mx:HBox> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn>

其中，对于它们的click事件，调用的方法必须为public。引用的代码很重要：

click="this.outerDocument .deleteOper_clickHandler(event)