Apr 22

Flex中如何将XML数据显示在DataGrid控件中的例子

FlexAdd comments

接下来的例子演示了Flex在编译阶段，利用mx:XML将XML数据读入，并且将其在DataGrid控件中显示。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="top"
  5.         backgroundColor="white">  
  6.  
  7.     <mx:XML id="tempXML"
  8.             source="assets/cuePoints.xml" />
  9.  
  10.     <mx:XMLListCollection id="cuePointXMLList"
  11.             source="{tempXML.CuePoint}" />
  12.     <mx:XMLListCollection id="parametersXMLList"
  13.             source="{dataGrid.selectedItem.Parameters.Parameter}" />  
  14.  
  15.     <mx:Script>
  16.         <![CDATA[
  17.             private function parametersLabelFunction(item:Object, column:DataGridColumn):String {
  18.                 return item.Parameters.Parameter.length();
  19.             }  
  20.  
  21.             private function numericSortCompareFunction(objA:Object, objB:Object):int {
  22.                 var itemA:Number = parseInt(objA.Time.text()) as Number;
  23.                 var itemB:Number = parseInt(objB.Time.text()) as Number;
  24.  
  25.                 if (itemA > itemB) {
  26.                     return 1;
  27.                 } else if (itemA < itemB) {
  28.                     return -1;
  29.                 } else {
  30.                     return 0;
  31.                 }
  32.             }
  33.         ]]>
  34.     </mx:Script>  
  35.  
  36.     <mx:VBox>
  37.         <mx:DataGrid id="dataGrid"
  38.                 dataProvider="{cuePointXMLList}"
  39.                 width="100%"
  40.                 rowCount="{cuePointXMLList.length + 1}">
  41.             <mx:columns>
  42.                 <mx:DataGridColumn id="timeCol"
  43.                         dataField="Time"
  44.                         headerText="Time (ms):"
  45.                         sortCompareFunction="numericSortCompareFunction" />
  46.                 <mx:DataGridColumn id="typeCol"
  47.                         dataField="Type"
  48.                         headerText="Type:" />
  49.                 <mx:DataGridColumn id="nameCol"
  50.                         dataField="Name"
  51.                         headerText="Name:" />
  52.                 <mx:DataGridColumn id="parametersCol"
  53.                         dataField="Parameters"
  54.                         headerText="Parameters:"
  55.                         labelFunction="parametersLabelFunction" />
  56.             </mx:columns>
  57.         </mx:DataGrid>
  58.  
  59.         <mx:DataGrid id="parametersDataGrid"
  60.                 dataProvider="{parametersXMLList}"
  61.                 width="100%"
  62.                 visible="{parametersXMLList.length > 0}"
  63.                 rowCount="{parametersXMLList.length + 1}">
  64.             <mx:columns>
  65.                 <mx:DataGridColumn id="parameterNameCol"
  66.                         dataField="Name"
  67.                         headerText="Parameter Name:" />
  68.                 <mx:DataGridColumn id="parameterValueCol"
  69.                         dataField="Value"
  70.                         headerText="Parameter Value:" />
  71.             </mx:columns>
  72.         </mx:DataGrid>
  73.     </mx:VBox>
  74.  
  75. </mx:Application>
下面是XML文件：
Download: cuePoints.xml
  1. <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
  2. <FLVCoreCuePoints version="1">  
  3.  
  4.     <CuePoint>
  5.         <Time>0</Time>
  6.         <Type>event</Type>
  7.         <Name>slide1</Name>
  8.         <Parameters>
  9.             <Parameter>
  10.                 <Name>id</Name>
  11.                 <Value>value</Value>
  12.             </Parameter>
  13.         </Parameters>
  14.     </CuePoint>  
  15.  
  16.     <CuePoint>
  17.         <Time>5000</Time>
  18.         <Type>event</Type>
  19.         <Name>slide2</Name>
  20.         <Parameters>
  21.             <Parameter>
  22.                 <Name>param1</Name>
  23.                 <Value>value1</Value>
  24.             </Parameter>
  25.             <Parameter>
  26.                 <Name>param2</Name>
  27.                 <Value>value2</Value>
  28.             </Parameter>
  29.         </Parameters>
  30.     </CuePoint>  
  31.  
  32.     <CuePoint>
  33.         <Time>20000</Time>
  34.         <Type>event</Type>
  35.         <Name>slide3</Name>
  36.     </CuePoint>  
  37.  
  38. </FLVCoreCuePoints>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

Leave a Reply