easyui datagrid 相同列合并/编辑行后保存

      利用easyui datagrid做一个订单信息列表，需要的功能为相同类型下的产品列合并，并且能随意修改其价格与数量。

大致如下

方法实现思路.

     首先想到的肯定就是，这个功能绝对是可以实现的，于是乎找资料呀找资料，先从相同列合并单元格找起。

于是乎找到的资料如下：

1. easyui datagrid 连续相同列合并拓展  http://blog.csdn.net/dcb_ripple/article/details/55050689
   
2. easyui gatagrid ——可编辑的列      http://blog.csdn.net/fengyao1995/article/details/47702409
3. easyui gatagrid 行编辑功能(行内编辑、删除、保存、取消)  http://blog.csdn.net/xuezt/article/details/45727601
4. easyui gatagrid 单元格编辑保存  http://blog.csdn.net/toutou0505/article/details/43266707
5. easyui gatagrid 不在编辑状态改变其值  http://www.gkxsn.com/6347761983142187501.html
6. easyui 前台改变某个单元格的值 http://blog.csdn.net/d7011800/article/details/8692624

本次主要资料借鉴于1、3、5。

代码实现.

相同单元格合并

比较简单，直接按上面的资料第一部分即可实现此功能。我的代码如下

				

					

						

						
						
						
						
分类名称
						
erp编号
						
						
系统类型
						
唯一编码
						
指导价
						
成交价(可编辑)
						
数量(可编辑)
						
金额小计
						
折扣(%)
						
描述
						
备注
					
				
			

js代码片段

function getBinding(id){    //单击事件的一个方法

		$.extend($.fn.datagrid.methods, {
		    autoMergeCells: function(jq, fields) {
		        return jq.each(function() {
		            var target = $(this);
		            if (!fields) {
		                fields = target.datagrid("getColumnFields");
		            }
		            var rows = target.datagrid("getRows");
		            var i = 0,
		            j = 0,
		            temp = {};
		            for (i; i < rows.length; i++) {
		                var row = rows[i];
		                j = 0;
		                for (j; j < fields.length; j++) {
		                    var field = fields[j];
		                    var tf = temp[field];
		                    if (!tf) {
		                        tf = temp[field] = {};
		                        tf[row[field]] = [i];
		                    } else {
		                        var tfv = tf[row[field]];
		                        if (tfv) {
		                            tfv.push(i);
		                        } else {
		                            tfv = tf[row[field]] = [i];
		                        }
		                    }
		                }
		            }
		            $.each(temp,
		            function(field, colunm) {
		                $.each(colunm,
		                function() {
		                    var group = this;

		                    if (group.length > 1) {
		                        var before, after, megerIndex = group[0];
		                        for (var i = 0; i < group.length; i++) {
		                            before = group[i];
		                            after = group[i + 1];
		                            if (after && (after - before) == 1) {
		                                continue;
		                            }
		                            var rowspan = before - megerIndex + 1;
		                            if (rowspan > 1) {
		                                target.datagrid('mergeCells', {
		                                    index: megerIndex,
		                                    field: field,
		                                    rowspan: rowspan
		                                });
		                            }
		                            if (after && (after - before) != 1) {
		                                megerIndex = after;
		                            }
		                        }
		                    }
		                });
		            });
		        });
		    }
		});
		
		
		//所有列进行合并操作
	    $('#tt2').datagrid({
	        url: "${pageContext.request.contextPath }/myorder/myorder_getProductMyOrderIdListJson.action?myOrder.id="+id,
	        onLoadSuccess: function(data) {
	            //所有列进行合并操作
	            //$(this).datagrid("autoMergeCells");
	            //指定列进行合并操作  
	            $(this).datagrid("autoMergeCells", ['sort_Name', '']);
	        }
	    });
		
	    $('#dlg2').dialog('open').dialog('setTitle', '订单情况'); 
	}

  这里需要注意的是，和并列有时会出现错误，发现合并效果不理想不成功. 建议如下，尽量保障你要合并的列名称(field)保证唯一。每次改变grid时都手动调用一次
 $(this).datagrid("autoMergeCells", ['sort_Name', '']);   保证其效果正常运行。

行编辑后利用ajax保存

难点在于如何使编辑后的内容进行保存，因为并未发现有失去焦点这一事件，具体代码如下：

$(function(){

		
		$('#tt2').datagrid({
		    onClickCell: function(index,field,value){
		       //var ed = $(this).datagrid('getEditor', {index:index,field:field});  
		       //$.messager.alert('温馨提示','请谨慎更改!','info');
		       editorDatagrid(index,field,value);
		    }   
		});  
		
	});
	
	var editIndex = -1 ;
	function editorDatagrid(index,field,value){
		
		//未选择编辑框
		if(field !="clinch_money" && field !="count" && editIndex == -1){
			return false;
		}
		if(editIndex != -1){
			//$('#tt2').datagrid('validateRow', editIndex);
			$('#tt2').datagrid('endEdit', editIndex);  //保存已编辑的框 
			$('#tt2').datagrid("autoMergeCells", ['sort_Name', '']); //重新加载合并列
			var row =  $('#tt2').datagrid('getData').rows[editIndex];
			if (row.clinch_money =="" || row.count ==""){
				$.messager.alert('温馨提示','请填写金额与数量，本次修改失败!','info');
				editIndex = -1;   //复位.
				$('#tt2').datagrid('load',{});
				return false;
			}else{
				editIndex = -1;   //复位.
				//填写折扣后的数据.,,, 
			}
			if(field =="clinch_money"||field =="count" ){
				editIndex = index;
			}else{
				editIndex = -1;   //复位.
			}
			//ajax 保存操作
			$.post("${pageContext.request.contextPath }/myorder/myorder_editOrderDetailMy.action",
					{"myDetail.clinch_money":row.clinch_money,"myDetail.market_money":row.market_money,
					  "myDetail.count":row.count,"myDetail.id":row.myDetailId},
				function(data){
					if(data.status=="1"){
						$('#tt2').datagrid('load',{});
					}else{
						$.messager.alert('温馨提示',data.errorMsg,'info');
					}
					editIndex = -1;   //复位.
			},"json");
		}else{
			if(field =="clinch_money" || field=="count"){
				$('#tt2').datagrid('beginEdit',index);  //更改属性为可编辑
		    }
			editIndex = index; //保存,作为第二次进入时 修改保存的依据
		}
	}

html代码跟上面的是一样的，思路在每次点击事件时将上一次所单击的下标保存起来，再下一次点击事件时将数据通过ajax保存到后台. 缺点在于有些事情做得较为繁琐，方法比较笨拙而且需修改后点击表格中的其他位置。