0

Web サービスから返された複雑な json でグリッドを埋めたいと考えています。私のjsonには2つのものが含まれています：

  • data: グリッドを埋めるレコードの配列
  • 列: グリッドの構成 (レイアウト) を持つ配列

を指定して、グリッドに「データ」を正常に入力しましたschema.data。

私の問題は、データソースから「列」(JSON から) を取得して、gridOptions でグリッド プロパティを設定する方法です。それを行う方法はありますか？

これが私のJSONです

{
  "data": [
    {
      "id": 0,
      "firstname": "Dalton",
      "lastname": "Holden",
      "gender": "male",
      "email": "daltonholden@tellifly.com",
      "phone": "871-407-2973",
      "address": "22 National Drive, Brenton, Louisiana",
      "birthday": "21/04/1965",
      "currency": "GBP"
    },
    {
      "id": 1,
      "firstname": "Allyson",
      "lastname": "Odom",
      "gender": "female",
      "email": "allysonodom@tellifly.com",
      "phone": "922-548-2725",
      "address": "44 Quincy Street, Thynedale, Georgia",
      "birthday": "28/08/1961",
      "currency": "CHF"
    },
    {
      "id": 2,
      "firstname": "Sweet",
      "lastname": "Branch",
      "gender": "male",
      "email": "sweetbranch@tellifly.com",
      "phone": "880-593-2244",
      "address": "81 Fenimore Street, Veguita, Missouri",
      "birthday": "08/08/1953",
      "currency": "AUD"
    }
  ],

  "columns": [
    {
      "field": "firstname",
      "title": "Frist Name",
      "width": 200,
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "lastname",
      "title": "Last Name",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "gender",
      "title": "Gender",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "email",
      "title": "e-mail",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "phone",
      "title": "Phone Number",
      "attributes": {
        "class": "",
        "style": "text-align: right;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: right;"
      }
    },
    {
      "field": "address",
      "title": "Address",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "birthday",
      "title": "Birthday",
      "attributes": {
        "class": "",
        "style": "text-align: center;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: center;"
      }
    },
    {
      "field": "currency",
      "title": "Currency",
      "attributes": {
        "class": "",
        "style": "text-align: center;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: center;"
      }
    }
  ]
}

そして、ここに私のコードがあります:

var customersSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://....",
                dataType: "json"
            }
        },
        schema: {
            data: "data"
        }
    });

$scope.mainGridOptions = {
        dataSource: customersSource,
        //columns: Here it should be something like --> customersSource.columns,
        height: 500,
        scrollable: true,
        selectable: true
    };
4

1 に答える 1

1

スキーマは、ビュー、フィルター、並べ替えなどを作成するために DataSource が必要とするデータのフェッチと解析のみを処理します。

1 つの Ajax リクエストからの「ハイブリッド」コンテンツを処理する組み込みの方法はありません。

ただし、回避策を作成します。requestEnd イベントを使用して不足しているデータにアクセスし、後で使用できるように保存します。

var customersSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://....",
            dataType: "json"
        }
    },
    schema: {
        data: "data"
    },
    requestEnd: function(e) {
        // According to the documentation, this gives you a reference to the datasource instance itself.
        this.whatever = e.response.columns;
    }
});

これで、後でこれを使用できます。 

$scope.mainGridOptions = {
    dataSource: customersSource,
    columns: customersSource.whatever,
    height: 500,
    scrollable: true,
    selectable: true
};
于 2014-06-12T09:28:33.543 に答える