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

时间:2022-08-30 09:15:59

一、需要引入的文件

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