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: "&nbsp;", 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减少的原因和治疗方法的数据的更多相关文章

  1. Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  2. Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  3. HTML5 UI框架Kendo UI Web中如何实现Grid网格控件本地化

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 为了使得产品可以符合不同市场的本地化需求和语言,Kendo U ...

  4. easyUI datagrid 多行多列数据渲染异常缓慢原因以及解决方法

    原因 最近,在优化之前公司帮联想(外包)做的一个老的后台管理系统,由于项目是基于easy UI框架,页面是后台用jsp实现的,再加上在公司推行前后端分离的实践,大部分项目都基于vue采用前后端分离去实 ...

  5. Web UI开发速速种草—Kendo UI for jQuery网格编辑操作概述

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  6. 实例:用户界面控件Kendo UI vs DevExpress对比评测一

    在一次使用ASP.NET MVC进行开发的Web项目中,我们需要用户界面控件来帮助实现界面的大部分功能.由于项目比较复杂,我们最终确定对 Kendo UI 和 DevExpress 这两款国际知名的用 ...

  7. Kendo UI Validator 概述

    Kendo UI Validator 概述 Kendo UI Validator 支持了客戶端校驗的便捷方法,它基於 HTML 5 的表單校驗功能,支持很多內置的校驗規則,同時也提供了自定義規則的便捷 ...

  8. Kendo UI 初始化 Data 属性

    初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个  HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).ke ...

  9. Kendo UI Grid 批量编辑使用总结

    项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...

随机推荐

  1. 1159 Palindrome(最小插入回文串)

    标题效果 定的字符串长度的串和内容.中的字符可以在任何位置被插入.它至少需要为数字,这使得编程回文串串. 回文序列从左至右,从右到左和读取相同. 例如. aaaacbbbb它是一个回文串 aaab前面 ...

  2. 在JBuilder8中使用ANT

    在JBuilder8中使用ANT                                                            作者:翁驰原    在JBuilder8中,Ap ...

  3. 查看SQLSERVER内部数据页面的小插件Internals Viewer

    原文:查看SQLSERVER内部数据页面的小插件Internals Viewer 查看SQLSERVER内部数据页面的小插件Internals Viewer 感觉internals viewer这个名 ...

  4. MongoDB学习笔记-基础概念

    mongodb中基本的概念 文档.集合.数据库 与关系数据库的概念对比更容易理解

  5. 左右canvas.drawArc,canvas.drawOval 和RectF 关联

    1.paint.setStyle(Paint.Style.STROKE) // radius="100dp" // interRadius="40dp" // ...

  6. Lua中的weak表——weak table(转)

    弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...

  7. 在用TabbarController中出现navigationController 嵌套报错

    假设出现: nested push animation can result in corrupted navigation bar Finishing up a navigation transit ...

  8. Apple Swift编程语言入门

    1   简单介绍 今天凌晨Apple刚刚公布了Swift编程语言,本文从其公布的书籍<The Swift Programming Language>中摘录和提取而成.希望对各位的iOS&a ...

  9. 再谈Hibernate级联删除——JPA下的Hibernate实现一对多级联删除CascadeType.DELETE_ORPHAN

    声明: 1.本文系原创,非抄袭或转载过来的. 2.本文论点都亲手做过实验论证. 3.本文所讲的Hibernate配置都基于注解的方式,hbm语法未提供. 非常多人对持久层概念搞不清JPA.Hibern ...

  10. MySQL 正則表達式搜索

    products表例如以下: 1. 基本字符匹配 使用正則表達式与LIKE的差别,正則表達式是在整个列搜索,仅仅要prod_name中包括了所搜索的字符就能够了,而LIKE假设不用通配符,那么要求pr ...