在拖动事件上突出显示mx:数据网格单个单元格

Question

我是flex的新手，最近分配了一个项目，我需要在datagrid上工作，以便能够基于从列表中拖动的项突出显示单个或多个(但相邻的)单元格。所以场景是这样的。

我使用的是flex SDK 4.6。我有一个mx datagrid (由于某些限制，我不能使用spark或其他版本)，一些日期作为行，时间(00-23小时)在列(所以总共25列:第一列显示日期，其余24列表示小时)。

这样，我们就可以让每个日期充当行标题，它在24列中运行数小时。我有一个从XML文件填充的列表，列表中的每个项目都有一个与之关联的日期和时间元素。当我们将一个项目从列表拖到datagrid中时，它应该根据匹配日期(来自拖动的列表项和datagrid date列)和匹配小时(来自拖动的列表项和datagrid hour列)突出显示数据网格中的特定单元格。

到目前为止，我可以在拖动回车时获得行索引和列索引，但将它们作为整个行-列突出显示。例如，如果结果是第3行和第4-5列，则会突出显示整个第3行(全部25列)和第4-5列下的所有单元格。我需要的是找到一个特定的位置，比如someCell(rowIndex:xx，ColIndex:YY)，并更改该单元格的样式。有一些项目渲染器的例子，但他们使用单元格的数据来查找它是否小于或大于某个值，然后操纵它，但我不能在我的例子中使用它。

其次，我想用日期列的两个按钮(一个在顶部，另一个在底部)替换滚动条来滚动日期。我也会非常感谢任何关于这方面的建议。希望我已经把问题/场景讲清楚了。感谢您对此进行了研究。期待着来自社区的帮助。此任务位于list...please紧急帮助中。

Answer 1

如果我没有直接理解你的问题，这是我的建议。

您应该能够向datagrid的每个单元格提供有关日期和时间的信息。您可以通过实现IDropInListItemRenderer接口的ItemRenderer来实现。如果用户选择了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>