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);
				            }
				        }
	                 }
时间: 2024-10-14 01:11:42

subGrid实现内外datagrid都可编辑功能的相关文章

flex中dataGrid的编辑功能

flex中dataGrid的编辑功能 在flex的dataGrid中,很多情况下列是需要嵌入其他的控制的,比如:checkbox,combox等,此时需要利用dataGrid的如下功能: 1.datagrid编辑功能简介     当我们点击datagrid中的一个单元格进行编辑时,可结合使用一些组件,RadioButtonGroup.checkbox.ComboBox等     datagrid的编辑功能必须使用以下组件:editorDataField.itemEditor和itemRender

easyui datagrid 行编辑功能

1 /*单元编辑代码开始 */ 2 $.extend($.fn.datagrid.methods, { 3 editCell : function(jq, param) { 4 return jq.each(function() { 5 var opts = $(this).datagrid('options'); 6 var fields = $(this).datagrid('getColumnFields', true).concat( 7 $(this).datagrid('getCol

关于easyUI的datagrid的编辑功能时的问题

编辑时,如果form中包含了id输入域,会发送一个{id,id}这样的字符串到服务端,因为javascript的function edit(){}逻辑中,已经拿到Id提交了.所以,编辑和添加功能共用的form,不能包含id输入项. 如下:

datagrid行编辑如何实现级联?

还是级联的问题,不过这一次,是在datagrid里,那么难度上肯定比form中的级联要高. 但是只要熟练掌握了datagrid的API,问题还是很容易就可以解决的. 关键点在于--editor,关于datagrid实现编辑功能全要靠它. 先实现行编辑 比如在datagrid中要实现某一列可编辑,那么需要在那一列的column中配置editor属性 editor的配置可以只指定type,也就是编辑框的类型,可以是combobox,datebox等easyUI配备的一些类型 若对这些编辑框有额外的属

BOS项目 第6天(业务受理、自动分单、工作单快速录入、datagrid行编辑)

BOS项目笔记 第6天 今天内容安排: 1.业务受理环节分析 2.创建业务受理环节对应的数据表(业务通知单.工单.工作单) 3.实现业务受理.自动分单 4.datagrid的编辑功能 5.基于datagrid编辑功能实现工作单快速录入功能 6.演示权限控制demo 1. 业务受理分析 受理环节,是宅急送业务的开始,作为服务前端,客户通过电话.网络等多种方式进行委托,业务受理员通过与客户交流,获取客户的服务需求和具体委托信息,将服务指令输入我司服务系统. 客户通过打电话的方式进行物流委托,一个客户

034 datagrid编辑功能使用方式 - bos

数据表格编辑功能是以列为单位通过数据表格中的列属性指定具体那一列具有编辑功能:editor beginEdit:开始编辑一行 endEdit:编辑一行结束 insertRow:插入一行 deleteRow:删除一行 getRowIndex:给定行对象,返回其在数据表格中的索引 数据表格用于监听结束编辑的事件: onAfterEdit:编辑完后触发 onAfterEdit:function(index, data, changes){ alert(data.name); } 示例代码 <table

Editable DataGrid 实现列表新增编辑功能

今天在开发一个功能时候,需要直接在列表实现新增.编辑等功能.于是查看easyui 相关文档,找到相关解决办法. easyui的datagrid支持可编辑功能.它使用户能够向数据网格中添加一个新行.用户也可以更新一个或多个行. 下面是我在项目中的实现代码: 第一步:引用 easyui.css jquery-1.8.1.min.js jquery.easyui.min.js 第二步:Html和Javascript代码 <h2>Editable DataGrid Demo</h2> &l

SpringMVC+easyUI中datagrid行编辑模式(添加数据)实现_2014.5.2

一.概述 根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据). 二.实现 1.后台就不赘言了.直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过aja

jquery-easyui 中表格的行编辑功能

具体实现代码如下: <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', width:660, height:250, singleSelect:true, idField:'itemid', url:'datagrid_data.json', columns:[[ {field:'itemid',title:'Item ID',wi