Flex動態DataGrid 一

     相信每個開發過flex的使用者都用過datagrid，但是傳統的datagrid有很多弱點，例如有一個弱點就是比較難在記憶體動態產生頭部的標題，如果您只是一個傳入一個未知的二維表結構，希望它動態顯示就讓人感覺無能為力了，所以為力完善相關的設計，我嘗試用xml動態定義了標題，如果大家喜歡這個代碼請給我留個支援哦。

 

datagrid代碼

<?xml version="1.0" encoding="utf-8"?><br /><mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"<br /> xmlns:s="library://ns.adobe.com/flex/spark"<br /> xmlns:mx="library://ns.adobe.com/flex/mx"<br /> creationComplete="datagrid_creationCompleteHandler(event)"><br /><!-- type="image/html/external" --><br /><fx:Declarations><br /><fx:XML id="titleXml" xmlns=""><br /><nodes><br /><node width="20"><br /><ename>key1</ename><br /><cname>key1</cname><br /></node><br /><node width="30%"><br /><ename>key2</ename><br /><cname>key2</cname><br /></node><br /></nodes><br /></fx:XML><br /><fx:XML id="xml" xmlns=""><br /><nodes><br /><node><br /><key1>value1</key1><br /><key2>value2</key2><br /></node><br /></nodes><br /></fx:XML><br /></fx:Declarations><br /><fx:Script><br /><!--[CDATA[<br />import com.shine.framework.DBUtil.model.DBModel;<br />import com.shine.framework.core.model.BaseXmlModel;<br />import com.shine.framework.core.model.XmlModel;<br />import com.shine.framework.core.util.ArrayMap;<br />import com.shine.framework.core.util.DataUtil;</p><p>import mx.controls.Alert;<br />import mx.controls.dataGridClasses.DataGridColumn;<br />import mx.events.FlexEvent;</p><p>import spark.components.TextArea;</p><p>//是否允許下載檔案<br />public var downloadPolicy:String="off";</p><p>//儲存格類型<br />public var itemRendererClass:ClassFactory=null;</p><p>//初始化<br />private function datagrid_creationCompleteHandler(event:FlexEvent):void<br />{<br />var titleArray:Array=new Array;</p><p>if(titleXml!=null){<br />for each (var xml:XML in titleXml.children())<br />{<br />var dataGridColumn:DataGridColumn=new DataGridColumn;<br />dataGridColumn.dataField=XML(xml.ename).toString();<br />dataGridColumn.headerText=XML(xml.cname).toString();<br />if(xml.@width!=null&&String(xml.@width).length!=0){<br />if(String(xml.@width).indexOf("%")!=-1){<br />dataGridColumn.width=this.width*int(DataUtil.StringReplaceAll(String(xml.@width),"%",""));<br />}else{<br />dataGridColumn.width=int(xml.@width);<br />}<br />}</p><p>if(String(xml.@type)==null){</p><p>}else if(String(xml.@type)=="image"){<br />dataGridColumn.itemRenderer=new ClassFactory(com.shine.framework.core.view.ImageDataGridRender);<br />}else if(String(xml.@type)=="html"){<br />dataGridColumn.itemRenderer=new ClassFactory(com.shine.framework.core.view.HTMLDataGridRender);<br />}else if(String(xml.@type)=="external"){<br />if(itemRendererClass!=null)<br />dataGridColumn.itemRenderer=itemRendererClass;<br />}</p><p>titleArray.push(dataGridColumn);<br />dataGridColumn=null;<br />}<br />this.columns=titleArray;<br />titleArray=null;<br />}<br />this.dataProvider=xml.children();<br />initRightContext();<br />}</p><p>//加入DataGrid<br />public function addModel(value:ArrayMap):void{<br />for(var i:int=0;i<value.getLength();i++){<br />if(value.get(i) is BaseXmlModel)<br /> addRowByModel(value.get(i) as BaseXmlModel);<br />}<br />}</p><p>//通過model加入新的一行<br />public function addRowByModel(value:BaseXmlModel):void{<br />var dataXml:XML=this.xml.appendChild(XML(value.getBaseXmlValue()));<br />this.dataProvider=dataXml.children();<br />}</p><p>//直接把數值插入新的一行<br />public function addRowByValue(...arg):void{<br />var num:int=arg.length;<br />var xmllist:XMLList=this.titleXml.children();<br />if(num==xmllist.length()){<br />var model:BaseXmlModel=new BaseXmlModel;<br />for(var i:int=0;i<num;i++){<br />model.put(XML(XML(xmllist[i]).child("ename")).toString(),arg[i]);<br />}<br />addRowByModel(model);<br />model=null;<br />}else{<br />Alert.show("行資料不正確","提示");<br />}<br />}</p><p>//刪除其中一行<br />public function removeDataGridRow(num:int):void{<br />var xmlModel:XmlModel=new XmlModel(this.xml);<br />xmlModel.deleteXmlByIndex(num);<br />this.xml=XML(xmlModel.getOriginalXmlValue());<br />}</p><p>//清空資料單元<br />public function cleanDataGridRow():void{<br />this.xml=XML("<nodes />");<br />}</p><p>//擷取表格高度<br />public function getDataGridRowLenght():int{<br />return this.xml.children().length();<br />}</p><p>//空白處右鍵<br />private function initRightContext():void<br />{<br />var contextMenu:ContextMenu=new ContextMenu();<br />contextMenu.hideBuiltInItems();</p><p>if (downloadPolicy == "on")<br />{<br />var saveExcelContextMenuItem:ContextMenuItem=new ContextMenuItem("匯出為Excel");<br />saveExcelContextMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, saveExcel);<br />contextMenu.customItems.push(saveExcelContextMenuItem);<br />}</p><p>this.contextMenu=contextMenu;<br />}</p><p>//匯出Excel<br />private function saveExcel(event:ContextMenuEvent):void<br />{<br />//loadDGInExcel(this, 'http://127.0.0.1:8080/SaleSystem/services/ExcelExport.jsp');<br />loadDGInExcelBySave(this);<br />}<br />]]><br /></fx:Script><br /><fx:Script><br /><![CDATA[<br />/**<br /> * Simple script to convert a Datagrid to a HTML table and then<br /> * pass it on to an external excel exporter<br /> *<br /> */</p><p>//Libs that are mostly used<br />//(only a number are necessary for the datagrid conversion and export)<br />import flash.errors.*;<br />import flash.events.*;<br />import flash.external.*;<br />import flash.net.URLRequest;<br />import flash.net.URLVariables;</p><p>/**<br /> * Convert the datagrid to a html table<br /> * Styling etc. can be done externally<br /> *<br /> * @param: dg Datagrid Contains the datagrid that needs to be converted<br /> * @returns: String<br /> */<br />private function convertDGToHTMLTable(dg:DataGrid):String<br />{<br />//Set default values<br />var font:String=dg.getStyle('fontFamily');<br />var size:String=dg.getStyle('fontSize');<br />var str:String='';<br />var colors:String='';<br />var style:String='style="font-family:' + font + ';font-size:' + size + 'pt;"';<br />var hcolor:Array;</p><p>//Retrieve the headercolor<br />if (dg.getStyle("headerColor") != undefined)<br />{<br />hcolor=[dg.getStyle("headerColor")];<br />}<br />else<br />{<br />hcolor=dg.getStyle("headerColors");<br />}</p><p>//Set the htmltabel based upon knowlegde from the datagrid<br />//flex3<br />//str+='<table width="' + dg.width + '" border="1"><thead><tr width="' + dg.width + '" style="background-color:#' + Number((hcolor[0])).toString(16) + '" mce_style="background-color:#' + Number((hcolor[0])).toString(16) + '">';<br />//flex4<br />str+='<table width="' + dg.width + '" border="1"><thead><tr width="' + dg.width + '" style="background-color:#' + 0xffffff.toString(16) + '" mce_style="background-color:#' + 0xffffff.toString(16) + '">';</p><p>//Set the tableheader data (retrieves information from the datagrid header<br />for (var i:int=0; i < dg.columns.length; i++)<br />{<br />colors=dg.getStyle("themeColor");</p><p>if (dg.columns[i].headerText != undefined)<br />{<br />str+="<th " + style + ">" + dg.columns[i].headerText + "</th>";<br />}<br />else<br />{<br />str+="<th " + style + ">" + dg.columns[i].dataField + "</th>";<br />}<br />}<br />str+="</tr></thead><tbody>";<br />colors=dg.getStyle("alternatingRowColors");</p><p>//Loop through the records in the dataprovider and<br />//insert the column information into the table<br />for (var j:int=0; j < dg.dataProvider.length; j++)<br />{<br />str+="<tr width=/"" + Math.ceil(dg.width) + "/">";</p><p>for (var k:int=0; k < dg.columns.length; k++)<br />{</p><p>//Do we still have a valid item?<br />if (dg.dataProvider.getItemAt(j) != undefined && dg.dataProvider.getItemAt(j) != null)<br />{</p><p>//Check to see if the user specified a labelfunction which we must<br />//use instead of the dataField<br />if (dg.columns[k].labelFunction != undefined)<br />{<br />str+="<td width=/"" + Math.ceil(dg.columns[k].width) + "/" " + style + ">" + dg.columns[k].labelFunction(dg.dataProvider.getItemAt(j), dg.columns[k].dataField) + "</td>";</p><p>}<br />else<br />{<br />//Our dataprovider contains the real data<br />//We need the column information (dataField)<br />//to specify which key to use.<br />str+="<td width=/"" + Math.ceil(dg.columns[k].width) + "/" " + style + ">" + dg.dataProvider.getItemAt(j)[dg.columns[k].dataField] + "</td>";<br />}<br />}<br />}<br />str+="</tr>";<br />}<br />str+="</tbody></table>";</p><p>return str;<br />}</p><p>/**<br /> * Load a specific datagrid into Excel<br /> * This method passes the htmltable string to an backend script which then<br /> * offers the excel download to the user.<br /> * The reason for not using a copy to clipboard and then javascript to<br /> * insert it into Excel is that this mostly will fail because of the user<br /> * setup (Webbrowser configuration).<br /> *<br /> * @params: dg Datagrid The Datagrid that will be loaded into Excel<br /> * @params: url String The location of the excel export file<br /> */<br />private function loadDGInExcel(dg:DataGrid, url:String):void<br />{</p><p>//Pass the htmltable in a variable so that it can be delivered<br />//to the backend script<br />var variables:URLVariables=new URLVariables();<br />variables.htmltable=convertDGToHTMLTable(dg);</p><p>//Setup a new request and make sure that we are<br />//sending the data through a post<br />var u:URLRequest=new URLRequest(url);<br />u.data=variables; //Pass the variables<br />u.method=URLRequestMethod.POST; //Don't forget that we need to send as POST</p><p>//Navigate to the script<br />//We can use _self here, since the script will through a filedownload header<br />//which results in offering a download to the user (and still remaining in you Flex app.)<br />navigateToURL(u, "_self");<br />}</p><p>private function loadDGInExcelBySave(dg:DataGrid):void<br />{<br />var ba:ByteArray=new ByteArray;<br />ba.writeUTF(convertDGToHTMLTable(dg));<br />var _fileRef:FileReference=new FileReference();<br />_fileRef.save(ba, "data.xls"); //儲存到磁碟，會出現個系統儲存對話方塊。<br />ba.clear();<br />}<br />]]--><br /></fx:Script><br /></mx:DataGrid><br />

 

代碼的

<fx:XML id="titleXml" xmlns=""><br /><nodes><br /><node width="20"><br /><ename>key1</ename><br /><cname>key1</cname><br /></node><br /><node width="30%"><br /><ename>key2</ename><br /><cname>key2</cname><br /></node><br /></nodes><br /></fx:XML>

定義的是title

 

代碼的

<fx:XML id="xml" xmlns=""><br /><nodes><br /><node><br /><key1>value1</key1><br /><key2>value2</key2><br /></node><br /></nodes><br /></fx:XML>

定義的是內容

 

調用的application

<?xml version="1.0" encoding="utf-8"?><br /><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"<br /> xmlns:s="library://ns.adobe.com/flex/spark"<br /> xmlns:mx="library://ns.adobe.com/flex/mx"<br /> minWidth="955" minHeight="600"<br /> xmlns:local="*"<br /> creationComplete="{complete()}" xmlns:view="com.shine.framework.core.view.*"><br /><fx:Declarations><br /><fx:XML id="titleXml" xmlns=""><br /><nodes><br /><node><br /><ename>key1</ename><br /><cname>key1</cname><br /></node><br /><node><br /><ename>key2</ename><br /><cname>key2</cname><br /></node><br /></nodes><br /></fx:XML><br /><fx:XML id="dataXml" xmlns=""><br /><nodes><br /><node><br /><key1>value1</key1><br /><key2>value2</key2><br /></node><br /><node><br /><key1>value3</key1><br /><key2>value4</key2><br /></node><br /></nodes><br /></fx:XML><br /></fx:Declarations><br /><fx:Script><br /><!--[CDATA[<br />private function complete():void{<br />sunshineDataGrid.dataProvider=dataXml.node;<br />}<br />]]--><br /></fx:Script><br /><view:SunshineDataGrid id="sunshineDataGrid" width="100%" height="100%" titleXml="{titleXml}" downloadPolicy="on" /><br /></s:Application><br />

 

實際效果

 

 

    當然也可以動態定義寬度，也可以動態控制顯示圖片還是html都可以，下一篇文章給大家介紹一下

    http://blog.csdn.net/arjick/article/details/6450992