flex中DataGrid(表格)的使用

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

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

1. Flex里面DataGrid绑定数据如下：

    

    


     
   

     

//DataGrid对象

     
      
 //数据列 

      
     
           

       

      

      



    

这里面DataGrid 绑定数据的属性就是 dataProvider 这个数据型 要绑定的数据是 那段Script 里面我们创建的数据，要记住的是必须加上{}这对括号程序才能识别你是在做数据绑定 标签快里面放的是你要显示的数据列 这个DataGridColumn 就是你每一列展示的数据 headerText 这个属性是设置列的列名  dataField这属性是该列绑定你数据源里面的哪一个字段

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

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

    
    
     
        
    
     

//这里放的是要显示的字段 用户可以自由选择哪些列需要显示 这里我设置的是 用户ID跟用户名是必须显示的 所以我把那2个CheckBox禁用掉

     

      

      

      

      

      

      

      

      

      

     

//dataGrid对象

     
 
      
     
           
      
       

 
      

      

    

 这个里面所要注意的是在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"?>

     
    
    
      
        

//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 "否";
     }
 }
            

      

      
    
       
        
 
//该列我们显示 ID加上姓名 显得方式如下 通过labelFunction调用 上面我定义的方法
  
        



            

        




                

        

        
 

 
         

        

        

         

         



         
 
          
         
            
                   

        
       
        

      

      

      

       

        

       

      


     

  这里在 DataGrid中添加了一个属性 editable 等于true 表明每行数据多可以编辑                                                                                                               方法一中：itemRenderer="mx.controls.TextInput"  该属性表明该列已文本框的形式来展 现 rendererIsEditor="true" 表明该列可以进行编辑 如果想取消该列编辑状态 改为 false 即可editorDataField="value" 表示该列绑定的值以该控件的哪个属性来展示（这中方式导入的控editorDataField="value" 表示该列绑定的值以该控件的哪个属性来展示（这中方式导入的控件是不能去更改该控件的属性的 如果想要更灵活的操作下面方法2就可以实现）          方法二：有2种方式 一种   这样的  < itemRenderer>  和一种这样的< itemEditor>                                                                                                          这2种的区别就是在于使用 < itemRenderer> 添加的元素在DataGrid展示数据时该列始终以你添加的元素形式来显示数据使用< itemEditor> 添加的元素在DataGrid展示数据时 你需要点击该列时才会出现你添加的元素形式来展示数据添加的控件某个属性绑定值的话可以这样   添加的控件某个属性绑定值的话可以这样                                                                                                                                                                      方法三: 是我们把需要添加的元素写在另外的文件里面，再导入进来MyContor.ItemRenderCheckBox 该文件我放在 MyContor的这个包里面 里面代码如下：                                                                                                                                                                                                                                   该文件创建的是一个呈现项 目录src/MyContor/ItemRenderCheckBox.mxml

 

本文转载：http://www.cyqdata.com/cnblogs/article-detail-35712