AS3 DataGrid学习

一、根据行的某个值，改变行颜色

  1.新建项目，增加代码层，代码层中的代码如下：

  import fl.data.DataProvider;

 

  var dataGrid:DataGrid = new DataGrid();
  dataGrid.x = 100;
  dataGrid.y = 100;
  dataGrid.setSize(400,200)
  addChild(dataGrid);

 

  var d:Array = new Array();
  d = [{姓名:'张三',一月:200,二月:300,三月:400, rowColor:'red'},
       {姓名:'李四',一月:300,二月:400,三月:500, rowColor:'green'},
       {姓名:'王五',一月:400,二月:500,三月:600, rowColor:'yellow'}];

  dataGrid.dataProvider = new DataProvider(d);
  dataGrid.columns = ['姓名','一月','二月' , '三月'];

  dataGrid.setStyle("cellRenderer", CellStyle1);

 

  2. 创建样式CellStyple1

    package {
        import fl.controls.listClasses.CellRenderer;
        import fl.controls.listClasses.ICellRenderer;
        import flash.text.TextFormat;

        public class CellStyle1 extends CellRenderer implements ICellRenderer {

            public function CellStyle1():void {
               super();
            }

            override protected function drawBackground():void {
                var format:TextFormat = new TextFormat();
                switch (data.rowColor) {
                   case "green" :
                        format.color=0x00FF33;
                        format.size=24;
                        format.align = "center";
                       //其他属性自己设;
                       setStyle("textFormat",format);
                        break;
                case "red" :
                        format.color=0xFF0000;
                        format.size=12;
                        format.align = "center";
                        //其他属性自己设;
                        setStyle("textFormat",format);
                        break;
                case "yellow":
                        format.color=0xFFFF00;
                        format.size=12;
                       format.align = "center";
                        setStyle("textFormat",format);
                        break;
                default :
                       break;
                }

                super.drawBackground();
           }
        }
    }

 

二、直接在代码中同步设置显示样式

   import fl.data.DataProvider;
  //import fl.controls.dataGridClasses.DataGridColumn;

   var d:Array = new Array();
   d = [{姓名:'张三',一月:200,二月:300,三月:400},
        {姓名:'李四',一月:300,二月:400,三月:500},
        {姓名:'王五',一月:400,二月:500,三月:600, rowColor:'red'}];

   dataGrid.dataProvider = new DataProvider(d);
   dataGrid.columns = ['姓名','一月','二月' , '三月'];

   var tf1:TextFormat = new TextFormat();
   tf1.size = 12;
   tf1.color = 0x000000;
   tf1.align = "right";
   //其他的属性自己调;

   var tf2:TextFormat = new TextFormat();
   tf2.size = 13;
   tf2.color = 0xff0000;
   tf2.bold = true;
   //其他的属性自己调;


   //下面是应用:
   dataGrid.setRendererStyle("textFormat", tf1);     //这是设置表头上的单元格文字格式;
   dataGrid.setStyle("headerTextFormat", tf2);       //这是设置表内单元格上的文字样式;
   dataGrid.getColumnAt(1).cellRenderer = CellStyle1; //根据自定义的样式,只应用于本列

 

    注意：本部分的最后一行代码用到了上一部分的自定义样式

 

三、设置列属性

  方法一:
    var col1:DataGridColumn = new DataGridColumn("stateCode");
    col1.headerText = '状态码';
    col1.width = 48;
    var col2:DataGridColumn = new DataGridColumn('responseTime');
    col2.headerText = '响应时间';
    col2.width = 60;
    dataGrid.columns = [col1,col2];   
    dataGrid.dataProvider.addItem(
       { stateCode : '200',
         responseTime : 300,
         }
      );
 
  方法二:
    var d:Array = new Array();
    d = [{姓名:'张三',一月:200,二月:300,三月:400},
     {姓名:'李四',一月:300,二月:400,三月:500},
     {姓名:'王五',一月:400,二月:500,三月:600}];

    dataGrid.dataProvider = new DataProvider(d);
    dataGrid.columns = ['姓名','一月','二月' , '三月'];
    dataGrid.getColumnAt(0).width = 80;
    dataGrid.getColumnAt(1).width = 80;
    dataGrid.getColumnAt(2).width = 120;

 

四、其它的一些小设置

    1.滚动条显示最后一个(系统默认不会根据内容的增加而去显示最后一条)

       dataGrid.scrollToIndex(dataGrid.dataProvider.length);

 

    2.数据超过500条，则删除

        //结果栏中只显示指定条记录
        if (dataGrid.dataProvider.length>500){
            dataGrid.dataProvider.removeAll();
        }

 

    3.增加一列

       (1)在后面直接增加

        var column4:DataGridColumn = new DataGridColumn('四月');
        column4.headerText = "四月";
        dataGrid.columns = dataGrid.columns.concat(column4);

        [简单用法: dataGrid.addColumn(column4) ]

 

      (2)在指定位置增加

         var column4:DataGridColumn = new DataGridColumn('四月');
         column4.headerText = "四月";
         var a:Array = dataGrid.columns;
         a.splice(1,0,column4);    //增加这一列到第"1"的位置
         dataGrid.columns = a;

         [简单用法: dataGrid.addColumnAt(column4, 1)]

 

         说明： dataGrid.columns得到的是一个数组深拷贝，所以不能直接修改，必须完全重新赋值