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"      }  }  

　　双击单元格，可显示如下效果：[/pre]复制内容到剪贴板

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串中不含有某些属性值，也就是说前台传递过来的表格中的数据并不完全。[/pre]复制内容到剪贴板

function addParts(){      var rowData={          pName:"",          pBrand:"1",          pModel:"",          nums:"0",          price:"",          numsPrice:"",          remarks:""       };      g.addEditRow(rowData);  }  

         ligerGrid除了提供editor编辑器之外还提供了totalSummary属性，可辅助我们对表格中某列进行统计，如统计某列数据的总和、行数、最大值、最小值、平均值等等，我们可以通过type属性进行指定，代码及效果如下：[/pre]复制内容到剪贴板

{display:"数量",name:"nums",type:"int",isAllowHide:false,align:"left",width:80,      editor:{type:"spinner"},      totalSummary:{          type:'sum,count,max,min,avg'      }  }  

[/pre]复制内容到剪贴板

{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>";      }      }  }  

[/pre]复制内容到剪贴板

{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"      }  }  

[/pre]复制内容到剪贴板

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));  }  

[/pre]