Question

我有一个由3列和1组成的数据网格。很多行，我想只向用户显示前20行。有什么方法我只能显示我的datagrid中的前20行。单击“next”按钮后，将显示下20行，依此类推......

Answer 1

如果您有一个列表作为数据提供者（ArrayCollection左右），您可以use filterFunction过滤您的列表。

示例代码在此处：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application initialize="init()" layout="absolute" minHeight="600" minWidth="955"
    xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.utils.StringUtil;

        private static const DP_LENGTH:int = 100;
        private static const VISIBLE_ROWS_COUNT:int = 20;

        [Bindable]
        private var currentPage:int = 0;

        [Bindable]
        private var dataProvider:ArrayCollection;

        protected function init():void
        {
            var dpArray:Array = [];
            for (var i:int = 0; i < DP_LENGTH; i++)
            {
                var item:Object = { first: i, second: Math.random(), third: Math.random() };
                dpArray.push(item);
            }
            dataProvider = new ArrayCollection(dpArray);
            dataProvider.filterFunction = pagingFilterFunction;
            dataProvider.refresh();
        }

        protected function nextPage():void
        {
            currentPage++;
            dataProvider.refresh();
        }

        protected function prevPage():void
        {
            currentPage--;
            dataProvider.refresh();
        }

        private function pagingFilterFunction(item:Object):Boolean
        {
            var start:int = currentPage * VISIBLE_ROWS_COUNT;
            var end:int = start + VISIBLE_ROWS_COUNT - 1;
            var index:int = dataProvider.getItemIndex(item);
            return (index >= start) && (index <= end);
        }
    ]]>
    </mx:Script>
    <mx:VBox horizontalAlign="center" horizontalCenter="0" verticalCenter="0">
        <mx:DataGrid dataProvider="{dataProvider}">
            <mx:columns>
                <mx:DataGridColumn dataField="first" headerText="First" />
                <mx:DataGridColumn dataField="second" headerText="Second" />
                <mx:DataGridColumn dataField="third" headerText="Third" />
            </mx:columns>
        </mx:DataGrid>
        <mx:Label 
            text="{StringUtil.substitute('Page {0} of {1}', currentPage + 1, Math.floor ((DP_LENGTH - 1) / VISIBLE_ROWS_COUNT) + 1)}" />
        <mx:HBox>
            <mx:Button click="prevPage()" enabled="{currentPage > 0}" label="Prev" />
            <mx:Button click="nextPage()" enabled="{DP_LENGTH / VISIBLE_ROWS_COUNT - 1 > currentPage}" label="Next" />
        </mx:HBox>
    </mx:VBox>
</mx:Application>

如何限制flex3中的datagrid行？

1 个答案: