FLEX实践—DATAGRID显示行号

2023-05-25 22:05:40 实践 显示 行号

DataGrid自动显示行号,网上有很多做法可参考),我将它写成了一个控件。

DataGridLineNumTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="Http://www.adobe.com/2006/mxml" layout="absolute"
  creationComplete="init()" xmlns:components="components.*">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   private var dg:ArrayCollection = new ArrayCollection();
   private function init():void{
    var item:Object = {name:'A',code:'A1',price:'10'};
    dg.addItem(item);
    var item1:Object = {name:'B',code:'B1',price:'8'};
    dg.addItem(item1);
    var item2:Object = {name:'C',code:'C1',price:'3'};
    dg.addItem(item2);
   }
  ]]>
 </mx:Script>
 <mx:DataGrid x="318" y="71" width="525" height="318" dataProvider="{dg}">
  <mx:columns>
      <components:DataGridNumRender headerText="Line num" dataProvider="{dg}"/>
   <mx:DataGridColumn headerText="Name" dataField="name"/>
   <mx:DataGridColumn headerText="Code" dataField="code"/>
   <mx:DataGridColumn headerText="Price" dataField="price"/>
  </mx:columns>
 </mx:DataGrid> 
</mx:Application> 
controls.DataGridNumRender.mxml (扩展DataGridColumn控件)
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGridColumn xmlns:mx="http://www.adobe.com/2006/mxml" labelFunction="getLineNum">
   <mx:Script>
    <![CDATA[
     import mx.collections.ArrayCollection;
        public var dataProvider:ArrayCollection = new ArrayCollection();
        public var index:Number;
        private function getLineNum(item:Object,num:int):String{
         index = dataProvider.getItemIndex(item)+1;
         return String(index);
        }
    ]]>
   </mx:Script>
</mx:DataGridColumn>

相关文章