2

私は Kendo UI を試しており、学習目的で提供されている例を使用しています。数十万の要素を持つ大規模なデータ ソースを使用しているとします。ページングを使用していて、ページ サイズが 10 の場合、Web ページから 10 個の要素のみを取得できるようにしたいのですが、実際には要素の数がはるかに多いことを Kendo UI が認識できた場合、 10個だけ表示しています。

これは私が現在持っているものです：

        var initGrid = true;
        var grid2Data;

        function getDataSource()
        {
            return grid2Data.Data;
        }

        var grid;
        function getPageIndex()
        {
            if (!(grid)) {
                return 0;
            }
            return grid.pager.page() - 1;
        }

        function getPageSize() {
            if (!(grid)) {
                return 10;
            }
            return grid.pager.pageSize();
        }

        function getFilters() {
            if (!(grid)) {
                return "";
            }
            return grid.dataSource.filter();
        }

        function getSorts() {
            if (!(grid)) {
                return "";
            }
            return grid.dataSource.sort();
        }

        function getParams() {
            return getPageSize();
        }

        function postTest() {
            if (initGrid) {
                $.post('myurl' + getParams(), function (data) {
                    grid2Data = data;
                    $("#grid").kendoGrid({
                        dataBound: onDataBound,
                        dataSource: {
                            data: getDataSource(),
                            schema: {
                                model: {
                                    fields: {
                                        Email: { type: "string" },
                                        FullName: { type: "string" },
                                        LogCreateDate: { type: "date" },
                                        RoleName: { type: "string" },
                                        UserName: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 10
                        },
                        height: 300,
                        scrollable: false,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                        {
                            field: "Email",
                            title: "Email",
                            width: 100
                        },
                        {
                            field: "FullName",
                            title: "Full Name",
                            width: 100
                        },
                        {
                            field: "LogCreateDate",
                            title: "Created",
                            template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
                        },
                        {
                            field: "RoleName",
                            title: "Role",
                            width: 50
                        },
                        {
                            field: "UserName",
                            width: 100
                        }
                    ]
                    });
                    grid = $("#grid").data("kendoGrid");
                });
            }
            else {
            }
            initGrid = false;
        }

        $(document).ready(function () {
            postTest();
        });

私の問題は、これが 10 から 1-10 の要素であり、最初のページであることをグリッドが示していることです。私が指定したページ インデックスとアイテム数をグリッドに表示したいと思います。グリッドの要素数とページ インデックスを設定するにはどうすればよいですか? これは可能ですか？ありがとう。

4

1 に答える 1

5

に設定して で選択serverPagingした場合。ページ番号 ( )、ページ サイズ ( )、スキップするレコード数 ( )に関する情報をサーバーで受け取ります... ( http: //docs.kendoui.c​​om/api/framework/datasource で serverPaging を探します) 。代わりに、そのページのデータを含む配列だけでなく、行の総数も返す必要があります。次に、レコード数にアクセスするための関数を実装します。つまり、結果として次のオブジェクトを返すと仮定しましょう:DataSourcetruepagepageSizeskipschema.total

{
    rows: [ 
        { id: 1, col1: "col1.1", col2: "col1.2" },
        { id: 2, col1: "col2.1", col2: "col2.2" },
        { id: 3, col1: "col3.1", col2: "col3.2" }
    ],
    totalRows : 1000
}

次に、次のように実装できますschema.total。

schema: {
    total: function (response) {
        return response.totalRows;
    }
}

responseサーバーから受信したオブジェクトはどこにありますか。

注:実際には、この場合は次のように定義するだけで十分schemaです。

schema: {
    total: "totalRows";
    }
}

以来、フィールドtotalに直接格納されtotalRowsます。

例については、 http://demos.kendoui.c​​om/web/grid/remote-data.htmlを確認してください。

于 2012-12-04T20:30:00.837 に答える