LigerUi之Grid使用詳解（二）——數據編輯

1、問題概述

　　在開發web信息管理系統時，使用Web前端框架能夠幫助咱們快速搭建一組風格統一的界面效果，並且可以解決大多數瀏覽器兼容問題，提高開發效率。因此上一篇文章爲你們介紹了LigerGrid的顯示數據的基本用法（傳送門：http://www.cnblogs.com/jerehedu/p/4218560.html ），本次爲你們繼續介紹Grid的其餘用法，好比使用LigerGrid如何進行數據編輯與保存。

　　咱們在作應用時可能會遇到這樣的需求，要求在同一個頁面能夠同時編輯主從表數據並傳遞到後臺保存，以下圖所示頁面：

　　那如何使用LigerGrid如何進行數據編輯與保存呢？一塊兒來看一下吧！

2、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數據中不含有此單元格的屬性及值。

　　在此咱們能夠經過兩種方式解決這個問題：

　　一、在後臺解析JSON-lib解析json串時，提早數據前經過JSONObject對象的containsKey方法先判斷是否含有要提取的數據，在此就很少加贅述。

　　二、 修改前臺，在表格新增行時，爲每一行添加默認數據。代碼以下：

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/ 
本文版權歸煙臺傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。