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 } }

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

Kendo Web UI Grid数据绑定,删除,编辑,并把默认英文改成中文的更多相关文章

  1. Kendo Web UI Grid添加一个html控件如(checkbox,button)

    在Kendo Web UI Grid增加一个控件如效果图: <div id="grid1"></div><script> $("#gr ...

  2. Kendo Web UI Grid里时间格式转换

    我和大家分享一下我的kendo的学习心得.如果不好的地方多多包含或者给我留言请看图 kendo里时间格式如图Oder Date列里的格式.但是我们想把时间转换成中国人习惯的格式.如Shipped Da ...

  3. Asp.net mvc Kendo UI Grid的使用(三)

    上一篇的操作已经能够显示基本数据了,这次介绍一下如何进行数据操作以及显现自定义命令. 第一步当然还是准备数据: [HttpPost] public ActionResult PersonalList_ ...

  4. Asp.net mvc Kendo UI Grid的使用(二)

    上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用 先上效果图: 要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc. ...

  5. [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)

    有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...

  6. kendo ui grid 汉化

    加入js引用 <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" r ...

  7. kendo ui grid选中行事件,获取combobox选择的值

    背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...

  8. 【转】谈谈Google Polymer以及Web UI框架的未来

    原文转自:http://www.csdn.net/article/2013-05-27/2815450-google-polymer 摘要:开发者Axel Rauschmayer在自己的博客上详解了G ...

  9. Google Polymer以及Web UI框架

    时代在进步,原本前端只是用来简单的数据显示以及提交数据到后端处理逻辑的地方,而随着SPA的发展,前端的逻辑也越来越是庞大,恰巧,今天看微博的时候,发现一个概念讨论的比较多,就是 Web Compone ...

随机推荐

  1. How do I set the default schema for a user in MySQL

    http://stackoverflow.com/questions/12426320/how-do-i-set-the-default-schema-for-a-user-in-mysql   up ...

  2. 转--Oracle 审计和测试操作

    http://blog.itpub.net/21605631/viewspace-759640/转 Oracle 审计和测试操作 :: 分类: Linux 1.1 相关参数 AUDIT_SYS_OPE ...

  3. JS动态调用方法名示例介绍

    先看看JS的一个函数  JavaScript eval() 函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描 ...

  4. 怎么加 一个 hyperlink 到 e-mail template for CRM

    Recently I had a client inquire as to how one would insert a hyperlink into a CRM email template. Wh ...

  5. apt-get install jdk

    怕忘记,记录下: sudo apt-get install python-software-properties sudo add-apt-repository ppa:webupd8team/jav ...

  6. 【译】基于主机的卡仿真(Host-based Card Emulation)

    基于主机的卡仿真(Host-based Card Emulation) 能提供NFC功能很多Android手机已经支持NFC卡模拟.在大多数情况下,该卡是由设备中的单独的芯片仿真,所谓的安全元件.由无 ...

  7. Sublime text3所遇到的问题

    sublime text3的下载地址:https://www.sublimetext.com/ 解决sublime text上不能使用交互的input的输入问题 通过安装sublimeREPL插件解决 ...

  8. html跳转指定位置-利用锚点

    比如我现在 a.html 的时候,我想跳转到 b.html ,并且是 b.html 的某一个位置,用 <a href=>, a.html里: <a href="b.html ...

  9. weblogic 整合cxf 报错:cannot create a secure XmlInputFactory

    weblogic 整合cxf 报错:cannot create a secure XmlInputFactory ================================ ©Copyright ...

  10. Feign自定义编程配置

    介绍 在Spring Cloud中,Feign的默认配置类是FeignClientsConfiguration,该类定义了Feigh默认使用的编码器.解码器.所使用的契约等.Spring Cloud允 ...