FLEX实践—Datagrid保存列模板及自动显示行号

运行效果就不截图了,有兴趣的朋友自己可以试一下。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
 //自动获取行号
 private function lfRowNum(oItem:Object,iCol:int):String
  {
    var iIndex:int = dg.getItemIndex(oItem) + 1;
    return String(iIndex);
  }
 //创建datagrid列模板
  var columnTemplate:ArrayCollection=new ArrayCollection();
 //当手动改变datagrid列的排列顺序时,可将其保存
  private function saveTemplate():void{
   var temp:Object=new Object();
   temp['name']=templateName.text;
   temp['columns']=grid.columns;
   columnTemplate.addItem(temp);
   Alert.show("Save template: "+temp['name']);
  }
  //如果已经保存了多个不同的排序模板,可通过下拉列表来改变datagrid的显示
  private function changeTemplate():void{
   
   grid.columns = columnTemplate[comboBox.selectedIndex]['columns'];
  }
  ]]>
 </mx:Script>
 <mx:ArrayCollection id="dg">
  <mx:Object name="A" code="A1" des="A2" enabled="true"/>
  <mx:Object name="B" code="B1" des="B2" enabled="false"/>
  <mx:Object name="A" code="C1" des="C2" enabled="true"/>
 </mx:ArrayCollection>
 <mx:DataGrid id="grid" dataProvider="{dg}"
     x="393" y="140">
    <mx:columns>
        <mx:DataGridColumn headerText="Row number" labelFunction="lfRowNum"  />
        <mx:DataGridColumn headerText="Name" dataField="name"  />
        <mx:DataGridColumn headerText="Code" dataField="code" />
        <mx:DataGridColumn headerText="Description" dataField="des" />
    </mx:columns>
  </mx:DataGrid>
  <mx:Button x="679" y="336" label="Save Template" width="141" id="aa1" click="saveTemplate()"/>
 <mx:ComboBox x="393" y="63" dataProvider="{columnTemplate}" labelField="name" id="comboBox"
           change="changeTemplate()" prompt="请选择模板">
 </mx:ComboBox>
 <mx:TextInput x="471" y="336" id="templateName"/>
 <mx:Label x="393" y="338" text="模板名称:" fontWeight="bold"/>
</mx:Application>

发布了355 篇原创文章 · 获赞 6 · 访问量 195万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览