Flex Datagrid:创建时间表

时间:2010-03-01 20:47:48

标签: flex actionscript-3 datagrid flex3

我有一些数据通过webservices传递到flex,并且想要创建一个时间表。截至目前,我有一个时间表,但是日期是一列,时间是一列,依此类推,将数据字段映射到这些列。

如果你理解我的意思,我需要翻转这个并且包含所有日期列和一个时间列,每天列过滤到day属性。

我会这样做吗?是否有以这种方式过滤的数据域属性,还是有更好的方法?

3 个答案:

答案 0 :(得分:2)

听起来你想要的东西与Outlook日历类似。您需要每个工作日的列,以及当天每小时的一行。

DataGrids将绑定到其dataProvider属性的集合成员显示为行。但是,似乎您的ArrayCollection包含的值对象与在特定时间发生的事件相对应,而不是包含事件的时间。

我会写另一个值对象来表示一天中的某个时间。此对象将包含与保存类名称的每个工作日对应的数据成员。

public class TimeOfDayVO {
    public var monday:String;
    public var tuesday:String;
    public var wednesday:String;
    public var thursday:String;
    public var friday:String;
}

然后编写一个函数,在一天中的每个小时创建一个这些对象。

public function createTimeOfDayArray(oldArray:ArrayCollection) {
    for (var hour:int = 0; hour < 24; hour++) {
        var timeVO:TimeOfDayVO = new TimeOfDayVO();
        newArray.addItem(timeVO);
    }
    for each (obj in oldArray) {
        switch (obj.day) {
            case "Monday":
                newArray[obj.time].monday = obj.classname;
                break;
            //repeat for each day
        }
    }
}
将newArray绑定到DataGrid而不是旧数组。

答案 1 :(得分:1)

假设我理解你正在寻找什么,这就是我想出的。

基本上,只需在datagrid中为每一天创建一个列,并将它们绑定到ArrayCollection中所需的任何值。然后根据ArrayCollection中的值将该日期列的visible属性设置为true。我希望这有帮助!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object theClass="Class1" time="10:00" day="Monday"/>
                <mx:Object theClass="Class1" time="2:00" day="Wednesday"/>
                <mx:Object theClass="Class2" time="8:00" day="Tuesday"/>
                <mx:Object theClass="Class3" time="9:30" day="Tuesday"/>
                <mx:Object theClass="Class4" time="10:00" day="Friday"/>
                <mx:Object theClass="Class4" time="12:00" day="Thursday"/>
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="400"
            rowCount="6">
        <mx:columns>
            <mx:DataGridColumn dataField="theClass" />
            <mx:DataGridColumn dataField="time" />
            <mx:DataGridColumn headerText="Monday" dataField="time">
              <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox>
                        <mx:Label text="{data.time}" visible="{data.day == 'Monday'}" />
                    </mx:HBox>
                </mx:Component>
              </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Tuesday" dataField="time">
              <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox>
                        <mx:Label text="{data.time}" visible="{data.day == 'Tuesday'}" />
                    </mx:HBox>
                </mx:Component>
              </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Wednesday" dataField="time">
              <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox>
                        <mx:Label text="{data.time}" visible="{data.day == 'Wednesday'}" />
                    </mx:HBox>
                </mx:Component>
              </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Thursday" dataField="time">
              <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox>
                        <mx:Label text="{data.time}" visible="{data.day == 'Thursday'}" />
                    </mx:HBox>
                </mx:Component>
              </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Friday" dataField="time">
              <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox>
                        <mx:Label text="{data.time}" visible="{data.day == 'Friday'}"/>
                    </mx:HBox>
                </mx:Component>
              </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

答案 2 :(得分:0)

我没有准确地解决问题,但可能是类似于我在一段时间后使用advanceddatagrid的问题。可能是Robusto的解决方案也可能在这里有用。将它粘贴在你的参考下面。

<mx:Repeater id="rp" dataProvider="{yourArrayCollection}"> 
  <mx:AdvancedDataGridColumns dataField="{rp.currentItem.fieldName}" visible="{rp.currentItem.show}"> 
</mx:Repeater>