Kendo Web UI 是个不错的Jquery框。可惜老外写的，很多都是默认的英文，当然我们也可以设置成中文，接下来，我们就看看Grid是如何实现的数据绑定（Kendo Grid数据绑定实现有很多方法我这只是一种，我觉得还比较简洁）和如何设置中文。先看看图

数据实现

<div id="grid">

</div>
<script type="text/javascript">

$(function () {
$.ajaxSettings.async = false;
$.ajax({
url: 'MyCostView',
type: 'get',
success: function (e) {
$("#grid").kendoGrid({
columns: [
{ field: "PayName", title: "消费者", width: "90px" },
{ field: "PayMoney", title: "消费金额", width: "100px" }, /* group by this column to see the footer template */
{ field: "PayType", title: "消费类型", width: "100px" },
{ field: "PayWay", title: "消费方式", width: "100px" },
{ field: "PayDescribe", title: "消费详细", width: "200px" },
{ field: "PayAddress", title: "消费地址", width: "150px" },
{ field: "WeekDate", title: "消费日期", width: "100px" },
{ field: "PayDate", title: "具体日期", format:"{0:yyyy/MM/dd}", width: "100px" },
{ command: [{ name: "edit", text: { edit: "编辑", cancel: "取消", update: "更新" } }, { name: "destroy", text: "删除" }] }
],
toolbar: [{ name: "create", text: "新增" }],
editable: {
mode: "popup",
window: {
title: "消费单"
}
, template: kendo.template($("#popup-editor").html())
},
save: function (e) {

}

,
dataSource: {
data: e
, schema: {
model: {
id: "id"
, fields: {
PayName: { type:"string", validation: { required: true } },
PayMoney: { type: "number", validation: { min: 0, required: true } },
PayType: { type:"string",validation: { required: true } },
PayWay: { type: "string", validation: { required: true } },
PayDescribe: { type: "textarea", validation: { required: true } },
PayAddress: { type: "textarea" },
WeekDate: { type: "string", validation: { required: true } },
PayDate: {
type: "date", validation: { min: 0, required: true }
}
}
}
}

},
pageable: {
pageSizes: true,
buttonCount: 10
}
});
}
})
});
</script>

接下来我为大家 拆分一下数据绑定首先我们先要设置要绑定的字段

$("#grid").kendoGrid({
columns: [
{ field: "PayName", title: "消费者", width: "90px" },
{ field: "PayMoney", title: "消费金额", width: "100px" }, /* group by this column to see the footer template */
{ field: "PayType", title: "消费类型", width: "100px" },
{ field: "PayWay", title: "消费方式", width: "100px" },
{ field: "PayDescribe", title: "消费详细", width: "200px" },
{ field: "PayAddress", title: "消费地址", width: "150px" },
{ field: "WeekDate", title: "消费日期", width: "100px" },
{ field: "PayDate", title: "具体日期", format:"{0:yyyy/MM/dd}", width: "100px" },
{ command: [{ name: "edit", text: { edit: "编辑", cancel: "取消", update: "更新" } }, { name: "destroy", text: "删除" }] }
]这样就可以因为默认的改成中文。效果大家自己去试试

接下来就是

editable: {
mode: "popup",
window: {
title: "消费单"
}
}

当编辑的时候就会弹出窗口。kendo会默认设置好所有展现在grid的字段如图

save: function (e) {

}

当单击更新的时候出发事件，e.model.字段

dataSource: {
data: e
, schema: {
model: {
id: "id"
, fields: {
PayName: { type:"string", validation: { required: true } },
PayMoney: { type: "number", validation: { min: 0, required: true } },
PayType: { type:"string",validation: { required: true } },
PayWay: { type: "string", validation: { required: true } },
PayDescribe: { type: "textarea", validation: { required: true } },
PayAddress: { type: "textarea" },
WeekDate: { type: "string", validation: { required: true } },
PayDate: {
type: "date", validation: { min: 0, required: true }
}
}
}
}

},
pageable: {
pageSizes: true,
buttonCount: 10
}

上面这个是数据绑定与分页

fields: {
PayName: { type:"string", validation: { required: true } },
PayMoney: { type: "number", validation: { min: 0, required: true } },
PayType: { type:"string",validation: { required: true } },
PayWay: { type: "string", validation: { required: true } },
PayDescribe: { type: "textarea", validation: { required: true } },
PayAddress: { type: "textarea" },
WeekDate: { type: "string", validation: { required: true } }

指定指段显示类型，验证是否必填，可能描述的不是很详细我觉得大家看看源代码应该理解大概意思。