说说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开始），隐藏的列也必须包括在内，不然会发生内容修改错列的情况。