Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

php爱好者> php文档>Flex4 学习笔记之DataGrid 的几种用法

Flex4 学习笔记之DataGrid 的几种用法

时间：2011-03-27 来源：myteamwork

本人是做ASP.Net开发的，学习Flex的时间不长，这里我介绍下我所学到的DataGrid的一些常用的用法,如果讲得不够全面请各位多多指点！

我们先来了解下Flex里面DataGrid是个什么样的控件，学过ASP.Net的应该多用过微软的服务器控件里面的一些数据展示控件如(DataList,GridView,Repeater)等

这里讲的DataGrid也是Flex里面的数据展示控件其中之一类似于ASP.Net里面的GridView,但Flex里面的DataGrid与GridView相比，DataGrid自动实现了点击列头排序，及可以拖动列的位置一些功能！

这里我主要讲下DataGrid如下的几用法

DataGrid绑定数据
DataGrid动态添加列
DataGrid里面添加自定义元素

1.DataGrid绑定数据，在ASP.net 里面GridView绑定数据的方法 [GridViewName].DataSource=data; [GridViewName].DataBind(); Flex里面DataGrid绑定数据如下：

<?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" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"     title="Main" backgroundColor="#74797C"     width="650" height="379">

<fx:Script>
   <![CDATA[
    //创建数据 添加特性[Bindable] 表示该对象可以作为数据绑定源        [Bindable]
             private var data:ArrayCollection=new ArrayCollection([
           {userid:"a1",useridname:"张三",age:"20",phone:"13800",LogonName:"zhangsan",pwd:"123",isdelete:1,usertype:"VIP"},
                {userid:"a2", useridname:"李四", age:"21",   phone:"138000",  LogonName:"lsi",  pwd:"1234",isdelete:0,usertype:"普通会员"}, 
                {userid:"a3", useridname:"王五", age:"22",   phone:"1380000",  LogonName:"wangwu",  pwd:"12345",isdelete:1,usertype:"A级会员"},  
                {userid:"a4", useridname:"马六", age:"23",   phone:"13800000",  LogonName:"maliu",  pwd:"123456",isdelete:0,usertype:"黄金会员"},  
                {userid:"a5", useridname:"路人甲", age:"24", phone:"138000000",   LogonName:"lrj",  pwd:"1234567",isdelete:1,usertype:"VIP"}, 
                {userid:"a6", useridname:"路人乙", age:"25", phone:"13800000000",  LogonName:"lry", pwd:"12345678",isdelete:0,usertype:"VIP"}
            ]);        
]]>
</fx:Script>

//DataGrid对象
<mx:DataGrid  id="dg_list" dataProvider="{data}">
 //数据列 
<mx:columns>
     <mx:DataGridColumn  headerText="ID" dataField="userid" />    
<mx:DataGridColumn  headerText="姓名" dataField="useridname"/>
</mx:columns>
</mx:DataGrid> 


</s:WindowedApplication>

这里面DataGrid 绑定数据的属性就是 dataProvider 这个数据型要绑定的数据是那段Script 里面我们创建的数据，要记住的是必须加上{}这对括号

程序才能识别你是在做数据绑定

<mx:columns></mx:columns> 标签快里面放的是你要显示的数据列

<mx:DataGridColumn headerText="ID" dataField="userid" /> 这个DataGridColumn 就是你每一列展示的数据 headerText 这个属性是设置列的列名 dataField这

属性是该列绑定你数据源里面的哪一个字段

2.DataGrid动态添加列代码如下

?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" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"   showStatusBar="false"  title="Main"  width="650" height="379">
    <fx:Script>
        <![CDATA[
    //创建数据 添加特性[Bindable] 表示该对象可以作为数据绑定源
            [Bindable]
            private var data:ArrayCollection=new ArrayCollection([
                {userid:"a1",useridname:"张三",age:"20",phone:"13800",LogonName:"zhangsan",pwd:"123",isdelete:1,usertype:"VIP"},
                {userid:"a2", useridname:"李四", age:"21",   phone:"138000",  LogonName:"lsi",  pwd:"1234",isdelete:0,usertype:"普通会员"}, 
                {userid:"a3", useridname:"王五", age:"22",   phone:"1380000",  LogonName:"wangwu",  pwd:"12345",isdelete:1,usertype:"A级会员"},  
                {userid:"a4", useridname:"马六", age:"23",   phone:"13800000",  LogonName:"maliu",  pwd:"123456",isdelete:0,usertype:"黄金会员"},  
                {userid:"a5", useridname:"路人甲", age:"24", phone:"138000000",   LogonName:"lrj",  pwd:"1234567",isdelete:1,usertype:"VIP"}, 
                {userid:"a6", useridname:"路人乙", age:"25", phone:"13800000000",  LogonName:"lry", pwd:"12345678",isdelete:0,usertype:"VIP"}
            ]);
    
            //设置显示字段
 protected function Btn_ShowColumn_clickHandler(event:MouseEvent):void
  {
       var ColumName:String="";
                
  //查找 HBox 下面的  为CheckBox的子元素，
 for each(var checkbox:Object in hb_check.getChildren())
 {
    if(checkbox is  CheckBox)
              {
                        var check:CheckBox= checkbox as CheckBox;
                        if(check.selected)
                        {
                         //利用字符串保存 id（添加的列绑定的数据源） label（添加的列的列名）
                            ColumName+=check.id+","+check.label;
                            ColumName+="|"
                        }
           }
 }
                
  if(ColumName!="")
 {
                
   //排除最后一个 “|”的字符
 var str:String =ColumName.substring(0,ColumName.length-1);

 //得到字符后 进行字符分割  
 var arrycolumName:Array =  str.split("|");
                      
  //先清空 DataGrid 的列
  var arrys:Array=new Array();    
  this.dg_list.columns=arrys;
                      
  //判断数组长度 获得需要添加的列及列名
  for(var i:int;i<arrycolumName.length;i++)
 {  
                    
//动态添加列名 (添加要绑定数据  因为我CheckBox的ID 对应的是数据源的 字段 )
//先创建 DataGridColumn
 var dataColumn:DataGridColumn =new DataGridColumn();

//设置列的绑定字段
dataColumn.dataField=arrycolumName[i].toString().split(",")[0].toString();

//设置列的标题
dataColumn.headerText=arrycolumName[i].toString().split(",")[1].toString();
                        
//这一步是最关键的把创建的列对象添加发到指定的DataGrid对象里面this.dg_list.columns = this.dg_list.columns.concat(dataColumn);
  }
}
} 
            
    ]]>
    </fx:Script>

//这里放的是要显示的字段 用户可以自由选择哪些列需要显示 这里我设置的是 用户ID跟用户名是必须显示的 所以我把那2个CheckBox禁用掉
<mx:HBox id="hb_check" x="5" y="76">
<mx:CheckBox label="ID"  id="userid" enabled="false"  selected="true"/>
<mx:CheckBox label="姓名" id="useridname"  enabled="false" selected="true"  x="519" y="5"/>
<mx:CheckBox label="年龄" id="age" />
<mx:CheckBox label="电话" id="phone" />
<mx:CheckBox label="登录账号" id="LogonName" />
<mx:CheckBox label="登陆密码" id="pwd" />
<mx:CheckBox label="用户级别" id="usertype" enabled="false" selected="true"/>
<mx:CheckBox label="是否启用" id="isdelete" enabled="false" selected="true"/>
<s:Button  label="设置显示字段" id="Btn_ShowColumn"    click="Btn_ShowColumn_clickHandler(event)" x="342" y="4"/>
</mx:HBox>

//dataGrid对象
<mx:DataGrid x="4" y="105"  id="dg_list" dataProvider="{data}" >
 <mx:columns>     <mx:DataGridColumn  headerText="ID" dataField="userid" />    
      <mx:DataGridColumn  headerText="姓名" dataField="useridname"/>

 </mx:columns>
</mx:DataGrid> 
</s:WindowedApplication>

这个里面所要注意的是在DataGrid 添加列时这段代码

第一次我以为执行了这方法

this.dg_list.columns.concat(dataColumn);

我以为列就添加进去了然而并没有，后来找了下资料才发现你引用的dataColumn的属性的时候不是引用了它本身，而是一个新的拷贝，你之前所有的操作是在这个拷贝上面

所以还缺少这段代码

this.dg_list.columns= this.dg_list.columns.concat(dataColumn);

3.DataGrid里面添加自定义元素代码如下：

?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" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"       width="650" height="379">
    
    <fx:Script>
        <![CDATA[
        //导入我们自定义的Flex元素 在下面导入自定义元素(方法三)中需要到
          import MyContor.ItemRenderCheckBox;

       //创建数据 添加特性[Bindable] 表示该对象可以作为数据绑定源
         [Bindable]
         private var data:ArrayCollection=new ArrayCollection([
                {userid:"a1",useridname:"张三",age:"20",phone:"13800",LogonName:"zhangsan",pwd:"123",isdelete:1,usertype:"VIP"},
                {userid:"a2", useridname:"李四", age:"21",   phone:"138000",  LogonName:"lsi",  pwd:"1234",isdelete:0,usertype:"普通会员"}, 
                {userid:"a3", useridname:"王五", age:"22",   phone:"1380000",  LogonName:"wangwu",  pwd:"12345",isdelete:1,usertype:"A级会员"},  
                {userid:"a4", useridname:"马六", age:"23",   phone:"13800000",  LogonName:"maliu",  pwd:"123456",isdelete:0,usertype:"黄金会员"},  
                {userid:"a5", useridname:"路人甲", age:"24", phone:"138000000",   LogonName:"lrj",  pwd:"1234567",isdelete:1,usertype:"VIP"}, 
                {userid:"a6", useridname:"路人乙", age:"25", phone:"13800000000",  LogonName:"lry", pwd:"12345678",isdelete:0,usertype:"VIP"}
            ]);
]]>

//2列的内容显示在一列上面
private function formatUsername(item:Object,column:DataGridColumn):String
{
      return  item.userid+"  "+item.useridname;
}
            

//判断数据类型的值 返回我们想要的数据 切记这里面不能返回字符拼接的Flex元素，    
private function formatisdelete(item:Object,column:DataGridColumn):String
 {
     if(item.isdelete=="1")
    {         
        return "是";
     }else
     {  
        return "否";
     }
 }
            
</fx:Script>
<mx:DataGrid  id="dg_list" dataProvider="{data}" width="625" height="50%"   editable="true"  >
    <mx:columns>
 
//该列我们显示 ID加上姓名 显得方式如下 通过labelFunction调用 上面我定义的方法
  <mx:DataGridColumn  headerText="ID+姓名"  labelFunction="formatUsername" />


<mx:DataGridColumn  headerText="ID" dataField="userid" />    
<mx:DataGridColumn  headerText="姓名" dataField="useridname"/>




<!--~~~~~添加元素方法一(导入系统元素)~~~~~~~~-->        
<mx:DataGridColumn   headerText="电话号码" dataField="phone" 
itemRenderer="mx.controls.TextInput"
rendererIsEditor="true" 
editorDataField="value">
</mx:DataGridColumn>

<mx:DataGridColumn headerText="是否启用">

<!-- <mx:itemRenderer>

<fx:Component >

     <mx:CheckBox  selected="{Boolean(data.isdelete)}"></mx:CheckBox>

 </fx:Component>

</mx:itemRenderer>  -->


<!--导入自定义元素(方法三)-->
 <mx:DataGridColumn  headerText="是否启用" itemRenderer="MyContor.ItemRenderCheckBox">    
 </mx:DataGridColumn>
            
                   
</mx:columns>
        
</mx:DataGrid>

<mx:itemEditor>
<fx:Component >
<mx:CheckBox selected="{Boolean(data.isdelete)}"></mx:CheckBox>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>

这里在 DataGrid中添加了一个属性 editable 等于true 表明每行数据多可以编辑

方法一中：itemRenderer="mx.controls.TextInput" 该属性表明该列已文本框的形式来展现

rendererIsEditor="true" 表明该列可以进行编辑如果想取消该列编辑状态改为 false 即可

editorDataField="value" 表示该列绑定的值以该控件的哪个属性来展示

（这中方式导入的控件是不能去更改该控件的属性的如果想要更灵活的操作下面方法2就可以实现）

方法二：有2种方式一种这样的 < itemRenderer> 和一种这样的< itemEditor>

这2种的区别就是在于使用 < itemRenderer> 添加的元素在DataGrid展示数据时该列始终以你添加的元素形式来显示数据

使用< itemEditor> 添加的元素在DataGrid展示数据时你需要点击该列时才会出现你添加的元素形式来展示数据

添加的控件某个属性绑定值的话可以这样 <mx:CheckBox selected="{Boolean(data.isdelete)}"></mx:CheckBox>

方法三: 是我们把需要添加的元素写在另外的文件里面，再导入进来 MyContor.ItemRenderCheckBox 该文件我放在 MyContor的这个包里面里面代码如下：

该文件创建的是一个呈现项目录src/MyContor/ItemRenderCheckBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer 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">
    <mx:CheckBox  selected="{Boolean(data.isdelete)}" id="checkboxs"></mx:CheckBox>

</s:MXAdvancedDataGridItemRenderer>

由于接触Flex 时间不长可能写得不够好，请大家多多指教！