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. http执行过程分析

    执行过程: 1.用户在浏览器(客户端)里输入或者点击一个网址链接: 2.浏览器通过网址域名查找ip地址.DNS查找方式是通过浏览器缓存(会记录DNS记录)→系统缓存→TCP/IP参数中设置的首选DNS ...

  2. position:fixed和scroll实现div浮动【示例】

    前言 在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解,毕竟我不是搞前端的,因为自己建站毕竟每一步都必须自己来,这边只是做个记 ...

  3. Python中的GIL

    •start 线程准备就绪,等待CPU调度 •setName 为线程设置名称 •getName 获取线程名称 •setDaemon 设置为后台线程或前台线程(默认) 如果是后台线程,主线程执行过程中, ...

  4. Java 8新特性

    Java 8版本最大的改进就是Lambda表达式,其目的是使Java更易于为多核处理器编写代码:其次,新加入的Nashorn引擎也使得Java程序可以和JavaScript代码互操作:再者,新的日期时 ...

  5. [LeetCode]题解(python):120 Triangle

    题目来源 https://leetcode.com/problems/triangle/ Given a triangle, find the minimum path sum from top to ...

  6. [HDOJ4609]3-idiots(FFT,计数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4609 题意:n个数,问取三个数可以构成三角形的组合数. FFT预处理出两个数的组合情况,然后枚举第三个 ...

  7. HDU 1224 Free DIY Tour

    题意:给出每个城市interesting的值,和城市之间的飞行路线,求一条闭合路线(从原点出发又回到原点) 使得路线上的interesting的值之和最大 因为要输出路径,所以用pre数组来保存前驱 ...

  8. 常见排序算法基于JS的实现

    一:冒泡排序 1. 原理 a. 从头开始比较相邻的两个待排序元素,如果前面元素大于后面元素,就将二个元素位置互换 b. 这样对序列的第0个元素到n-1个元素进行一次遍历后,最大的一个元素就“沉”到序列 ...

  9. wildfly与mysql数据库连接问题

    wildfly报错: Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link f ...

  10. 2018第一发:记一次【Advanced Installer】打包之旅

    一.前言 2017年最后几天,你们都高高兴兴的跨年,博主还在加班制作.net安装包.因为年前要出来第一版的安装包,所以博主是加班加点啊.本来想用VS自带的制作工具,不过用过的人都知道,真是非常好(to ...