mx去掉DataGrid最後一行空資料行。s:datagrid比較,外加flex學習網址面板
下面介紹下flex中s標籤和mx標籤中的datagrid顯示多餘行的問題,我給大家寫了個對比:如下
MX標籤程式碼:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Model id="model">
<datas>
<book>
<name1>實驗</name1>
<name2>1,800</name2>
<name3>28</name3>
<name4>2</name4>
<name5>26</name5>
<name6>0</name6>
<name7>45123456789011</name7>
</book>
<book>
<name1>實驗</name1>
<name2>1,800</name2>
<name3>28</name3>
<name4>2</name4>
<name5>26</name5>
<name6>0</name6>
<name7>45123456789011</name7>
</book>
<book>
<name1>實驗</name1>
<name2>1,800</name2>
<name3>28</name3>
<name4>2</name4>
<name5>26</name5>
<name6>0</name6>
<name7>45123456789011</name7>
</book>
<book>
<name1>實驗</name1>
<name2>1,800</name2>
<name3>28</name3>
<name4>2</name4>
<name5>26</name5>
<name6>0</name6>
<name7>45123456789011</name7>
</book>
<book>
<name1>實驗</name1>
<name2>1,800</name2>
<name3>28</name3>
<name4>2</name4>
<name5>26</name5>
<name6>0</name6>
<name7>45123456789011</name7>
</book>
</datas>
</mx:Model>
<mx:Script>
<![CDATA[ ]]>
</mx:Script>
<mx:DataGrid x="10" y="125" dataProvider="{model.book}" id="mydg" baseline="none" rowCount="5">
//註釋:程式碼關鍵在這個屬性rowCount="5",這個在datagrid控制顯示行數,是mx控制的屬性
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="name1" id="name1" width="100" textAlign="left" headerStyleName=""/>
<mx:DataGridColumn headerText="Column 2" dataField="name2" id="name2" width="100" textAlign="right"/>
<mx:DataGridColumn headerText="Column 3" dataField="name3" id="name3" width="100" textAlign="center"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
S標籤程式碼:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 將非可視元素(例如服務、值物件)放在此處 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
//繫結表格用的資料
[Bindable]
private var arr:ArrayCollection = new ArrayCollection([
{neName:"教工路文一路路口相機_4", neType:"相機" , neAlarmType:"裝置告警" , removeStatus:"未清除" , confirmStatus:"未確認" , neAlarmGrade:"2級"},
{neName:"學院路文一路路口相機_3", neType:"相機" , neAlarmType:"環境告警" , removeStatus:"未清除" , confirmStatus:"未確認" , neAlarmGrade:"3級"},
{neName:"文一路莫干山路路口相機_1", neType:"相機" , neAlarmType:"連線通訊告警" , removeStatus:"未清除" , confirmStatus:"未確認" , neAlarmGrade:"1級"},
{neName:"文一路莫干山路路口相機_3", neType:"相機" , neAlarmType:"效能告警" , removeStatus:"未清除" , confirmStatus:"未確認" , neAlarmGrade:"4級"}
]);
//刪除告警資訊
public function deleteAlarmRecord():void{
arr.removeItemAt(alarmGrid.selectedIndex);
}
//確認告警資訊
public function confirmAlarmInfo():void{
arr.getItemAt(alarmGrid.selectedIndex).confirmStatus = "已確認";
alarmGrid.dataProvider = arr;
}
]]>
</fx:Script>
<s:DataGrid id="alarmGrid" width="600" height="285" requestedRowCount="4" dataProvider="{arr}" skinClass="view.datagrid">
//註釋:程式碼關鍵在這個屬性rowCount="5",這個在datagrid控制顯示行數,這個是S標籤的屬性
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="neName" headerText="名稱"></s:GridColumn>
<s:GridColumn dataField="neType" headerText="型別"></s:GridColumn>
<s:GridColumn dataField="removeStatus" headerText="清除狀態"></s:GridColumn>
<s:GridColumn dataField="confirmStatus" headerText="確認狀態"></s:GridColumn>
<s:GridColumn headerText="操作">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:HGroup>
<mx:LinkButton toolTip="清除" label="清除" click="outerDocument.deleteAlarmRecord();" textDecoration="underline" color="#2066CF" fontWeight="normal"/>
<mx:LinkButton toolTip="確認" label="確認" click="outerDocument.confirmAlarmInfo()" textDecoration="underline" color="#2066CF" fontWeight="normal"/>
</s:HGroup>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:Application>