LigerUI之Grid使用詳解(三)——字典數(shù)據(jù)展示（杰瑞教育原創(chuàng)）

qdjianghao

一、問題概述

　　在開發(fā)web信息管理系統(tǒng)時，使用Web前端框架可以幫助我們快速搭建一組風(fēng)格統(tǒng)一的界面效果，而且能夠解決大多數(shù)瀏覽器兼容問題，提升開發(fā)效率。所以上一篇文章為大家介紹了LigerGrid的顯示數(shù)據(jù)的基本用法，本次為大家繼續(xù)介紹Grid的其他用法，比如使用LigerGrid如何進(jìn)行數(shù)據(jù)編輯與保存。

　　我們在做應(yīng)用時可能會遇到這樣的需求，要求在同一個頁面可以同時編輯主從表數(shù)據(jù)并傳遞到后臺保存，如下圖所示頁面：

　　那如何使用LigerGrid如何進(jìn)行數(shù)據(jù)編輯與保存呢？一起來看一下吧！

二、LigerGrid進(jìn)行數(shù)據(jù)編輯與保存

　　表格的列對象中提供了一個editor編輯器屬性，通過這個editor屬性，我們可以編輯表格行中的每一個單元格。單元格編輯器editor含有多個屬性，其中type屬性可以指定單元格編輯數(shù)據(jù)的格式，目前提供的type屬性值有string、select、date、spinner等等，除type屬性外，還提供其他屬性可以配合type使用。具體就不在這里一一列舉，有興趣可自行查看api文檔。Editor具體用法可參照如下代碼：在設(shè)置表格列屬性是為要編輯的單元格添加editor屬性。

復(fù)制內(nèi)容到剪貼板

• {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完成單元格數(shù)據(jù)的編輯，最終我們需要將表格中所有的數(shù)據(jù)編輯后提交后臺進(jìn)行處理，使用如下代碼可獲取表格數(shù)據(jù)：

復(fù)制內(nèi)容到剪貼板

• var grid = $(“maingrid”).ligerGrid({……});  
• var data = grid.getData();  
• var dataStr=JSON2. stringify (data);  
  

　　取到的數(shù)據(jù)是json對象，使用JSON組件將json對象轉(zhuǎn)換為json格式的字符串，傳遞到后臺后，我們使用JSON-lib框架將json串在封裝成java實(shí)體對象。然而在解析數(shù)據(jù)的時候后臺頻繁發(fā)生異常net.sf.json.JSONException: JSONObject["pBrand"] not found.異常得原因很明顯，json串中不含有某些屬性值，也就是說前臺傳遞過來的表格中的數(shù)據(jù)并不完全。

　　經(jīng)過測試發(fā)現(xiàn)，當(dāng)我們在前臺通過使用ligerGrid提供的方法addRow或者addEditRow新增一行后，如果沒有對行中某個單元格進(jìn)行編輯，我們在獲取的json數(shù)據(jù)中不含有此單元格的屬性及值。

　　在此我們可以通過兩種方式解決這個問題：

　　1、在后臺解析JSON-lib解析json串時，提前數(shù)據(jù)前通過JSONObject對象的containsKey方法先判斷是否含有要提取的數(shù)據(jù)，在此就不多加贅述。

　　2、 修改前臺，在表格新增行時，為每一行添加默認(rèn)數(shù)據(jù)。代碼如下：

復(fù)制內(nèi)容到剪貼板

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

         ligerGrid除了提供editor編輯器之外還提供了totalSummary屬性，可輔助我們對表格中某列進(jìn)行統(tǒng)計(jì)，如統(tǒng)計(jì)某列數(shù)據(jù)的總和、行數(shù)、最大值、最小值、平均值等等，我們可以通過type屬性進(jìn)行指定，代碼及效果如下：
復(fù)制內(nèi)容到剪貼板

• {display:"數(shù)量",name:"nums",type:"int",isAllowHide:false,align:"left",width:80,  
•     editor:{type:"spinner"},  
•     totalSummary:{  
•         type:'sum,count,max,min,avg'  
•     }  
• }  
  

　　以上數(shù)量列中的展示效果是totalSummary默認(rèn)的效果，并不是我們想要的，我們可以為totalSummary屬性提供render函數(shù)進(jìn)行渲染來實(shí)現(xiàn)我們的效果，可參考如下代碼：

復(fù)制內(nèi)容到剪貼板

• {display:"數(shù)量",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'>數(shù)量："+suminf.sum+"</span>";  
•     }  
•     }  
• }  
  

　　那么如何計(jì)算表格中的金額及金額總計(jì)呢？每行的金額比較容易求出，只需要在金額列中的render函數(shù)中計(jì)算即可，如：

復(fù)制內(nèi)容到剪貼板

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

　　從效果圖可以看出金額列是能夠得出結(jié)果的，但是總金額卻不能正確計(jì)算，這是因?yàn)閠otalSummary的值是在新增行、刪除行或者編輯所在列數(shù)據(jù)之后才進(jìn)行計(jì)算。那么如何得出總金額呢？我們可以借助ligerGrid提供的與編輯相關(guān)的事件如onBeforeEdit、onAfterEdit、onAfterShowData等，如下：

復(fù)制內(nèi)容到剪貼板

• var totalNums=0,totalPrice=0;  
• //觸發(fā)編輯事件前給總價賦值  
• 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表格編輯數(shù)據(jù)和匯總數(shù)據(jù)的一些用法。小伙伴們看懂了嗎？