datagrid 基本添加行，删除行，插入行，自定义方法

一、需要引入的文件

<link href="${ctxStatic}/easyui/css/easyui.css" rel="stylesheet" /><link href="${ctxStatic}/easyui/css/icon.css" rel="stylesheet" /><script src="${ctxStatic}/easyui/js/jquery.easyui.min.js"></script><script src="${ctxStatic}/easyui/js/easyui_showhide.js"></script><script src="${ctxStatic}/easyui/js/easyui-lang-zh_CN.js" type="text/javascript"></script><script src="${ctxStatic}/easyui/extend/easyui.extend.js"></script>

二、代码详解

/* 允许编辑单元格 */$('#contentTable').datagrid().datagrid('enableCellEditing');/* 数据的自定义封装 */$('#contentTables').datagrid("loadData",{"total":1,"rows": List<Map>});

datagrid表格

options 参数包含两个属性：index：行的索引。 field：字段名editor：定义编辑行时的编辑器。

$('#contentTable').datagrid({url:"${ctx}/faccounting/glVoucher/getGlDetailList",iconCls: 'icon-tip',  singleSelect: true,  fitColumns: true,remoteSort: false, resizable : false,nowrap : true,autoRowHeight : true,striped : true,rownumbers: true, checkOnSelect: false,selectOnCheck: true,queryParams:     {    searchData : JSON.stringify($("#searchForm").serializeArray())    }, onBeginEdit: onBeginEdit,/* 允许编辑开始 */         onEndEdit: onEndEdit,/* 允许编辑结束 */ height:340, columns:[    [{field:'explanation',title:'摘要',width:80,align:'left',halign:'center',editor:'selectExplanation'},{field:'pkAccsubj.dispname',title:'科目',width:100,align:'left',halign:'center',formatter:function(value,row){var dispname = row.pkAccsubj.dispname;return dispname == '' || dispname == null ? '' : dispname;},editor:'selectSubjassForm'},{field:'valueName',title:'辅助核算',width:100,align:'left',halign:'center',editor:'selectAccsubjForm'},{field:'currtypecode',title:'币种',width:40,align:'left',halign:'center',formatter:function(value,row){if(row.pkCurrtype.currtypecode==""||typeof(row.pkCurrtype.currtypecode) == "undefined"){var obj = new Object();obj.pkCurrtype='00010000000000000001';obj.currtypecode='CNY';row.pkCurrtype=obj;}var currtypecode = row.pkCurrtype.currtypecode;return currtypecode == ''|| currtypecode == null ? '' : currtypecode;}, editor:{type:'combobox',options:{valueField:'pkCurrtype',textField:'currtypecode',panelHeight:48,  method:'get',url:'${ctx}/customization/bdCurrtype/tableDataForm?s="+ Math.random()'}}},{field:'creditamount',title:'原币',width:40,align:'right',halign:'center',formatter:function(value,row){if(row.creditamount!=0){return thousandBitSeparator(row.creditamount);}else{return thousandBitSeparator(row.debitamount);}}, editor:{}},{field:'localdebitamount',title:'借方',width:40,align:'right',halign:'center',formatter:function(value,row){if(row.localdebitamount==0){return "";}else{return thousandBitSeparator(row.localdebitamount);}}, editor:'selectGenDebit'},{field:'localcreditamount',title:'贷方',width:40,align:'right',halign:'center',formatter:function(value,row){if(row.localcreditamount==0){return "";}else{return thousandBitSeparator(row.localcreditamount);}}, editor:'selectGenLcredit'}    ]    ]});});

onBeginEdit：当用户编辑一行时触发该动作$(this).datagrid('getEditor', {index,field'}):获取指定的编辑器， 

$(this).datagrid('endEdit',index):结束对一行进行编辑。

$('#autocom').combobox('setText', ''):文本内容$('#autocom').combobox('setValue', '')：文本值function onBeginEdit(index,row){        var flag = false;        var subj = $("#subjCode").val();        var subjCode = new Array();        subjCode.push(subj.split(","));        var subjRow= row.pkAccsubj.subjcode;        for(var j=0;j<subjCode[0].length;j++){            if(subjRow==subjCode[0][j]){                flag = true;                break;            }        }                ed = $(this).datagrid('getEditor', {            index: index,            field: 'explanation'        });        if(flag){            if(ed == null){                 $(this).datagrid('endEdit',index);                 return false;            }        }                ed = $(this).datagrid('getEditor', {            index: index,            field: 'localdebitamount'        });        if(ed!=null){            if(row.localdebitamount==0){                $('#localdebitamountId').val("");            }        }                ed = $(this).datagrid('getEditor', {            index: index,            field: 'localcreditamount'        });        if(ed!=null){            if(row.localcreditamount==0){                $('#localcreditamountId').val("");            }        }                var ed = $(this).datagrid('getEditor', {            index: index,            field: 'pkAccsubj.dispname'        });        if(ed != null){            var obj = new Object();            obj.dispname = row.pkAccsubj.dispname;            obj.pkAccsubj =row.pkAccsubj.pkAccsubj;            row.pkAccsubj = obj;            $('#autocom').combobox('setText', row.pkAccsubj.dispname);            $('#autocom').combobox('setValue', row.pkAccsubj.pkAccsubj);        }                var ed = $(this).datagrid('getEditor', {            index: index,            field: 'pkCurrtype.currtypecode'        });        if(ed!=null){            obj = new Object();            obj.pkCurrtype = row.pkCurrtype.pkCurrtype;            obj.currtypecode =row.pkCurrtype.currtypecode;            row.pkCurrtype = obj;        }    }

//添加行$("#addRow").on('click',function(){    var lastIndex = $('#contentTable').datagrid('getRows').length;    var tr = $('#assistpage .datagrid-view2').eq(0).find('tbody tr').eq(lastIndex);    var free1 = $(tr).attr('free1-value');        window.rows = $('#contentTable').datagrid('getChanges', 'inserted');        $('#contentTable').datagrid('endEdit', lastIndex);        $('#contentTable').datagrid('appendRow',{        explanation:'',        pkAccsubj:'',    vouchetypename:'',    valueName:'',    pkCurrtype:'',    creditamount:'',    localdebitamount:'',    localcreditamount:''        });        var rows = $('#contentTable').datagrid('getRows');        if(rows.length>=3 && typeof(rows[0].pkVoucher) != "undefined"){        rows[rows.length-1].explanation = rows[rows.length-2].explanation;        }else if(rows.length>=3){        rows[rows.length-2].explanation = rows[rows.length-3].explanation;        }        rows[0].free1 = typeof(free1) == 'undefined' ? '' : free1;        $('#contentTable').datagrid("loadData",{"total":rows.length,"rows":rows});    });

//删除行$("#delRow").on('click',function(){var row = $('#contentTable').datagrid('getSelected');if(null == row){layer.msg('请选择要删除的分录!', {icon: 0});return false;}else if(typeof(row.pkVoucher) != 'undefined'){layer.msg('此分录为协同分录不能删除!', {icon: 0});return false;}else{var rowIndex = $('#contentTable').datagrid('getRowIndex', row);$('#contentTable').datagrid('deleteRow', rowIndex);  }});

//插入行$("#insRow").on('click',function(){var row = $("#contentTable").datagrid('getSelected');if(row == null){$("#addRow").click();return false;}    var index = $("#contentTable").datagrid('getRowIndex', row);    $('#contentTable').datagrid('endEdit', index);        $('#contentTable').datagrid('appendRow',{        explanation:'',        pkAccsubj:'',    vouchetypename:'',    valueName:'',    pkCurrtype:'',    creditamount:'',    localdebitamount:'',    localcreditamount:''        });        var toup = $("#contentTable").datagrid('getData').rows[index + 1];        var todown = $("#contentTable").datagrid('getData').rows[index];        $("#contentTable").datagrid('getData').rows[index] = toup;        $("#contentTable").datagrid('getData').rows[index + 1] = todown;        $("#contentTable").datagrid('refreshRow', index);        $("#contentTable").datagrid('refreshRow', index + 1);        $("#contentTable").datagrid('selectRow', index + 1);});

//协同确认$("#saveRow").on('click',function(){var flag = sumtotal();if(!flag) return false;var rows = $('#contentTable').datagrid('getData');var glDetailList = new Array();//分录非空限制for(var i=0;i<rows.total;i++){if((rows.rows[i].localcreditamount!=""&&rows.rows[i].localcreditamount!="0")||(rows.rows[i].localdebitamount!=""&&rows.rows[i].localdebitamount!="0")){var index=$('#contentTable').datagrid('getRowIndex',rows.rows[i])+1;if(rows.rows[i].explanation==""||typeof(rows.rows[i].explanation) == "undefined"){sysMsg = "第"+index+"条分录:摘要不能为空！";layer.msg(sysMsg, {icon: 7});return false;}if(rows.rows[i].pkAccsubj.dispname==""||typeof(rows.rows[i].pkAccsubj.dispname) == "undefined"){sysMsg = "第"+index+"条分录:科目不能为空！";layer.msg(sysMsg, {icon: 7});return false;}if(rows.rows[i].pkCurrtype.currtypecode==""||typeof(rows.rows[i].pkCurrtype.currtypecode) == "undefined"){sysMsg = "第"+index+"条分录:币种不能为空！";layer.msg(sysMsg, {icon: 7});return false;}if((rows.rows[i].creditamount==""||rows.rows[i].creditamount=="0"||typeof(rows.rows[i].creditamount) == "undefined")&&(rows.rows[i].debitamount==""||rows.rows[i].debitamount=="0"||typeof(rows.rows[i].debitamount) == "undefined")){sysMsg = "第"+index+"条分录:原币金额不能为空！";layer.msg(sysMsg, {icon: 7});return false;}}}/* 循环遍历分录 */for(var i=0;i<rows.total;i++){if((rows.rows[i].localcreditamount!=""&&rows.rows[i].localcreditamount!="0")||(rows.rows[i].localdebitamount!=""&&rows.rows[i].localdebitamount!="0")){var glDetail = new Object();glDetail.detailindex = i+1;//分录号glDetail.assid = typeof(rows.rows[i].assid) == 'undefined' || rows.rows[i].assid == null ? '' : rows.rows[i].assid;//辅助核算标识var tr = $('#assistpage .datagrid-view2').eq(0).find('tbody tr').eq(i+1);    var free1 = $(tr).attr('free1-value');if(typeof(rows.rows[i].free1) != 'undefined' || rows.rows[i].free1 != null){glDetail.free1 = rows.rows[i].free1;//核销号}else if(typeof(free1) != 'undefined' || free1 != null){glDetail.free1 = free1;}else{glDetail.free1 = '';}glDetail.pkdetail = typeof(rows.rows[i].pkDetail) == 'undefined' || rows.rows[i].pkDetail == null ? '' : rows.rows[i].pkDetail;//分录主键glDetail.explanation = rows.rows[i].explanation;//摘要内容glDetail.dispname = rows.rows[i].pkAccsubj.dispname;//科目名称glDetail.pkAccsubj = rows.rows[i].pkAccsubj.pkAccsubj;//科目主键if(typeof(rows.rows[i].valueName) == "undefined"||rows.rows[i].valueName == ""||rows.rows[i].valueName==null){glDetail.valueName = "";}else{glDetail.valueName = rows.rows[i].valueName.replace(/【/g,"").replace(/】/g,",").replace(/【】/g,",");if(glDetail.valueName.substring(glDetail.valueName.length-1,glDetail.valueName.length)==","){glDetail.valueName = glDetail.valueName.substring(0,glDetail.valueName.length-1);}}if(typeof(rows.rows[i].checkValue) == "undefined"||rows.rows[i].checkValue == ""||rows.rows[i].checkValue==null){glDetail.checkValue = "";}else{glDetail.checkValue = rows.rows[i].checkValue;if(glDetail.checkValue.substring(glDetail.checkValue.length-1,glDetail.checkValue.length)==","){glDetail.checkValue = glDetail.checkValue.substring(0,glDetail.checkValue.length-1);}}glDetail.currtypecode = rows.rows[i].pkCurrtype.currtypecode;glDetail.creditamount = rows.rows[i].localcreditamount == '' ? 0 : rows.rows[i].localcreditamount;glDetail.debitamount = rows.rows[i].localdebitamount == '' ? 0 : rows.rows[i].localdebitamount;glDetail.localcreditamount = rows.rows[i].localcreditamount == '' ? 0 : rows.rows[i].localcreditamount;glDetail.localdebitamount = rows.rows[i].localdebitamount == '' ? 0 : rows.rows[i].localdebitamount;glDetailList.push(glDetail);}}var glvoucher = [];var map = {};map.prepareddate = $('#beginDate').val();map.attachment = $('#attachment').val();map.pkVouchertype = $('#pkVouchertype').val();map.pkOccursub = $('#pkOccursub').val();map.bdGlorgId = $('#bdGlorgId').val();glvoucher.push(map);$.post("${ctx}/faccounting/glReconcileoccur/saveReconcile",{glVoucher : JSON.stringify(glvoucher),glDetail: JSON.stringify(glDetailList)},function(result){var num = 0;$(window.parent.document).find('.content-tabs .page-tabs-content a').each(function(index,element){if($(this).hasClass('active')){num = index;}});$(window.top.frames[num].document).find('.ibox #reflash').click();top.layer.msg('协同保存成功.', {icon: 1});setTimeout("saveSucc()", 3000 );});});function saveSucc(){var index=$(window.parent.document).find('.layui-layer-shade').eq(0).attr('times');parent.layer.close(index); //执行关闭}

//摘要文本$.extend($.fn.datagrid.defaults.editors, {    selectExplanation: {        init: function(container, options){        var html = '<div class="input-group">'        +'<input type="text" class="form-control" style="height:22px;"/>'        +'<span class="input-group-btn" style="width:3px;">'        +'<button type="button" onclick="explanation()"  class="btn btn-primary" style="padding:0.2px;">'        +'<i class="fa fa-search"></i>'        +'</button> </span></div>';            var input = $(html).appendTo(container);            return input;        },        getValue: function(target){            return $(target).val();        },        setValue: function(target, value){            $(target).val(value);            $(target).find("input").val(value);        },        resize: function(target, width){            var input = $(target);            if ($.boxModel == true){                input.width(width - (input.outerWidth() - input.width()));            } else {                input.width(width);            }        }    }});

//科目$.extend($.fn.datagrid.defaults.editors, {selectSubjassForm: {        init: function(container, options){        var html = '<input id="autocom" type="text" class="easyui-combobox" style="width:100%;"/>';        var input = $(html).appendTo(container);            $('#autocom').combobox({                data:$("#accSubjCode").data('accSubjCode'),                valueField:'id',                textField:'label',                 icons:[                            {                                iconCls:'icon-clear',                                handler:function(e){                                subjassForm();                                }                            }                        ],            });         return input;        },        getValue: function(target){            return $(target).val();        },        setValue: function(target, value){            $(target).val(value);            $(target).find("input").val(value);        },        resize: function(target, width){            var input = $(target);            if ($.boxModel == true){                input.width(width - (input.outerWidth() - input.width()));            } else {                input.width(width);            }        }    }});

//科目弹出框 function subjassForm(){var rowIndex = $('#contentTable').datagrid('getRowIndex',$('#contentTable').datagrid('getSelected'));var ed = $('#contentTable').datagrid('getEditor', {index: rowIndex,field: 'pkAccsubj.dispname'});var row = $('#contentTable').datagrid('getSelected');var id = row.pkAccsubj.pkAccsubj;var pkGlorgbook = $("#bdGlorgId").val();top.layer.open({    type: 2, area: ['1100px', '680px'],    title:"选择会计科目",content: "${ctx}/customization/bdAccsubj/searchForm?id="+id+"&pkGlorgbook="+pkGlorgbook+"&parentFrameID="+"",    btn: ['确定', '关闭'],   yes: function(index, layero){         var tree = layero.find("iframe")[0].contentWindow.zTree;var ids = [], names = [], nodes = [], dispnames = [], pkAccsubjs = [], isHasFreeValues = [];nodes = tree.getSelectedNodes();for(var i=0; i<nodes.length; i++) {if (nodes[i].level == 0){top.layer.msg("不能选择根节点（"+nodes[i].name+"）请重新选择。", {icon: 0});return false;}if (nodes[i].isParent){top.layer.msg("不能选择父节点（"+nodes[i].name+"）请重新选择。", {icon: 0});return false;}if (nodes[i].dispname == ""){top.layer.msg("不能选择父节点（"+nodes[i].name+"）请重新选择。", {icon: 0});return false;}ids.push(nodes[i].id);names.push(nodes[i].name);dispnames.push(nodes[i].dispname);pkAccsubjs.push(nodes[i].pkAccsubj);isHasFreeValues.push(nodes[i].isHasFreeValue);break;}var dispname = dispnames.join(",");var pkAccsubj = pkAccsubjs.join(",");if(ed!=null){$('#autocom').next().children().eq(1).val(dispname);$('#autocom').next().children().eq(1).attr("pkAccsubj",pkAccsubj);}top.layer.close(index);}    });}