6

Angular-Kendo グリッドでサーバー側のページネーションを実装する必要があります。Angular側からそれを行う方法について明確に理解できませんでした。

誰でも助けてもらえますか？

4

2 に答える 2

9

Kendo UI の最新バージョン(現在はベータ版)では、サーバー側のページングを実装する別の方法があります$http.post。これは、Angular が Kendo Grid 読み取り関数で提供する方法を使用します。

これは、データ ソースから取得するデータのエンドポイントとして MVC 5 コントローラーを使用する例です。pageandpageSizeをコントローラーに送信することでサーバーのページングをシミュレートします。必要に応じてtakeand を送信して、skip好きなように処理することもできます。

HTML マークアップ

<div ng-controller="MyCtrl">
    <kendo-grid k-options="mainGridOptions"></kendo-grid>
</div>

JavaScript

function MyCtrl($scope, $http) {
    $scope.mainGridOptions = {
        dataSource: {
            schema: {
                data: "Data",
                total: "Total"
            },
            transport: {
                read: function (e) {//You can get the current page, pageSize etc off `e`.
                    var requestData = {
                        page: e.data.page,
                        pageSize: e.data.pageSize,
                        type: "hello"
                    };
                    console.log(e);
                    $http({ method: 'POST', url: 'Home/DataSourceResult', data: requestData }).
                    success(function (data, status, headers, config) {
                        e.success(data);
                        //console.log(data.Data);
                    }).
                    error(function (data, status, headers, config) {
                        alert('something went wrong');
                        console.log(status);
                    });
                }
            },
            pageSize: 1,
            serverPaging: true,
            serverSorting: true
        },
        selectable: "row",
        pageable: true,
        sortable: true,
        groupable: true
    }
}

e宣言の引数から、現在の pageSize、page、take、skip などを取得できますread: function(e){}。

post 値は read 関数からの引数を参照するため、グリッドでページが更新されるたびに更新されます。これは、グリッドが変更されるたびに投稿値を更新するために使用できるものです。その後、グリッドは自身を再バインドします。

ホーム/DataSourceResult コントローラー

[HttpPost]
    public ActionResult DataSourceResult(int page, string type, int pageSize)
    {
        ResponseData resultData = new ResponseData();
        string tempData = "";
        if (page == 1)
        {
            tempData = "[{\"NAME\": \"Example Name 1\", \"DESCRIPTION\": \"Example Description 1\"},{\"NAME\": \"Example Name 2\",\"DESCRIPTION\": null}]";
        }
        else if (page == 2)
        {
            tempData = "[{\"NAME\": \"Example Name 3\", \"DESCRIPTION\": \"Example Description 3\"},{\"NAME\": \"Example Name 4\",\"DESCRIPTION\": \"Example Description 4\"}]";
        }
        resultData.Data = tempData;
        resultData.Total = "4";
        string json = JsonConvert.SerializeObject(resultData);
        json = json.Replace(@"\", "");
        json = json.Replace("\"[{", "[{");
        json = json.Replace("}]\"", "}]");
        return Content(json, "application/json");
    }

非常に基本的ですが、まさに私が必要としていたものであり、あなたにも役立つかもしれません. これにより、ネイティブの Angularhttp.get機能が使用されますが、Kendo Grid が重い作業のほとんどを行うことができます。

于 2014-09-02T21:19:18.847 に答える
2

Kendo グリッドは本質的にサーバー側のページングをサポートしています。少なくとも、そこを支援する便利な組み込み API があるため、すべての要素を接続するだけで済みます。これが私が思いついたもの、私のグリッドのデータソースです:

$scope.myGrid.dataSource = new kendo.data.DataSource({
    transport:{
               read:{
                      url: '/api/mygridapi?orderId=113',
                      dataType: 'json'
               }
            },
    pageSize: 5,
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true,
    serverGrouping: true,
    serverAggregates: true,
    schema:{
            total: function(response) {
                    return 13; // call some function, or some scope variable that know the total items count
                },
                model: {
                    id: "id",
                    fields: {
                        'id': { type: "number", editable: false },
                        'name': { type: "string", editable: true, nullable: false, validation: { required: true } },
                        'price': { type: "number", editable: true, nullable: false, validation: { required: true } },
                    }
                }
            }
        });

そして私のグリッドマークアップ:

<div kendo-grid k-pageable='{ "pageSize": 5, "refresh": true, "pageSizes": false }'
     k-height="'250px'" k-column-menu="false" k-filterable="true" k-sortable="true" k-groupable="true"
     k-data-source="myGrid.dataSource" k-options="{{myGrid.gridOpts}}" k-on-change="onSelectHandler(kendoEvent)">

そして私のWeb APIコントローラー：

[System.Web.Http.HttpGet]
public IEnumerable<ProductsDTO> Get(int orderId)
{
     NameValueCollection nvc = HttpUtility.ParseQueryString(Request.RequestUri.Query);
          //the name value captures the paging info that kendo automatically appends to the query string when it requests data
              //it has info such as teh current page, page size etc....
     int take = int.Parse(nvc["take"]);
     int skip = int.Parse(nvc["skip"]);

     return productsSvc.GetProductsOfOrder(orderId,skip,take);
}

私のサービスは を返しますが、IQueryableを返すと具体的なリストを返すこともできますIQueryable。Kendo はアイテムの合計数を把握するのに何もしませんでした。私にとっての主な問題は、グリッドが合計アイテム数を正しく認識していなかったことです。たとえば、最初のページ (最初の 5 アイテム) が表示されますが、残りのアイテムは認識されず、その結果、グリッドのページング ボタンが無効になりました。私はそれをちょっとハックしましたが、項目の総数を手動で設定しました。それは次のコード行でした:

schema:{
        total: function(response) {
                return 13; // call some function, or some scope variable that know the total items count
        },.........

私を悩ませているのは、アイテムの総数を手動で設定する必要があることです。データソースを設定するときに、トランスポート オブジェクトの読み取りプロパティに関数を渡すことができることに注意してください。その関数は、現在のページング/フィルタリング情報を含むオブジェクトをパラメーターとして持つため、それを使用してクエリ文字列を作成できます。デフォルトの kendo サーバー要求に依存するのではなく、手動で:

transport: {
           read: function (options) {
                 console.log(options);//see whats inside
                 //we can use the pageNo and pageSize property to create a query string manually
           }
}
于 2013-12-13T19:55:15.920 に答える