LigerUi之Grid使用详解(二)——数据编辑
一、问题概述 |
在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率。所以上一篇文章为大家介绍了LigerGrid的显示数据的基本用法(传送门:http://www.cnblogs.com/jerehedu/p/4218560.html ),本次为大家继续介绍Grid的其他用法,比如使用LigerGrid如何进行数据编辑与保存。
我们在做应用时可能会遇到这样的需求,要求在同一个页面可以同时编辑主从表数据并传递到后台保存,如下图所示页面:
那如何使用LigerGrid如何进行数据编辑与保存呢?一起来看一下吧!
二、LigerGrid进行数据编辑与保存 |
表格的列对象中提供了一个editor编辑器属性,通过这个editor属性,我们可以编辑表格行中的每一个单元格。单元格编辑器editor含有多个属性,其中type属性可以指定单元格编辑数据的格式,目前提供的type属性值有string、select、date、spinner等等,除type属性外,还提供其他属性可以配合type使用。具体就不在这里一一列举,有兴趣可自行查看api文档。Editor具体用法可参照如下代码:在设置表格列属性是为要编辑的单元格添加editor属性。
{display:"配件名称",name:"pName",isAllowHide:false,align:"left",width:140,editor:{type:"string"}},{display:"配件品牌",name:"pBrand",isAllowHide:false,align:"left",width:120,editor:{type:"select",data:[{id:"1",text:"品牌一"},{id:"2",text:"品牌二"}],valueField:"id",textField:"text"} }
双击单元格,可显示如下效果:
以上是使用editor完成单元格数据的编辑,最终我们需要将表格中所有的数据编辑后提交后台进行处理,使用如下代码可获取表格数据:
var grid = $(“maingrid”).ligerGrid({……}); var data = grid.getData(); var dataStr=JSON2. stringify (data);
取到的数据是json对象,使用JSON组件将json对象转换为json格式的字符串,传递到后台后,我们使用JSON-lib框架将json串在封装成java实体对象。然而在解析数据的时候后台频繁发生异常net.sf.json.JSONException: JSONObject["pBrand"] not found.异常得原因很明显,json串中不含有某些属性值,也就是说前台传递过来的表格中的数据并不完全。
经过测试发现,当我们在前台通过使用ligerGrid提供的方法addRow或者addEditRow新增一行后,如果没有对行中某个单元格进行编辑,我们在获取的json数据中不含有此单元格的属性及值。
在此我们可以通过两种方式解决这个问题:
1、在后台解析JSON-lib解析json串时,提前数据前通过JSONObject对象的containsKey方法先判断是否含有要提取的数据,在此就不多加赘述。
2、 修改前台,在表格新增行时,为每一行添加默认数据。代码如下:
function addParts(){var rowData={pName:"",pBrand:"1",pModel:"",nums:"0",price:"",numsPrice:"",remarks:""};g.addEditRow(rowData); }
ligerGrid除了提供editor编辑器之外还提供了totalSummary属性,可辅助我们对表格中某列进行统计,如统计某列数据的总和、行数、最大值、最小值、平均值等等,我们可以通过type属性进行指定,代码及效果如下:
{display:"数量",name:"nums",type:"int",isAllowHide:false,align:"left",width:80,editor:{type:"spinner"},totalSummary:{type:'sum,count,max,min,avg'} }
以上数量列中的展示效果是totalSummary默认的效果,并不是我们想要的,我们可以为totalSummary属性提供render函数进行渲染来实现我们的效果,可参考如下代码:
{display:"数量",name:"nums",type:"int",isAllowHide:false,align:"left",width:80,editor:{type:"spinner"},totalSummary:{//type:'sum,count,max,min,avg'render:function(suminf,column){return "<span style='color:red'>数量:"+suminf.sum+"</span>";}} }
那么如何计算表格中的金额及金额总计呢?每行的金额比较容易求出,只需要在金额列中的render函数中计算即可,如:
{display:"金额",name:"numsPrice",type:"float",isAllowHide:false,align:"left",width:90,render:function(item){var money = item.nums*item.price;return formatCurrency(money);},totalSummary:{render:function(suminf,column){return "<span id='totalPrice'>"+formatCurrency(suminf.sum)+"</span>";},algin:"left"} }
从效果图可以看出金额列是能够得出结果的,但是总金额却不能正确计算,这是因为totalSummary的值是在新增行、删除行或者编辑所在列数据之后才进行计算。那么如何得出总金额呢?我们可以借助ligerGrid提供的与编辑相关的事件如onBeforeEdit、onAfterEdit、onAfterShowData等,如下:
var totalNums=0,totalPrice=0; //触发编辑事件前给总价赋值 function f_onBeforeEdit(e){totalNums-=parseInt((e.record.nums));totalPrice- =parseFloat(formatCurrency(parseFloat(formatCurrency(e.record.price)) * parseInt(e.record.nums))); } function f_onAfterEdit(e){g.updateCell('numsPrice', e.record.price * e.record.nums, e.record);totalNums+=parseInt(e.record.nums); totalPrice+=parseFloat(formatCurrency(parseFloat(formatCurrency(e.record.price)) * parseInt(e.record.nums))); $("#totalPrice").html(formatCurrency(totalPrice)); }
以上便是ligerGrid表格编辑数据和汇总数据的一些用法。小伙伴们看懂了吗?没看懂的可以点击源码下载查看源码哦!
出处:http://www.cnblogs.com/jerehedu/
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
LigerUi之Grid使用详解(二)——数据编辑相关推荐
- Pytorch|YOWO原理及代码详解(二)
Pytorch|YOWO原理及代码详解(二) 本博客上接,Pytorch|YOWO原理及代码详解(一),阅前可看. 1.正式训练 if opt.evaluate:logging('evaluating ...
- 安卓 linux init.rc,[原创]Android init.rc文件解析过程详解(二)
Android init.rc文件解析过程详解(二) 3.parse_new_section代码如下: void parse_new_section(struct parse_state *state ...
- [转]文件IO详解(二)---文件描述符(fd)和inode号的关系
原文:https://www.cnblogs.com/frank-yxs/p/5925563.html 文件IO详解(二)---文件描述符(fd)和inode号的关系 ---------------- ...
- PopUpWindow使用详解(二)——进阶及答疑
相关文章: 1.<PopUpWindow使用详解(一)--基本使用> 2.<PopUpWindow使用详解(二)--进阶及答疑> 上篇为大家基本讲述了有关PopupWindow ...
- Android init.rc文件解析过程详解(二)
Android init.rc文件解析过程详解(二) 3.parse_new_section代码如下: void parse_new_section(struct parse_state *state ...
- linux 进程间通信 dbus-glib【实例】详解二(下) 消息和消息总线(ListActivatableNames和服务器的自动启动)(附代码)
linux 进程间通信 dbus-glib[实例]详解一(附代码)(d-feet工具使用) linux 进程间通信 dbus-glib[实例]详解二(上) 消息和消息总线(附代码) linux 进程间 ...
- linux 进程间通信 dbus-glib【实例】详解二(上) 消息和消息总线(附代码)
linux 进程间通信 dbus-glib[实例]详解一(附代码)(d-feet工具使用) linux 进程间通信 dbus-glib[实例]详解二(上) 消息和消息总线(附代码) linux 进程间 ...
- Android Gradle 自定义Task详解二:进阶
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78523958 本文出自[赵彦军的博客] 系列目录 Android Gradle使用 ...
- Android Loader 异步加载详解二:探寻Loader内部机制
Android Loader 异步加载详解二:探寻Loader内部机制 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/7025991 ...
最新文章
- PHP伪类型和伪变量
- IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
- 鸟哥的Linux私房菜(基础篇)- 简易且较小安装Red Hat 7.2
- 前端js变量踩坑,部分手机浏览器不支持let、const
- Java里的堆(heap)栈(stack)和方法区(method)
- 回归树与基于规则的模型(part4)--基于规则的模型
- Android仿QQ复制昵称效果2
- Java 各种日期/时间 对象转Long时间戳
- 中国女子高尔夫球场市场趋势报告、技术动态创新及市场预测
- Unity 之 自定义编辑器布局
- Mail_Android_Video_SW_DDK_Intergration_Guide_And_Codec_User_Manual中文翻译【chapter1】
- wordpress文章编辑器,wp文章图片排版关键词水印插件
- 怎么禁用chrom'停用开发者模式'弹窗
- Spring自动装配解析
- The “path“ argument must be of type string. Received undefined
- 安卓启动中的PARTUUID
- onenote2007屏幕剪辑或插入图片是报错。
- NPDP产品经理小知识:新产品开发中的管道管理
- python 的 DEAP框架学习
- 印象笔记转移本地数据库文件的方法(挽救方法)
热门文章
- 有关AutoCompleteBox组件的研究[5][Final]_集成搜索引擎搜索建议(Search Suggestion)——Silverlight学习笔记[40]...
- 35/100. Permutations
- linutx 基本配置
- Ubuntu14.10搭建C++开发环境
- 相对熵(relative entropy或 Kullback-Leibler divergence,KL距离)的java实现(三)
- iview中时间选择器可设置选择范围方法(一个月 一周等)
- vue为什么要求组件模板只能有一个根元素
- android点击按钮底部暗影,android – 圆形按钮,像5.0 FAB一样的阴影
- 学习响应式BootStrap来写融职教育网站,Bootsrtap第八天轮播图js特效
- 前端渲染与后端渲染的区别