保存Datagrid状态调整

       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, 然后调整列的状态，关闭浏览器，然后再打开浏览器运行这个程序，可以看见数据显示方式就是按照最后的设置呈现。