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得到的是一個數組深拷貝，所以不能直接修改，必須完全重新賦值