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

缺乏、安全感 2022-08-11 10:28 101阅读 0赞

[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)

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; width:155px; background-color:rgb(213,213,213)"> 参数</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> index</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> howmany</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 必需。要删除的项目数量。如果设置为 0，则不会删除项目。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> item1, ..., itemX</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 可选。向数组添加的新项目。</td> 
  </tr> 
 </tbody> 
</table>

**返回值**

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

[datagrid]: http://blog.csdn.net/u012345283/article/details/38750807