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 } }
指定指段顯示類型，驗證是否必填，可能描述的不是很詳細我覺得大家看看源代碼應該理解大概意思。