Flex4 <s:DataGrid> 的用法

当前位置： 教程  >  游戏开发  >  网页游戏开发  >  正文

Flex给DataGrid动态增加或删除一个列

作者：谯斯月 发表于 2010-12-21 11:41:53     评论(1)     阅读(4160)     

 

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" 
        layout="vertical" 
        verticalAlign="middle" 
        backgroundColor="white"> 
  
    <mx:Script> 
        <![CDATA[ 
            import mx.controls.dataGridClasses.DataGridColumn; 
  
            private function addDataGridColumn(dataField:String):void { 
                var dgc:DataGridColumn = new DataGridColumn(dataField); 
                var cols:Array = dataGrid.columns; 
                cols.push(dgc); 
                dataGrid.columns = cols; 
            } 
            private function removeDataGridColumn(dataField:String):void { 
                var cols:Array = dataGrid.columns; 
                cols.pop();
                dataGrid.columns = cols; 
            } 
  
            private function addColumn():void { 
                addDataGridColumn("col4"); 
            } 
            
            private function removeColumn():void { 
                removeDataGridColumn("col4"); 
            } 
        ]]> 
    </mx:Script> 
  
    <mx:ArrayCollection id="arr"> 
        <mx:source> 
            <mx:Array> 
                <mx:Object col1="A1" col2="A2" col3="A3" col4="A4"/> 
                <mx:Object col1="B1" col2="B2" col3="B3" col4="B4"/> 
                <mx:Object col1="C1" col2="C2" col3="C3" col4="C4"/> 
                <mx:Object col1="D1" col2="D2" col3="D3" col4="D4"/> 
                <mx:Object col1="E1" col2="E2" col3="E3" col4="E4"/> 
                <mx:Object col1="F1" col2="F2" col3="F3" col4="F4"/> 
            </mx:Array> 
        </mx:source> 
    </mx:ArrayCollection> 
  
    <mx:ApplicationControlBar dock="true"> 
        <mx:Button label="Add column" click="addColumn();" /> 
        <mx:Button label="Remove column" click="removeColumn();" /> 
    </mx:ApplicationControlBar> 
  
    <mx:DataGrid id="dataGrid" 
            dataProvider="{arr}" 
            width="400" 
            rowCount="6"> 
        <mx:columns> 
            <mx:DataGridColumn dataField="col1" /> 
            <mx:DataGridColumn dataField="col2" /> 
            <mx:DataGridColumn dataField="col3" /> 
        </mx:columns> 
    </mx:DataGrid> 
  
</mx:Application>

Flex4中的s:DataGrid与Flex3的mx:DataGrid差别非常的大，不多说，直接上代码

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

  xmlns:s="library://ns.adobe.com/flex/spark" 

  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

</fx:Declarations>

 

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

//绑定表格用的数据

[Bindable]

private var arr:ArrayCollection = new ArrayCollection([

{neName:"教工路文一路路口相机_4", neType:"相机" , neAlarmType:"设备告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"2级"},

{neName:"学院路文一路路口相机_3", neType:"相机" , neAlarmType:"环境告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"3级"},

{neName:"文一路莫干山路路口相机_1", neType:"相机" , neAlarmType:"连接通信告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"1级"},

{neName:"文一路莫干山路路口相机_3", neType:"相机" ,  neAlarmType:"性能告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"4级"}

]);

 

//删除告警信息

public function deleteAlarmRecord():void{

arr.removeItemAt(alarmGrid.selectedIndex);

}

//确认告警信息

public function confirmAlarmInfo():void{

arr.getItemAt(alarmGrid.selectedIndex).confirmStatus = "已确认";

alarmGrid.dataProvider = arr;

}

]]>

</fx:Script>

 

<s:DataGrid id="alarmGrid" width="600" height="285" requestedRowCount="4" dataProvider="{arr}" skinClass="view.datagrid">

<s:columns>

<s:ArrayList>

<s:GridColumn dataField="neName" headerText="名称"></s:GridColumn>

<s:GridColumn dataField="neType" headerText="类型"></s:GridColumn>

<s:GridColumn dataField="removeStatus" headerText="清除状态"></s:GridColumn>

<s:GridColumn dataField="confirmStatus" headerText="确认状态"></s:GridColumn>

<s:GridColumn headerText="操作">

<s:itemRenderer>

<fx:Component>

<s:GridItemRenderer>

<s:HGroup> 

<mx:LinkButton toolTip="清除" label="清除" click="outerDocument.deleteAlarmRecord();" textDecoration="underline" color="#2066CF" fontWeight="normal"/> 

<mx:LinkButton toolTip="确认" label="确认" click="outerDocument.confirmAlarmInfo()" textDecoration="underline" color="#2066CF" fontWeight="normal"/> 

</s:HGroup>

</s:GridItemRenderer>

</fx:Component>

</s:itemRenderer>

</s:GridColumn>

</s:ArrayList>

</s:columns>

</s:DataGrid>

 

</s:Application>