热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

datagrid直接编辑保存的“设计缺陷”之二

datagrid直接编辑保存的“设计缺陷”之二

datagrid直接编辑保存的“设计缺陷”只是解决了如何让后台能接收到前台的数据

但是,如何处理前台数据短暂的保存,对我来说还是有点疑惑~

所以本篇文章是接上篇文章的后续处理~重点并不是在讨论“设计缺陷”了~


因为貌似js中没有集合类型,所以这里用js中的array来保存数据。

那么这里有几个问题:

1、每次编辑完成(endEdit)的时候将编辑行保存,这里完成编辑包括三种情况(保存、新增和点击另一行)

值得注意的是,这里点击datagrid之外的input或者其他元素不会使datagrid正在编辑的行失去焦点~

2、删除的时候要能够对应删除array中的元素(用什么来关联?)

最初的想法是:若本来就存在的记录有主键id来标识,这样删除行的时候就可以关联删除array中的数据了,但是若是新建的呢?还未被分配id该怎么办呢?

遂否定了这个想法。

第二个想法:在页面上人为给它们分配唯一的标识符,这个想法应该是可行的,但是略显麻烦

有没有更简单的方法呢?忽然想到列表中的数据和array中的数据其实是一一对应的

列表中的数据完全就是array中数据结构的可视化展示嘛!其顺序也是完全一致的,那么其实用下标就可以将两者关联起来了!


根据官网上的demo,提供了endEdit这个方法,用于完成编辑时调用,并且在其中做了校验,下面这个是我的改写

其中,翻译并未用官网的做法,而是用了velocity的Directive来实现的:这样实现的好处是:

不仅可以翻译,且将翻译用的json缓存在页面上,这样都是local数据,combobox可以直接使用这个json,无需remote

    // 1、验证行校验是否通过,若通过则停止编辑并将editIndex置为undefined
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#dispatches_details').datagrid('validateRow', editIndex)){	// 验证通过
        	// 如下的方法是官网上用来实现翻译的,算是一个小trick吧  
            // var ed = $('#dispatches_details').datagrid('getEditor', {index:editIndex,field:'reason'});
            // var reason = $(ed.target).combobox('getText');
            // $('#dispatches_details').datagrid('getRows')[editIndex]['reasonDes'] = reason;
            
            // endEdit的解释如下:finishing editing but before destroying editors
            // 也就是说完成编辑,但是还并未释放编辑器,也就是说rows里如combobox之类的值还是value,而不是text
            $('#dispatches_details').datagrid('endEdit', editIndex);
            // 每次endEditing都需要保存
	        var row = $('#dispatches_details').datagrid('getRows')[editIndex];
	        if(row){	// 防止不编辑,直接accept(),可能为null
				// 直接把json传到后台,发个毛form
        		jsonArr.splice(editIndex, 1, $.toStr(row));
	        }
        	
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }


这里用到了js中操作array的一个方法——splice,下面是从w3school引用的方法说明,注意,这个方法会改变原始数组,不同于slice

语法

arrayObject.splice(index,howmany,item1,.....,itemX)
参数 描述
index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。

返回值

类型 描述
Array 包含被删除项目的新数组,如果有的话。

jsonArr.splice(editIndex, 1, $.toStr(row)); 这样一句话也就实现了替换array元素的功能!




推荐阅读
  • t-io 2.0.0发布-法网天眼第一版的回顾和更新说明
    本文回顾了t-io 1.x版本的工程结构和性能数据,并介绍了t-io在码云上的成绩和用户反馈。同时,还提到了@openSeLi同学发布的t-io 30W长连接并发压力测试报告。最后,详细介绍了t-io 2.0.0版本的更新内容,包括更简洁的使用方式和内置的httpsession功能。 ... [详细]
  • PDF内容编辑的两种小方法,你知道怎么操作吗?
    本文介绍了两种PDF内容编辑的方法:迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器,用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC,则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ... [详细]
  • 本文详细介绍了Vim编辑器中的三种模式(命令模式、末行模式和编辑模式)以及它们之间的操作区别和切换方法。Vim编辑器凭借其多种命令快捷键和高效率的操作方式,得到了广大厂商和用户的认可。对于想要高效操作文本的用户来说,了解这些模式的使用方法是必不可少的。 ... [详细]
  • 本文介绍了三种方法来关闭win7电脑开机硬盘自检,分别是使用命令提示符、注册表编辑器和bios设置界面。通过取消硬盘自检可以加快电脑启动速度。详细步骤和操作说明在正文中有详细介绍。 ... [详细]
  • Win7系统如何实现Ctrl+Alt+Del热键组合呼出任务管理器
    本文介绍了在Win7系统中如何通过组策略编辑器设置,实现Ctrl+Alt+Del热键组合呼出任务管理器的方法。通过删除原有的项目并设置呼出任务管理器,用户可以方便地使用Ctrl+Alt+Del热键组合来打开任务管理器。 ... [详细]
  • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
  • OC渲染器和阿诺德渲染器的特点及适用范围
    本文介绍了C4D软件自带的渲染器效果较差的问题,并推荐了四款C4D渲染器,其中包括OC渲染器和阿诺德渲染器。OC渲染器渲染速度快,简单易用,特别适合小团队和个人使用,而阿诺德渲染器具有超快的预览功能和真实的渲染效果,适合在体积光处理方面使用。两款渲染器都支持多个C4D版本和不同操作系统。 ... [详细]
  • 如何实现JDK版本的切换功能,解决开发环境冲突问题
    本文介绍了在开发过程中遇到JDK版本冲突的情况,以及如何通过修改环境变量实现JDK版本的切换功能,解决开发环境冲突的问题。通过合理的切换环境,可以更好地进行项目开发。同时,提醒读者注意不仅限于1.7和1.8版本的转换,还要适应不同项目和个人开发习惯的需求。 ... [详细]
  • 如何更改电脑系统的自动校时服务器地址?
    本文介绍了如何通过注册表编辑器更改电脑系统的自动校时服务器地址。通过修改注册表中的数值数据或新建字符串数值的方式,可以将默认的时钟同步服务器地址更改为自己所需要的域名或IP地址。详细步骤包括双击时间区域,点击internet时间,勾选自动校正域名设置定时等操作。 ... [详细]
  • OCI连接MySQL_PLSQL Developer连接远程数据库OCI客户端安装方法
    本文介绍了使用OCI客户端连接MySQL和PLSQL Developer连接远程数据库的安装方法,避免了在本地安装Oracle数据库或类似的开发套件的麻烦,同时解决了PLSQL Dev连接远程Oracle时的配置问题。 ... [详细]
  • 使用chrome编辑器实现网页截图功能的方法
    本文介绍了在chrome浏览器中使用编辑器实现网页截图功能的方法。通过在地址栏中输入特定命令,打开控制台并调用命令面板,用户可以方便地进行网页截图操作。 ... [详细]
  • 开发笔记:spring boot项目打成war包部署到服务器的步骤与注意事项
    本文介绍了将spring boot项目打成war包并部署到服务器的步骤与注意事项。通过本文的学习,读者可以了解到如何将spring boot项目打包成war包,并成功地部署到服务器上。 ... [详细]
  • 本文介绍了Windows Vista操作系统中的用户账户保护功能,该功能是为了增强系统的安全性而设计的。通过对Vista测试版的体验,可以看到系统在安全性方面的进步。该功能的引入,为用户的账户安全提供了更好的保障。 ... [详细]
  • Unity3D引擎的体系结构和功能详解
    本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具,用于创建交互式3D应用程序。它由游戏引擎和编辑器组成,支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费,适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]
  • wpf+mvvm代码组织结构及实现方式
    本文介绍了wpf+mvvm代码组织结构的由来和实现方式。作者回顾了自己大学时期接触wpf开发和mvvm模式的经历,认为mvvm模式使得开发更加专注于业务且高效。与此同时,作者指出mvvm模式相较于mvc模式的优势。文章还提到了当没有mvvm时处理数据和UI交互的例子,以及前后端分离和组件化的概念。作者希望能够只关注原始数据结构,将数据交给UI自行改变,从而解放劳动力,避免加班。 ... [详细]
author-avatar
dmcm0005
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有