Flex根据后台的数据自动生成AdvancedDataGrid

       在企业级应用开发中AdvancedDataGrid 和DataGrid 使用的非常广。当然最基本的也是最常用的就是数据的直接绑定,固定列头和固定数据的列数。而这往往不能满足需求,企业应用的开发常常是以数据为中心,数据会经常变化比如增加了列头,删除某列的数据,群组子类的新增等等。这里就要根据后台数据完全的自动化生成了,也就是完全使用ActionScript来写,其实也很简单,flex的每段mxml标记都对应了相同的AS类,只是在某些细节上的实现有些不同.下面简单的例子供大家参考,相信能解决开发中的大部分问题。

如转载请注明原文章出处谢谢。

                        [Bindable]
			public var dgSource:ArrayCollection = new ArrayCollection(); 
			private var adDG:AdvancedDataGrid = new AdvancedDataGrid();
			[Bindable]
			public var newSource:ArrayCollection = new ArrayCollection();

			protected function httpservice1_resultHandler(event:ResultEvent):void
			{
				dgSource = event.result.root.Item;
				
				//遍历数据源
				var ss:int = 0;				
				while(ss < ((dgSource.getItemAt(0).value.string) as ArrayCollection).length)
				{
					var newObj:Object=new Object();
					for(var s:int=0;s<dgSource.length;s++)
					{
						newObj[dgSource.getItemAt(s).duName] = dgSource.getItemAt(s).value.string[ss];
					}																		
					ss ++;
					newSource.addItem(newObj);
				}
				
				adDG.dataProvider = newSource;
				adDG.groupedColumns = getColumnGroupNames(dgSource);
				adDG.sortableColumns = false;
				adDG.sortExpertMode = false;
				adDG.showInAutomationHierarchy = false;
				adDG.height = 400;
				adDG.percentWidth = 100;
				adDG.horizontalScrollPolicy = ScrollPolicy.AUTO;
				this.addElement(adDG);
				
			}


                        //根据数据源格式生成相应的Column和ColumnGroup
			private function getColumnGroupNames(columnsSource:ArrayCollection):Array
			{
				var columnGrouNames:Array=new Array();
				
				if (columnsSource && columnsSource.length > 0)
				{
					for (var i:int=0; i < columnsSource.length; i++)
					{
						var obj:Object=columnsSource.getItemAt(i);
						var column:AdvancedDataGridColumn=new AdvancedDataGridColumn();
						column.headerText=obj.duName;
						column.dataField=obj.duName;
						column.width = 130;
						
						if (obj.hasOwnProperty("duOwner"))
						{
							//检测当前是否存在群组
					                var column_index:int=judgeGroupNameIfExist(columnGrouNames, obj.duOwner);
							
							//判断当前群组是否存在
							//如果存在则添加子列
							if (column_index > -1)
							{
								columnGrouNames[column_index].children.push(column)
							}
							else
							{
								var groupName:AdvancedDataGridColumnGroup=new AdvancedDataGridColumnGroup();
								groupName.headerText=obj.duOwner;
								groupName.children=[column];
								columnGrouNames.push(groupName);
							}
						}
						else //如果当前列不是群组列则直接添加
						{
							columnGrouNames.push(column);
						}
					}
				}
				return columnGrouNames;
			}
			
			//判断群组是否存在
			//不存在则添加
			//存在则返回当前下标
			private function judgeGroupNameIfExist(groupSource:Array, name:String):int
			{
				for (var i:int=0; i < groupSource.length; i++)
				{
					if (groupSource[i].headerText == name)
					{
						return i;
					}
				}
				return -1;
			}





xml数据源

<?xml version="1.0" encoding="utf-8"?>
<root>
  <Item>
    <duName>Name</duName>
    <value>
      <string>Name 1</string>
      <string>Name 2</string>
      <string>Name 3</string>
      <string>Name 4</string>
      <string>Name 5</string>
    </value>
  </Item>
  <Item>
    <duName>Owner</duName>
    <value>
      <string>HR 1</string>
      <string>HR 2</string>
      <string>HR 3</string>
      <string>HR 4</string>
      <string>HR 5</string>
    </value>
  </Item>
  <Item>
    <duName>Type</duName>
    <value>
      <string>Labor 1</string>
      <string>Labor 2</string>
      <string>Labor 3</string>
      <string>Labor 4</string>
      <string>Labor 5</string>
    </value>
  </Item>
  <Item>
    <duName>Department One</duName>
    <duOwner>Zhang San</duOwner>
    <value>
      <string>13.0000</string>
      <string>14.0000</string>
      <string>15.0000</string>
      <string>16.0000</string>
      <string>17.0000</string>
    </value>
  </Item>
  <Item>
    <duName>Department Two</duName>
    <duOwner>Li Shi</duOwner>
    <value>
      <string>4.0000</string>
      <string>5.0000</string>
      <string>6.0000</string>
      <string>7.0000</string>
      <string>8.0000</string>
    </value>
  </Item>
  <Item>
    <duName>Department Three</duName>
    <duOwner>Wang Wu</duOwner>
    <value>
      <string>9.0000</string>
      <string>10.0000</string>
      <string>11.0000</string>
      <string>12.0000</string>
      <string>13.0000</string>
    </value>
  </Item>
  <Item>
    <duName>Department Four</duName>
    <duOwner>Zhang San</duOwner>
    <value>
      <string>5.0000</string>
      <string>6.0000</string>
      <string>7.0000</string>
      <string>8.0000</string>
      <string>9.0000</string>
    </value>
  </Item>
  <Item>
    <duName>Department Five</duName>
    <duOwner>Wang Wu</duOwner>
    <value>
      <string>11.0000</string>
      <string>12.0000</string>
      <string>13.0000</string>
      <string>14.0000</string>
      <string>15.0000</string>
    </value>
  </Item>
</root>




  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值