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使用详解(二)——数据编辑的更多相关文章
- LigerUI之Grid使用详解(三)——字典数据展示
一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.在关于LigerGrid的前两篇的内容里,给大家 ...
- LigerUI之Grid使用详解(一)——显示数据
目录: 一.概述 二.Grid使用步骤 三.使用Grid展示数据 四.源码下载 一.概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏 ...
- LigerUI之Grid使用详解(一)——显示数据 --分页
http://www.cnblogs.com/jerehedu/p/4218560.html 首先给大家介绍最常用的数据展示组件Grid,使用步骤如下: 1.页面中正确引入样式文件及相应组件 < ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- .NET DLL 保护措施详解(二)关于性能的测试
先说结果: 加了缓存的结果与C#原生代码差异不大了 我对三种方式进行了测试: 第一种,每次调用均动态编译 第二种,缓存编译好的对象 第三种,直接调用原生C#代码 .net dll保护系列 ------ ...
- PopUpWindow使用详解(二)——进阶及答疑
相关文章:1.<PopUpWindow使用详解(一)——基本使用>2.<PopUpWindow使用详解(二)——进阶及答疑> 上篇为大家基本讲述了有关PopupWindow ...
- Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- logback -- 配置详解 -- 二 -- <appender>
附: logback.xml实例 logback -- 配置详解 -- 一 -- <configuration>及子节点 logback -- 配置详解 -- 二 -- <appen ...
- 爬虫入门之urllib库详解(二)
爬虫入门之urllib库详解(二) 1 urllib模块 urllib模块是一个运用于URL的包 urllib.request用于访问和读取URLS urllib.error包括了所有urllib.r ...
随机推荐
- BZOJ2973 : 石头游戏
考虑到$lcm(1,2,3,4,5,6)=60$,所以操作序列每60秒一个循环. 将操作表示成转移矩阵的形式,预处理出前60秒的转移矩阵以及它们的乘积$B$. 那么t秒的转移矩阵为前$t\bmod 6 ...
- getRequestURI,getRequestURL的区别(转)
test1.jsp======================= <a href ="test.jsp?p=fuck">跳转到test2</a> test2 ...
- 在eclipse中查看Android源码
声明:高手跳过此文章 当我们在eclipse中开发android程序的时候.往往须要看源码(可能是出于好奇,可能是读源码习惯),那么怎样查看Android源码呢? 比方以下这样的情况 图1 如果我们想 ...
- 添加Godaddy二级域名子域名方法
我们在申请注册了Godaddy域名后,如果需要开通二级域名,方法简单只需要在Godaddy添加二级域名(子域名)只要在域名管理后台添加A记录或CNAME别名(Aliases)即可.但我们如果需要添加二 ...
- 自己动手写Vue插件Toast
<style> .vue-toast { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; backgrou ...
- 在ASP.NET Web API中实现CORS(跨域资源共享)
默认情况下,是不允许网页从不同的域访问服务器资源的,访问遵循"同源"策略的原则. 会遇到如下的报错: XMLHttpRequest cannot load http://local ...
- C#中泛型容器Stack<T>的用法,以及借此实现”撤销/重做”功能
.Net为我们提供了众多的泛型集合.比如,Stack<T>先进后出,Queue<T>先进先出,List<T>集合元素可排序,支持索引,LinkedList<T ...
- 使用SQL Database Migration Wizard把SQL Server 2008迁移到Windows Azure SQL Database
本篇体验使用SQL Database Migration Wizard(SQLAzureMW)将SQL Server 2008数据库迁移到 Azure SQL Database.当然,SQLAzure ...
- Android控件之ImageSwticher
Android控件之ImageSwticher 1. ImageSwticher介绍 ImageSwitcher是图片切换的控件,它能实现图片切换时的动画效果,包括图片导入效果.图片消失效果等等.An ...
- 安装express并创建工程
安装express npm install express-generator -g 使用命令创建express工程, express projectName 生成express相应的工程结构 bin ...