kendo Grid官网提供的远程加载数据的方式在实际中其实不可行的。下面是它在官网中加载数据的例子：
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",//官网中数据的type
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
//它这边ajax返回的数据是一个数组列表
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
</script>
</div>在demo里面远程的数据返回的是一个类似于数据列表，但是在实际项目中，我们ajax返回的是一个对象集合，这个对象里面存放了一个数组，安装它上面的方式是不能直接加载出数据的。
$("#example").kendoGrid({
dataSource: {
transport: {
read: url,
dataType:"json"
},
schema: {
data:"data",//ajax返回的对象
model: {
//数据字段的映射
fields: {
id: { type: "string" },
status: { type: "string" },
queue: { type: "string" },
submitTime: { type: "String" },
executionHost: { type: "string" },
name:{type:"string"}
}
}
},
//分页信息
pageSize: 11,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
selectable: "multiple",
navigatable: true,
height: 473,
filterable: true,
sortable: true,
pageable: true,
//列的映射
columns: [{
field:"id",
title:$.i18n.prop("appform.job.inf.id")
}, {
field:"status",
title: $.i18n.prop("appform.job.inf.stat")
}, {
field:"queue" ,
title: $.i18n.prop("appform.job.inf.queue")
}, {
field:"submitTime" ,
title: $.i18n.prop("appform.job.inf.submitTime"),
format: "{0:MM/dd/yyyy}"
},{
field:"executionHost" ,
title: $.i18n.prop("appform.job.inf.executeNode")
}, {
field:"name" ,
title: $.i18n.prop("appform.job.inf.name")
}
]
});
