如何限制flex3中datagrid的行数？

Question

我有一个由 3 列和 3 列组成的数据网格。很多行，我只想向用户显示前 20 行。有什么办法可以让我只显示数据网格中的前 20 行。单击“下一步”按钮后，应该显示接下来的 20 行，依此类推...

Answer 1

如果您有一个列表作为数据提供程序（ArrayCollection 左右），您可以 使用 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>