说说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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战