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);}});}

datagrid系列之-基本添加行，删除行，插入行，自定义方法相关推荐

form表单校验复杂系列--- form表单内插入独立的数据表格，动态校验数据表格内每行的文件上传
form表单校验复杂系列- form表单内插入独立的数据表格,动态校验数据表格内每行的文件上传前言公司项目有个模块需要优化form表单内,插入独立的数据表格,表格内容是文件上传,需要利用外部表单提 ...
表格的操作包括：标记行、移动行、删除行、插入行
1.标记行这里讲的标记行指的是单击此行,可以实现在此行右边出现一个勾,如下图所示: 为了实现标记功能,在ViewController.m中@end之前添加代码: C代码 #pragma mark ...
linux中sed -i命令修改文件内容、在文件中插入行、删除文件中删除行
文章目录 0.sed -i与sed 1.修改文件内容 2.在文件中插入行 3.在文件中删除行 4.使用find查找文件,并用 | xargs传输文件名给sed命令 0.sed -i与sed sed - ...
表格序号_让Excel表格中的序号自动更新，再也不怕删除、插入行了
以前小编发布过一篇<Excel自动生成序号的三种方法,省去一个一个录入的麻烦>,有粉丝问到:表格删除行或插入行后序号断了,能不能自动更新呢?今天小编就教大家自动更新序号的方法. 方法一:利 ...
痞子衡嵌入式：深扒i.MXRTxxx系列ROM中集成的串行NOR Flash启动SW Reset功能及其应用场合...
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRTxxx系列ROM中集成的串行NOR Flash启动SW Reset功能及其应用场合. 在串行 NOR Flash 热启动过程 ...
【Shell牛客刷题系列】SHELL5 打印空行的行号：一起学习grep命令搭配正则表达式的使用
该系列是基于牛客Shell题库,针对具体题目进行查漏补缺,学习相应的命令. 刷题链接:牛客题霸-Shell篇. 该系列文章都放到专栏下,专栏链接为:<专栏:Linux>.欢迎关注专栏~ 本 ...
实现Excel行插入行删除特殊处理，单元格合并及动态条件单元格公式自动计算功能的VBA 宏示例
最近的项目中,用到了很多Excel的VBA宏功能,用户的新需求也有很多需要用VBA宏来实现.为满足业务需求, 自己搜索网上的相关资料,尝试不同的解决方法,最终解决了用户的需求,在此记录下来,做一个总结 ...
QTableWidget插入行解决最后一行异常情况
问题描述先引用<Qt5.9C++开发指南>书P117页最下方关于insertRow()函数的一段描述. 在行号为row的行前插入一行,如果row等于或大于总行数,则在表格最后一行添加 ...
mysql 获取刚插入行id汇总
mysql 获取刚插入行id汇总我们在写数据库程序的时候,经常会需要获取某个表中的最大序号数, 一般情况下获取刚插入的数据的id,使用select max(id) from table 是可以的. ...

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

datagrid系列之-基本添加行，删除行，插入行，自定义方法相关推荐

最新文章

热门文章