说说JeeSite的DataGrid

已经很久不做JavaScript编程了，很多内容已经淡忘了。最近使用JeeSite的框架做个应用，使用其中的DataGrid。实际上这个DataGrid是对开源的jqGrid进行了包装。由于JeeSite网站提供的文档非常有限，因此需要参考jqGrid的相关文档。尽管jqGrid的文档在网上很多，但缺乏系统性和完整性，有些还有错误。真是相当坑爹。下面的一位网友总结的jqGrid比较实用，值得参考。

https://blog.csdn.net/qq_39822451/category_9205125.html

下面说一下使用中的一点体会。主要是使用DataGrid在编辑时的用法：

1、将DataGrid的列设置为可编辑后，实际上是单元格中加入了编辑属性设置的表单输入域，因此表格内容的显示是这些输入域的内容，因此对表格的单元格内容修改不会改变输入域内容，只有修改了输入域的内容才能正确显示。

2、DataGrid的列设置editoptions可以设置输入域的相关属性，包括JavaScript的事件定义，因此可以通过这种方式调用其它JS函数完成界面的控制。

比如：某单元格的内容修改后可重新计算其它列的值。以付款金额和付款比例为例，金额发生变动之后可动态更新付款比例。代码如下所示。

$("#paymentGrid").dataGrid({
    data: ${toJson(paymentList)},
    datatype: "local", // 设置本地数据
    autoGridHeight: function(){return 'auto'}, // 设置自动高度

    // 设置数据表格列
    columnModel: [
        {header:'状态', name:'status', editable:true, hidden:true},
        {header:'主键', name:'id', editable:true, hidden:true},
        {header:'付款金额（万）', name:'paymentAmount', width:100, align:"center", editable:true, edittype:'text',
				editoptions:{'maxlength':'200', 'class':'form-control', 'onchange':'countPercent(this)'}
        },
        {header:'付款时间', name:'paymentDate', width:100, align:"center"}，
        {header:'付款比例', name:'paymentPercent', width:100, align:"center"}
    }，
}
......

function countPercent(input) {
   let rowId = $(input).attr('rowid');
   let amount = parseFloat($('#' + rowId + '_paymentAmount').val());
   let total = parseFloat($('#saleContractAmount').val());
   // 当前td所属tr
   let tableRow = $(input).parent().parent();
   let percent = amount / total * 100;
   tableRow.children('td').eq(5).text(percent.toFixed(2) + '%');
}

注意：调用函数countPercent传递的参数this是当前输入域的对象，它是JavaScript的对象，因此需要使用$(input)转换为JQuery的形式才能调用attr方法。

在获取DataGrid中的td时必须按实际的列数指定序号（列号从0开始），隐藏的列也必须包括在内，不然会发生内容修改错列的情况。

3、在对DataGrid中的某些列进行统计时可以使用getCol方法。

// 计算全部回款的总金额和总百分比
function getTotalPercent() {
	let dataGridObj = $('#paymentGrid');
	let totalMoney = dataGridObj.getCol('paymentAmount',false,'sum');
	let totalPercent = dataGridObj.getCol('paymentPercent',false,'sum');
	dataGridObj.dataGrid('footerData', 'set', {
		'paymentAmount' : '<center><em>合计：' + totalMoney + '</em></center>',
		'paymentDate' : '<input id="totalPaymentAmount" type="hidden" value="' + totalMoney + '"/>',
		'paymentPercent': '<em>' + totalPercent.toFixed(2) + '%</em>'
	}, false);
}

需要注意的是，如果你的列中使用可编辑的域，则统计显示的数据则不正确，因为getCol只对表格中的单元数据进行统计。可以有两种方法进行处理。

一种方法是自己编写求和程序，访问可编辑列中的输入域，获取其中的值。这种比较麻烦。

在StackOverflow中给出了另外的方法，就是在可编辑的列上增加unformat属性，getCol在进行统计时会调用unformat来计算没有可编辑时的值来统计。

付款金额列的定义修改如下所示：

{header:'${text("回款金额（万）")}', name:'paymentAmount', width:100, align:"center",
    editable:true, edittype:'text',
    editoptions:{'maxlength':'200', 'class':'form-control overAmount', 'onchange':'countPercent(this)'},
    unformat: function(val, obj, cell){return $('#'+obj.rowId+'_'+obj.colModel.name, cell).val();}
},

其它参考：

jqGrid插件getCol方法的一个改进   https://www.cnblogs.com/zhmhhu/p/6204504.html