SMART datagrid v.1 > Concepts

[ grids ver.1.1.4]   Back  Forward

Concepts.Paging Overview

SMART datagrid格通过显示连接在网格的部分数据组的方式,在客户端级别体现一般网络应用的分页功能。 当然,需要根据动作方式,体现可应对的服务器逻辑。 网格方面的体现方式,将会根据加载数据的时点或实际加载的数据量而略有不同。 TreeView目前不支持分页。 

设置在分页的所有页面数量以及页面数量和页面大小所决定的行数等,没有必要与实际数据组相一致。 而且,显示在各个页面的行也不例外。 也就是说,网格分页最终是将一定数量的数据行显示在分页设置中所指定的逻辑性的当前页面而已。 它也不会另行保管除显示在当前页面的行以外的、其他各个页面的行列表。 当然,一般来说,都是与实际数据组的状态同步体现的。 

1. 显示已加载的数据

从指定位置开始,按指定页面大小而显示已加载到数据组的数据。 

首先,通过GridView.setPaging而指定一个页面的大小和页面数量。 如果没有指定pageCount或指定小于0的值, 就会根据显示在网格的数据行的数量和通过setPaging或pageSize而指定的页面大小,自动计算所有页面数量。 此后,每次变更pageIndex时,将会在网格显示符合页面位置的相关数据行。 

2. 所需时点加载数据

这是在可以预测所有行数或页面数量,但没有必要预先加载所有数据时,可以体现的方式。 如果可以得知行数,就可以通过指定数据组的rowCount,自动计算页面数量, 否则就需要通过调用setPaging,或在所需时点调用setPageCount,指定预期所有页面数量。 这是因为无法使用大于指定页面数量的值而指定pageIndex。 

当变更pageIndex时,或在onPageIndexChanged事件中,尚未加载相关页面位置的数据至数据组, 就重新从服务器加载相关位置的数据行并填充数据组。 如果客户端已有数据,就使用GridDataSet.updateRows等。 

通过DataSet.hasData方法,可以确认特定行中是否已加载数据。 

Code -1
    $('#incPage').click(function () {
        var oldPage = grid.pagIndex();
        var newPage = oldPage + 1;
        grid.setPageIndex(newPage);

        if (newPage != oldPage) {
            var row = grid.getRow(newPage * grid.pageSize());
            if (row && !dataset.hasData(row.dataIndex()) {
                // 加载数据。
                $.ajax({
                    url: "/data/path/orders.csv",
                    dataType: 'text',
                    success: function (data) {
                        DataLudi.loadCsvData(dataset, data, {
                            count: pageSize,
                            fillMode: 'update',
                            fillPos: pageIndex * pageSize
                        });
                    }
                };
                // 如果已有数据,
                dataset.updateRows(pageIndex * pageSize, rows, 0, pageSize);
            }
        }
    });    
3. 显示任一位置的数据

当体现网格分页时,没有必要正确应对数据组与页面位置。 例如,可以使数据组只保管相当于一个页面大小的数据,并且在页面位置发生变更时,重新加载数据。 或者,也可以根据页面位置,显示特定行。 

首先,为通过上述方式而体现分页,先需要指定pageCount。 此后,可以通过使用pageOffsetsetPageAndOffset,将显示在当前页面的行位置指定为不同于正常页面的行位置。 

Code -2
    $('#incpage').click(function (ev) {
        // 总是从第一行开始显示。
        var newPage = grid.pageIndex() + 1;
        var size = grid.pageSize();
        grid.setPageOffset(-newPage * size);
        grid.setPageIndex(newPage);
       
        // 重新加载页面位置的数据。
        loadData(newPage * size);
    });
4. 显示特定行

我们也可以明确指定显示在当前页面的数据行。 也就是说,替代根据分页设置而自动决定的数据行,可以通过调用pageRowssetPageAndRows而显示特定行。 这时,可以指定页面位置,或在onPageIndexChanged事件中调用即可。 

Code -3
    grid.onPageIndexChanged = function (grid, oldPage, newPage) {
        grid.setPageRows([0, 1, 2, 3, 4, 5]);
    });
5. 排序和筛选

网格基本上是以显示在当前页面的行为标准,运行排序和筛选的。 但是,如果将GridBase.operateOptionspageSortingpageFiltering分别指定为false, 就会运行以所有行为对象的排序和筛选。 

如果是以所有行为标准而运行排序或筛选的情况,体现上述的延迟加载或指定位置的方式,可能会变得相对复杂。 

See Also
GridView.setPaging
GridView.pageSize
GridView.pageCount
GridView.pageIndex
GridView.pageOffset
GridView.pageRows
GridView.setPageAndOffset
GridView.setPageAndRows
GridView.onPaged
GridView.onPageCountChanged
GridView.onPageIndexChanging
GridView.onPageIndexChanged
Examples
分页
分页数据
分页偏移
分页行