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
經過測試發現,當我們在前臺通過使用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表格編輯資料和彙總資料的一些用法。小夥伴們看懂了嗎?沒看懂的可以點選原始碼下載檢視原始碼哦!
var csj_data;
$.ajax
({
cache: false,
async: false,
type: 'post',
dataType: 'json',
data: { aaa: "1" },
url: "../handle/LaCode.ashx?ajaxaction=Select_FangAn",
success: function (data) {
csj_data = data;
}
});
{ display: "所屬方案", name: "Program_Id", width: 120, type: "text", align: "left", validate: { required: true },
editor: { type: 'select', data: csj_data, valueColumnName: 'Program_Id', displayColumnName: 'Program_Name' },render: function (rowdata) {
for (var i = 0; i < csj_data.length; i++) {
if (csj_data[i]['Program_Id'] == rowdata.Program_Name)
return csj_data[i]['Program_Name']
}
return rowdata.Program_Name;
}