kendo ui 单击取消编辑数据grid减少的原因和治疗方法的数据
kendo ui单击取消编辑数据buttongrid数据缩减。原因grid编辑数据追打datasorce于data寻找阵列数据的存在。假定有不会加入,加入缺席。
首先一个样本:
html代码:
<div id="smsReceivesGird" style="width: 500px;"></div>
js代码:
<pre name="code" class="html">$(function(){
var smsReceivesData = eval([{"name":"zzz","mobileNumber":"134 1853 8146"},{"name":"zzz","mobileNumber":"134 1853 8146"},{"name":"zz","mobileNumber":"134 1853 8146"}]);
//console.log(dataSourceData);
var smsReceivesDataSource = new kendo.data.DataSource({
data: smsReceivesData,
schema: {
model: {
id: "id",
fields: {
name: { type: "string" },
mobileNumber: { type: "string" }
}
},
parse: function (data) {
$.each(data, function (index, item) {
item.id = index;
});
return data;
}
}, error: function () {
//display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
}
});
$("#smsReceivesGird").kendoGrid({
type: "json",
dataSource: smsReceivesDataSource,
editable: {
confirmation: true,
mode: "popup",
window: {
title: "新增"
}
},
scrollable: false,
toolbar: [{ name: "create", text: "新增接收人" }],
columns: [
{ field: "name", title: "姓名", width: "120px" },
{ field: "mobileNumber", title: "手机号码", width: "150px" },
{ command: [{ name: "edit", text: { edit: "编辑", cancel: "取消", update: "更新" } }, { name: "destroy", text: "删除" }], title: " ", width: "260px" }
],
edit: function (e) {
var editWindow = e.container.data("kendoWindow");
if (e.model.isNew()) {
editWindow.title('新增');
}
else {
editWindow.title('编辑');
}
}
});
});
效果图例如以下
点击编辑:
不做不论什么处理,点击取消button:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmd5dWFud2VpODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
这样的效果应该不是我们想看到的,我们如今採取例如以下的例如以下的处理,在smsReceivesDataSource中的schema.model里面加入一个字段:id: "id"。然后再schema对象中加入一个parse匿名函数,parse是关键。我们这个本地数组中没有一个能够唯一标示一行数据的key,所以我们要自己去构建一个自己主动增长的id,假设有能够唯一标示一行的数据的字段直接使用即可,能够省去写parse匿名函数 (比如 数据组中每一个对象都已个名为productid 的字段。然后它的值是guid值那么我们就能够写id:"productid")。
详细代码例如以下:
var smsReceivesData = eval([{"name":"zzz","mobileNumber":"134 1853 8146"},{"name":"zzz","mobileNumber":"134 1853 8146"},{"name":"zz","mobileNumber":"134 1853 8146"}]);
//console.log(dataSourceData);
var smsReceivesDataSource = new kendo.data.DataSource({
data: smsReceivesData,
schema: {
model: {
id: "id",
fields: {
name: { type: "string" },
mobileNumber: { type: "string" }
}
},
parse: function (data) {
$.each(data, function (index, item) {
item.id = index;
});
return data;
}
}, error: function () {
//display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
}
});
$("#smsReceivesGird").kendoGrid({
type: "json",
dataSource: smsReceivesDataSource,
editable: {
confirmation: true,
mode: "popup",
window: {
title: "新增"
}
},
scrollable: false,
toolbar: [{ name: "create", text: "新增接收人" }],
columns: [
{ field: "name", title: "姓名", width: "120px" },
{ field: "mobileNumber", title: "手机号码", width: "150px" },
{ command: [{ name: "edit", text: { edit: "编辑", cancel: "取消", update: "更新" } }, { name: "destroy", text: "删除" }], title: " ", width: "260px" }
],
edit: function (e) {
var editWindow = e.container.data("kendoWindow");
if (e.model.isNew()) {
editWindow.title('新增');
}
else {
editWindow.title('编辑');
}
}
});
继续反复上面的步骤,最后看到效果就会不一样
总结:
1.datasource中的schema.model.id是标示一行的数据的唯一性的字段
2.编辑取消的时候行数降低有两种解决的方法①id:"数组中的唯一标示字段",②构建自己的唯一标示字段,如代码所以在parse匿名方法中给每一个字段加入一个自己的id标示。
3.本地数据和远程数据出现该该解决方案是相同的问题。没有不同。
版权声明:本文博主原创文章,博客,未经同意不得转载。
kendo ui 单击取消编辑数据grid减少的原因和治疗方法的数据的更多相关文章
- Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- HTML5 UI框架Kendo UI Web中如何实现Grid网格控件本地化
Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 为了使得产品可以符合不同市场的本地化需求和语言,Kendo U ...
- easyUI datagrid 多行多列数据渲染异常缓慢原因以及解决方法
原因 最近,在优化之前公司帮联想(外包)做的一个老的后台管理系统,由于项目是基于easy UI框架,页面是后台用jsp实现的,再加上在公司推行前后端分离的实践,大部分项目都基于vue采用前后端分离去实 ...
- Web UI开发速速种草—Kendo UI for jQuery网格编辑操作概述
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- 实例:用户界面控件Kendo UI vs DevExpress对比评测一
在一次使用ASP.NET MVC进行开发的Web项目中,我们需要用户界面控件来帮助实现界面的大部分功能.由于项目比较复杂,我们最终确定对 Kendo UI 和 DevExpress 这两款国际知名的用 ...
- Kendo UI Validator 概述
Kendo UI Validator 概述 Kendo UI Validator 支持了客戶端校驗的便捷方法,它基於 HTML 5 的表單校驗功能,支持很多內置的校驗規則,同時也提供了自定義規則的便捷 ...
- Kendo UI 初始化 Data 属性
初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个 HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).ke ...
- Kendo UI Grid 批量编辑使用总结
项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...
随机推荐
- 1159 Palindrome(最小插入回文串)
标题效果 定的字符串长度的串和内容.中的字符可以在任何位置被插入.它至少需要为数字,这使得编程回文串串. 回文序列从左至右,从右到左和读取相同. 例如. aaaacbbbb它是一个回文串 aaab前面 ...
- 在JBuilder8中使用ANT
在JBuilder8中使用ANT 作者:翁驰原 在JBuilder8中,Ap ...
- 查看SQLSERVER内部数据页面的小插件Internals Viewer
原文:查看SQLSERVER内部数据页面的小插件Internals Viewer 查看SQLSERVER内部数据页面的小插件Internals Viewer 感觉internals viewer这个名 ...
- MongoDB学习笔记-基础概念
mongodb中基本的概念 文档.集合.数据库 与关系数据库的概念对比更容易理解
- 左右canvas.drawArc,canvas.drawOval 和RectF 关联
1.paint.setStyle(Paint.Style.STROKE) // radius="100dp" // interRadius="40dp" // ...
- Lua中的weak表——weak table(转)
弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...
- 在用TabbarController中出现navigationController 嵌套报错
假设出现: nested push animation can result in corrupted navigation bar Finishing up a navigation transit ...
- Apple Swift编程语言入门
1 简单介绍 今天凌晨Apple刚刚公布了Swift编程语言,本文从其公布的书籍<The Swift Programming Language>中摘录和提取而成.希望对各位的iOS&a ...
- 再谈Hibernate级联删除——JPA下的Hibernate实现一对多级联删除CascadeType.DELETE_ORPHAN
声明: 1.本文系原创,非抄袭或转载过来的. 2.本文论点都亲手做过实验论证. 3.本文所讲的Hibernate配置都基于注解的方式,hbm语法未提供. 非常多人对持久层概念搞不清JPA.Hibern ...
- MySQL 正則表達式搜索
products表例如以下: 1. 基本字符匹配 使用正則表達式与LIKE的差别,正則表達式是在整个列搜索,仅仅要prod_name中包括了所搜索的字符就能够了,而LIKE假设不用通配符,那么要求pr ...