说说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函数完成界面的控制。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$("#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方法。

1
2
3
4
5
6
7
8
9
10
11
// 计算全部回款的总金额和总百分比
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来计算没有可编辑时的值来统计。

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

1
2
3
4
5
{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

posted @   培轩  阅读(470)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示