5

サーバーがデータとともに行の総数を返すJSONデータをKendoUIグリッドに入力しようとしていますが、serverPagingを正しく機能させるのに問題があります。グリッドのdataSourceを次のように作成して割り当てます。

                var oDS = new kendo.data.DataSource({
                    schema: {
                        data:  "data",
                        total: "total"
                    },
                    data: self.grdTableData,
                    serverPaging: true,
                    pageSise: 50,
                    total: joOutput["TotalRecords"]
                });

                grdTableResults.setDataSource(oDS);

最初のページには939レコードの最初の50が表示されますが、1ページしかありません（ナビゲーション矢印は何にも応答しません）。NaN-939アイテムのNaNと、グリッドの中央にある回転するドットの円は決して表示されません。消えます。

私が見たすべての例で異なる点の1つは、$。ajax呼び出しと.doneでのJSONデータの処理が「transport：read」を使用しないことですが、どのように送信するかを考えています。データとそれを取り戻すことは重要ではありません（または、すべてのページ要求が新しいサーバー読み取りであるため、それは重要ですか？）。しかし、http：//jsfiddle.net/ruse​​v/ Lnkug /の例で設定されているものと同様のデータソース値を設定しているように見えても、サーバーのページングを適切に処理するのに十分なことはしていないと思います。。次に、「take」と「skip」の値がわかりませんが、サーバーに送信する「startIndex」と「rowsPerPage」があり、そこで使用できます。グリッドは、表示しているページを教えてくれると思います。「startIndex」を適切に設定でき、「Pages per Page」ドロップダウンがある場合は、「rowsPerPage」の値をリセットできますか？

とにかく、すべての初心者の質問をお詫びします。どんな助けや提案も心から感謝しています。ありがとう！

4

2 に答える 2

7

輸送：読む

値を関数に設定することで、カスタムロジックがある場合でも、「transport：read」を使用できるはずです。この機能を実証するためにJSフィドルを作成しました。

dataSource: {
    serverPaging: true,
    schema: {
        data: "data",
        total: "total"
    },
    pageSize: 10,
    transport: {
        read: function(options) {
            var data = getData(options.data.page);
            options.success(data);
        }
    },
    update: function() {}
}

読み取り関数には、page、pageSize、skip、takeのページングプロパティを含むパラメーターが含まれています。1つの操作に関数が含まれている場合は、すべてのトランスポート操作が関数である必要があることに注意してください。

startIndexとrowsPerPage

サーバーがこれらのパラメーターを受け入れる場合は、読み取り関数でそれらを送信できるはずです。カスタマイズされたデータを投稿する新しいajax呼び出しを作成します

var ajaxPostData = { startIndex: options.data.skip, rowsPerPage: options.data.pageSize }
于 2013-04-23T09:56:13.533 に答える
2

これは、剣道グリッドでサーバーページングを実装するために使用しているサーバーサイドラッパーのコードです。

@(Html.Kendo().Grid<IJRayka.Core.Utility.ViewModels.ProductDto>()
.Name("productList")
.Columns(columns =>
{
    columns.Bound(prod => prod.Name);
    columns.Bound(ord => ord.Brand);
    columns.Bound(ord => ord.UnitPackageOption);
    columns.Bound(ord => ord.CategoryName);
    columns.Bound(ord => ord.Description);
})
.Pageable(pager => pager.PageSizes(true))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.PrefixUrlParameters(false)
.DataSource(ds => ds.Ajax()
            .Model(m => m.Id(ord => ord.ID))
            .PageSize(5)
            .Read(read => read
                .Action("FilterProductsJson", "ProductManagement")
                .Data("getFilters"))
            )
)

URL /サービスからデータを取得するときにカスタムフィルターパラメーターをグリッドに渡すjavascript関数はどこgetFiltersにありますか？

function getFilters() {
    return {
        brand: $("#Brand").val(),
        name: $("#Name").val(),
        category: $("#CategoryName").val()
    };
}

さらにDataSourceRequest、以下のように剣道のクラスを使用してコントローラーのアクションメソッドを実装する必要があります。そうしないと、希望どおりに機能しません。

public JsonResult FilterProductsJson([DataSourceRequest()] DataSourceRequest request,
                                // three additional paramerters for my custom filtering
                                string brand, string name, string category)
{
    int top = request.PageSize;
    int skip = (request.Page - 1) * top;
    if(brand != null)
        brand = brand.Trim();
    if(name != null)
        name = name.Trim();
    if(category != null)
        category = category.Trim();

    var searchResult = new ManageProductBiz().GetPagedFilteredProducts(brand, name, category, top, skip);
    // remove cyclic references:
    searchResult.Items.ForEach(prd => prd.Category.Products = null);

    return Json(new DataSourceResult { Data = searchResult.Items, Total = searchResult.TotalCount }, JsonRequestBehavior.AllowGet);
}
于 2013-08-06T23:01:58.123 に答える