突出mx：datagrid個別單元格上的拖動事件

Question

我是新來flex和最近分配一個項目，我需要在datagrid上工作，使其能夠突出顯示單個或多個（但相鄰）單元基於被拖動的項目從一個列表。所以情況就是這樣...

我正在使用flex SDK 4.6。我有一個mx數據網格（由於某些限制，我無法使用火花或其他版本），某些日期的行和時間（00-23小時）列（所以總共25列：第1列顯示日期和休息24小時）。

通過這種方式，我們可以將每個日期用作行標題，該行標題在24列中運行數小時。我有一個從XML文件填充的列表，列表中的每個項目都有一個與它關聯的日期和時間元素。當我們將一個項目從列表中拖到datagrid中時，它應該根據匹配的日期（從拖動的列表項目和datagrid日期列中）和匹配的小時數（從正在拖動的列表項目以及數據網格小時列中，突出顯示datagrid中的特定單元格）。

到目前爲止，我可以在拖動輸入時獲得行索引和列索引/索引，但將它們作爲整個行列高亮顯示。例如，如果結果是第3行和第4至第5列，則突出顯示整個第3行（全部25列）以及第4至第5列下的所有單元格。我需要的是到someCell（rowIndex：xx，ColIndex：YY）這樣的特定位置並更改該單元格的樣式。有一些item-renderer的例子，但他們使用單元格的數據來查找它是否小於或大於某個值，然後對它進行處理，但我無法在我的情況下使用它。

其次我想用日期列中的兩個按鈕（一個在頂部，另一個在底部）替換滾動條以滾動日期。我也非常感謝任何建議。 希望我已經提出了明確的問題/方案。感謝您查看它。期待社區的幫助。這項任務在緊急列表中...請幫助。

Answer 1

如果我已經理解你的問題，這是我的建議。

您應該能夠向數據網格的每個單元格提供有關日期和時間的信息。你可以通過ItemRenderer來實現，它實現了IDropInListItemRenderer接口。如果用戶選擇XML列表中的任何元素，那麼他定義了一個特定的時間點，應該與一個ItemRenderer進行比較。

我希望它能幫助你。

//CellRenderer.mxml

<?xml version="1.0" encoding="utf-8"?> 
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    width="100%" height="100%" 
    backgroundColor="{(cellDate == parentDocument.selectedDate &amp;&amp; cellHour == parentDocument.selectedHour) ? 0xfcb9bb : 0xfefceb}" 
    implements="mx.controls.listClasses.IDropInListItemRenderer"> 

<fx:Script> 
    <![CDATA[ 
     import mx.controls.dataGridClasses.DataGridListData; 
     import mx.controls.listClasses.BaseListData; 

     private var _listData:BaseListData; 

     [Bindable]private var cellDate:String; 
     [Bindable]private var cellHour:String; 

     override public function set data(value:Object) : void 
     { 
      super.data = value; 

      cellDate = data.date; 
      cellHour = (listData as DataGridListData).label; 
     } 

     [Bindable]public function get listData() : BaseListData 
     { 
      return _listData; 
     } 
     public function set listData(value:BaseListData) : void 
     { 
      _listData = value; 
     } 
    ]]> 
</fx:Script> 

</mx:HBox> 

//應用

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      layout="absolute" 
      minWidth="955" minHeight="600" creationComplete="initApp()" backgroundColor="0xeeeeee"> 

<fx:Declarations> 
    <fx:Model id="cells"> 
     <dataset> 
      <data> 
       <date>14.01.2013</date> 
       <h00>00:00</h00> 
       <h01>01:00</h01> 
       <h02>02:00</h02> 
       <h03>03:00</h03> 
      </data> 
      <data> 
       <date>15.01.2013</date> 
       <h00>00:00</h00> 
       <h01>01:00</h01> 
       <h02>02:00</h02> 
       <h03>03:00</h03> 
      </data> 
      <data> 
       <date>16.01.2013</date> 
       <h00>00:00</h00> 
       <h01>01:00</h01> 
       <h02>02:00</h02> 
       <h03>03:00</h03> 
      </data> 
      <data> 
       <date>17.01.2013</date> 
       <h00>00:00</h00> 
       <h01>01:00</h01> 
       <h02>02:00</h02> 
       <h03>03:00</h03> 
      </data> 
     </dataset> 
    </fx:Model> 
</fx:Declarations> 

<fx:Script> 
    <![CDATA[ 
     import mx.collections.ArrayCollection; 
     import mx.events.DragEvent; 
     import mx.events.ListEvent; 

     [Bindable]public var selectedDate:String; 
     [Bindable]public var selectedHour:String; 

     private function initApp():void 
     { 
      srclist.dataProvider = new ArrayCollection([ 
       {activity: 'Reading',  date: '14.01.2013', hour: '01:00'}, 
       {activity: 'Television', date: '15.01.2013', hour: '03:00'}, 
       {activity: 'Movies',  date: '16.01.2013', hour: '02:00'} 
      ]); 
     } 

     protected function onItemRollOver(event:ListEvent):void 
     { 
      var item:Object = (srclist.dataProvider as ArrayCollection).getItemAt(event.rowIndex); 
      selectedDate = item.date; 
      selectedHour = item.hour; 
     } 
    ]]> 
</fx:Script> 

<mx:HBox x="35" y="28" height="200"> 

    <mx:VBox width="124" height="100%"> 
     <mx:Label text="Available Activities"/> 
     <mx:List 
      id="srclist" 
      labelField="activity" 
      width="118" height="100%" 
      allowMultipleSelection="false" 
      dragEnabled="true" 
      dragMoveEnabled="true" selectionColor="0xffffff" 
      itemRollOver="onItemRollOver(event)" itemRollOut="selectedDate = ''; selectedHour = '';"/> 
    </mx:VBox> 

    <mx:VBox height="100%"> 
     <mx:Label text="Scheduler"/> 

     <mx:DataGrid 

      width="386" height="100%" dataProvider="{cells.data}" 
      alternatingItemColors="[0xffffff]" 
      horizontalGridLineColor="0x999999" 
      horizontalGridLines="true" 
      verticalGridLineColor="0x999999" 
      sortableColumns="false" 
      resizableColumns="false" selectable="false"> 

      <mx:columns> 
       <mx:DataGridColumn dataField="date" headerText="Data"/> 
       <mx:DataGridColumn dataField="h00" headerText="00:00" itemRenderer="com.CellRenderer"/> 
       <mx:DataGridColumn dataField="h01" headerText="01:00" itemRenderer="com.CellRenderer"/> 
       <mx:DataGridColumn dataField="h02" headerText="02:00" itemRenderer="com.CellRenderer"/> 
       <mx:DataGridColumn dataField="h03" headerText="03:00" itemRenderer="com.CellRenderer"/> 
      </mx:columns> 
     </mx:DataGrid> 
    </mx:VBox> 

</mx:HBox> 

</mx:Application>