subGrid实现内外datagrid都可编辑功能
前一篇文章介绍了怎样创建一个拥有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);
}
}
}
