1. 程式人生 > >mx去掉DataGrid最後一行空資料行。s:datagrid比較,外加flex學習網址面板

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>