IT妖怪

由 Silver 撰写 　http://blog.ityao.com/archives/12

Flex里面的Datagrid组件为我们提供强大的数据列表展示功能，但针对不同的客户，他们的使用习惯或者屏幕显示分辨率会不一样，于是有可能客户会自己手动调整列的宽度和数据列的展示顺序。

于是，保存客户的使用习惯就是一个常见的需求。下面是我写的一个例子。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
	<mx:Script>
		<!--[CDATA[
			import mx.collections.SortField;
			import mx.collections.Sort;
			import mx.collections.ICollectionView;
			import mx.utils.ObjectUtil;
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.events.IndexChangedEvent;
			import mx.controls.Alert;
			import mx.events.DataGridEvent;
			import mx.collections.ArrayCollection;
			[Bindable]
			public var myAC:ArrayCollection = new ArrayCollection([
			{firstName:"Jon",lastName:"Hirschi",email:""},
			{firstName:"Tariq",lastName:"Ahmed",email:"tariq@dopejam.com"},
			{firstName:"Faisal",lastName:"Abid",email:""},
			{firstName:"Tom",lastName:"Ortega",email:""},
			{firstName:"Ryan",lastName:"Stewart",email:"ryan@isreallycool.com"}
			]);

			//keep track the action changes at the datagrid,
			private function changeColumnWidth(event:DataGridEvent):void{
				callLater(saveColumnStatus);
			}
			private function changeSorting(event:DataGridEvent):void{
				callLater(saveColumnStatus);
			}
			private function changeOrder(event:IndexChangedEvent):void{
				callLater(saveColumnStatus);
			}
			//save the datagrid status and properties into shareobject
			private function saveColumnStatus():void{
				var so:SharedObject = SharedObject.getLocal("TESTDATAGRID");
				so.data.dgcs = new Array(dg.columns.length);
				//loop each datagrid column to log the status
				for(var i:int=0;i<dg.columns.length;i++){
					var dgcId:String = "index"+(i+1);
					var dgc:DataGridColumn = this[dgcId] as DataGridColumn;
					var columprop:Object = new Object();
					columprop.id = dgcId;
					columprop.index = dg.columns.indexOf(dgc);
					columprop.width = dgc.width;
					columprop.order = dgc.sortDescending;
					so.data.dgcs[i]=columprop;
				}
				//loop to log the current sorting properties
				var view:ICollectionView = ICollectionView(dg.dataProvider);
        		var sort:Sort = view.sort;
        		so.data.sorts = new Array(sort.fields.length);
        		for(var j:int =0; j< sort.fields.length; j++){
        			var sf:SortField = sort.fields[j];
        			var sortprop:Object = new Object();
        			sortprop.name = sf.name;
        			sortprop.casesensive = sf.caseInsensitive;
        			sortprop.desc = sf.descending;
        			so.data.sorts[j]=sortprop;
        		}
        		//write to the local sharedobject
        		so.flush();

			}

			//each time init the application will load the changes from local sharedobject
			private function initApp():void{

				var so:SharedObject = SharedObject.getLocal("TESTDATAGRID");
				var newColumns:Array = new Array(dg.columns.length); 

				if(so.data.dgcs != null){
					//read the datagrid column order and properties from local sharedobject
					for(var i:int=0;i<dg.columns.length;i++){
						var dgcId:String = "index"+(i+1);
						var dgc:DataGridColumn = this[dgcId] as DataGridColumn;
						dgc.width = so.data.dgcs[i].width;
						dgc.sortDescending = so.data.dgcs[i].order;
						newColumns[so.data.dgcs[i].index] = dgc;
					}
					dg.columns = newColumns;
					//read the sorting from local sharedobject
					if(so.data.sorts!=null && so.data.sorts.length>0){
						var view:ICollectionView = ICollectionView(dg.dataProvider);
						view.sort = new Sort();
		               var sorts:Array = new Array(so.data.sorts.length);
		               for(var j:int=0;j<so.data.sorts.length;j++ ){
		               		var sf:Object = so.data.sorts[j]
		               	  	sorts[j] = new SortField(sf.name,sf.casesensive,sf.desc);
		               }
		               view.sort.fields = sorts;
		               //refresh the datagrid by sorting loaded
	    	           view.refresh();
					}
				}
			}
		]]-->
	</mx:Script>
	<mx:DataGrid id="dg" width="500" height="400" dataProvider="{myAC}"
		  columnStretch="changeColumnWidth(event)"
		   headerRelease="changeSorting(event)"
		    headerShift="changeOrder(event)">
		<mx:columns>
			<mx:DataGridColumn id="index1" dataField="firstName" headerText="First Name"/>
			<mx:DataGridColumn id="index2" dataField="lastName" headerText="Last Name"/>
			<mx:DataGridColumn id="index3" dataField="email" headerText="Email"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

这里使用了 Local Shared Object 来在客户端保持状态信息，通常的项目中如果客户经常用不同终端登录的，可以把这部分状态信息保存在数据库中。这里我们保存的状态信息包括了 数据列的宽度， 排序，和列的先后顺序。

测试方法：编译后打开浏览器运行这个swf, 然后调整列的状态，关闭浏览器，然后再打开浏览器运行这个程序，可以看见数据显示方式就是按照最后的设置呈现。