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

来源：互联网发布：自己开淘宝店赚钱吗编辑：程序博客网时间：2024/06/12 01:36

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

大致如下

方法实现思路.

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

于是乎找到的资料如下：

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

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

代码实现.

相同单元格合并

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

<table id="tt2" class="easyui-datagrid"style="width: 100%; height: 470px"url=""title="" iconCls="icon-save" rownumbers="true" pageSize=30 method:"get"idField="id" pagination="true"><thead><tr><th field="ck" checkbox="true"></th><th field="id" hidden="hidden"></th><th field="sortId" hidden="hidden"></th><th field="myDetailId" hidden="hidden"></th><th field="sort_Name" width="200">分类名称</th><th field="product_id" width="100">erp编号</th><th field="type_id" hidden="hidden"></th><th field="typeName" width="100">系统类型</th><th field="identify" width="70">唯一编码</th><th field="market_money" width="100">指导价</th><th field="clinch_money" editor="{type:'numberbox',options:{precision:0}}" width="100">成交价(可编辑)</th><th field="count" editor="{type:'numberbox',options:{precision:0}}" width="80">数量(可编辑)</th><th field="clinch_money_sum" width="100">金额小计</th><th field="discount" width="100">折扣(%)</th><th field="product_desc" width="200">描述</th><th field="note" width="200">备注</th></tr></thead></table>

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保存到后台. 缺点在于有些事情做得较为繁琐，方法比较笨拙而且需修改后点击表格中的其他位置。

0 0