Kendo ui 剑道UI数据源和复杂JSON
我想用从Web服务返回的复杂json填充网格。 我的json包含两个方面:Kendo ui 剑道UI数据源和复杂JSON,kendo-ui,kendo-datasource,Kendo Ui,Kendo Datasource,我想用从Web服务返回的复杂json填充网格。 我的json包含两个方面: 数据:包含将填充网格的记录的数组 列:具有网格配置(布局)的数组 通过指定schema.data,我成功地用“数据”填充了网格 我的问题是如何从数据源获取“列”(来自JSON),以便在gridOptions中设置网格属性。 有办法吗 这是我的JSON { "data": [ { "id": 0, "firstname": "Dalton", "lastname": "H
- 数据:包含将填充网格的记录的数组
- 列:具有网格配置(布局)的数组
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
};
模式只负责获取和解析数据源创建视图、筛选、排序等所需的数据 没有内置的方法来处理来自一个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
};