Question

我需要为Flex Datagrid中的特定列添加左箭头和右箭头。单击左右箭头，下面的列应滚动显示其他列。 Datagrid的第一列始终可见（固定）。说第1,2,3,4列现在可见。单击右箭头，显示第1,5,6,7列。基本上我需要Datagrid标题上的滚动功能。

请告诉我如何实现它。

Answer 1

这是可以帮助您的示例代码。

<?xml version="1.0" encoding="utf-8"?>

<mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;

    [Bindable]
    private var dpFlat:ArrayCollection = new ArrayCollection([
    {Region:"Southwest", Territory:"Arizona", 
    Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
    {Region:"Southwest", Territory:"Arizona", 
    Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
    {Region:"Southwest", Territory:"Central California", 
    Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
    {Region:"Southwest", Territory:"Nevada", 
    Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
    {Region:"Southwest", Territory:"Northern California", 
    Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
    {Region:"Southwest", Territory:"Northern California", 
    Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
    {Region:"Southwest", Territory:"Southern California", 
    Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
    {Region:"Southwest", Territory:"Southern California", 
    Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
    ]);
    ]]>
</mx:Script>

<mx:DataGrid id="dg" lockedColumnCount="1" width="500" height="50%" horizontalScrollPolicy="on" rowCount="5" horizontalCenter="0" verticalCenter="0" dataProvider="{dpFlat}">
    <mx:columns>
        <mx:DataGridColumn id="col" width="100" dataField="Region" headerText="Region" >
            <mx:headerRenderer  >
                <mx:Component id="cmp">
                    <mx:Image width="25" height="25" source="{imgSource}" click="image1_clickHandler(event)" >
                        <mx:Script>
                            <![CDATA[
                                import mx.core.Application;
                                [Bindable]
                                private var imgSource:String = "arrow_left.gif";
                                var flag:Boolean;
                                protected function image1_clickHandler(event:MouseEvent):void
                                {

                                    if(flag)
                                    {
                                        flag = false;
                                        Application.application.dg.horizontalScrollPosition = 0;
                                        imgSource = "arrow_left.gif";

                                    }
                                    else
                                    {
                                        flag = true;
                                        imgSource = "arrow_right.gif";
                                        Application.application.dg.horizontalScrollPosition = 2

                                    }
                                }
                            ]]>
                        </mx:Script>
                    </mx:Image>

                </mx:Component>
            </mx:headerRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn id="col1" width="300" dataField="Territory" headerText="Territory"/>
        <mx:DataGridColumn id="col2" width="300" dataField="Territory_Rep" headerText="Territory_Rep"/>
        <mx:DataGridColumn id="col3" width="300" dataField="Actual" headerText="Actual" />
        <mx:DataGridColumn id="col4" width="300" dataField="Estimate" headerText="Estimate" />
    </mx:columns>
</mx:DataGrid>

Flex Datagrid标头中的滚动功能

1 个答案: