Kendo Web UI Grid数据绑定,删除,编辑,并把默认英文改成中文
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 } }
指定指段显示类型,验证是否必填,可能描述的不是很详细我觉得大家看看源代码应该理解大概意思。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。