subGrid实现内外datagrid都可编辑功能

刺骨的言语ヽ痛彻心扉 2022-08-13 00:41 170阅读 0赞

前一篇文章介绍了如何创建一个拥有subGrid的datagrid，不过仅仅是展示数据，并未涉及到编辑

那么，若是需要subGrid实现可编辑功能该怎么做呢？

要解决这个问题首先得有一个清晰的思路和明确的目标，到底需要将subGrid打造成怎么样呢？

还是用一个具体的例子来说明问题，就拿最近在做的项目来看吧，有一个需求是这样的：

1、显示所有派去维修的记录（一人一条），且每条记录有一些费用数据

2、每条派工记录中有详细的耗材记录

3、耗材要有添加修改删除的功能

这其实就是典型的”一条记录头，下面多条明细“的情况，稍微分析一下整理出

1、派工记录也就是主datagrid中要显示的数据（subGrid的记录头），并且该数据无法添加删除（该数据从别的表中直接拿过来的），只能修改

2、耗材记录也就是subGrid中要显示的数据，可以增删改

**如何展现呢？**

1、主datagrid一个toolbar，然后每一个subGrid都有各自的toolbar

2、只有主datagrid一个toolbar，但是却可以根据情况来执行不同datagrid中的增删改

要说实现的难度肯定是第一种要小一些，但是我却鬼使神差的选择了第二种展现方式，结果碰了不少壁

**试试吧！**

1、先按照上一篇文章创建好subGrid

2、为需要编辑的列设置editor（包括主datagrid和subGrid）

3、添加两个公共变量，detailIndex表示当前的主datagrid中的索引，editIndex表示subGrid中编辑行的索引

4、那么何时给两个变量赋值呢？detailIndex的赋值有2个地方

一是在主datagrid的onClickRow事件中，二是在选中subGrid中的记录时自动的变成该subGrid的头记录，并且将该记录选中

editIndex的赋值则在“编辑开始”的时候（subGrid的append和onClickRow方法中），这和之前介绍datagrid行编辑那篇文章中的一样。

5、添加编辑的一些方法，endEditing(), append(), onClickRow(index)等

6、如何写endEditing()，也就是说在“终止编辑”时我们要做什么

一、校验该行，若通过则将原记录去选（防止不在同一个subGrid中）并终止编辑，若不通过则无法终止编辑 二、暂存数据（等所有数据保存完之后一起提交）

7、append()：先要endEditing()，之后根据detailIndex来决定添加在哪一个subGrid里，并且记录editIndex

8、两个onClickRow

一、主datagrid中的onClickRow：这里要终止2个编辑，一个是datagrid中头记录的编辑，这个无校验，简单的通过datagrid的endedit就可以了。另外一个是subGrid的记录的编辑，这个通过endEditing()。都搞定了之后，开始编辑click的主datagrid中的头记录

onClickRow: function(index){
       				if(endEditing()){// 若有编辑行，先终止
    	   				// 若是没展开的话，那么其实datagrid还没初始化，只是一个table而已
    					$(this).datagrid('endEdit', detailIndex);	// 终止外层编几行
    	   				$(this).datagrid('selectRow', index).datagrid('beginEdit', index);
    	   				detailIndex = index;
       				}else{
       					$(this).datagrid('selectRow', detailIndex);
       				}
       			}

二、subGrid的onClickRow：先endEditing()，通过之后，开始编辑选中的subGrid中的记录，将该subGrid的头记录选中

onClickRow: function(index){
    	                 	var cdetailIndex = $(this).attr('id').substring("consume_table".length);	// 当前点击的datagrid
    	                 	// 若点击的不是当前row
    				        if (cdetailIndex != detailIndex  || editIndex != index){
    				            if (endEditing()){
    				                $('#consume_table' + cdetailIndex).datagrid('selectRow',index).datagrid('beginEdit',index);
    				                $('#verify_details').datagrid('endEdit',detailIndex); // 终止外层编几行
    				                editIndex = index;
    				                detailIndex = cdetailIndex;
    				                $('#verify_details').datagrid('selectRow',detailIndex);
    				            }else{
    				            	$('#consume_table' + detailIndex).datagrid('selectRow', editIndex);
    				            	$('#consume_table' + cdetailIndex).datagrid('unselectRow', index);
    				            }
    				        }
    	                 }