前一篇文章介绍了如何创建一个拥有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中)并终止编辑,若不通过则无法终止编辑 二、暂存数据(等所有数据保存完之后一起提交)
function endEditing(){ if (editIndex == undefined){ return true } var ddv = $('#consume_table' + detailIndex); if (ddv.datagrid('validateRow', editIndex)){ // 验证通过 ddv.datagrid('unselectRow', editIndex);// 这里添加一个去选上一个选中项的方法 ddv.datagrid('endEdit', editIndex); var row = ddv.datagrid('getRows')[editIndex]; if(row){ row.detailid = $("#verify_details").datagrid('getRows')[detailIndex]['id']; // key step verifyDTO.ddetailsDTOList[detailIndex].consumeList.splice(editIndex, 1, row); } editIndex = undefined; return true; } else { return false; } }
7、append():先要endEditing(),之后根据detailIndex来决定添加在哪一个subGrid里,并且记录editIndex
function append(){ if(endEditing()){ if(detailIndex == undefined){ $.messager.alert('错误', wrapSpan('请先选择一个报修记录'), 'error'); return; } var ddv = $('#consume_table' + detailIndex); ddv.datagrid('appendRow',{}); $('#verify_details').datagrid('fixDetailRowHeight',detailIndex); // 添加后要重新调整高度 necessary editIndex = ddv.datagrid('getRows').length-1; ddv.datagrid('selectRow', editIndex).datagrid('beginEdit', 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); } } }