LigerGrid詳解：[2]數據編輯（傑瑞教育原創）?

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

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

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

LigerGrid進行數據編輯與保存

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

　　取到的數據是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、 修改前臺，在表格新增行時，為每一行添加默認數據。代碼如下：

　　以上數量列中的展示效果是totalSummary默認的效果，並不是我們想要的，我們可以為totalSummary屬性提供render函數進行渲染來實現我們的效果，可參考如下代碼：

從效果圖可以看出金額列是能夠得出結果的，但是總金額卻不能正確計算，這是因為totalSummary的值是在新增行、刪除行或者編輯所在列數據之後才進行計算。那麼如何得出總金額呢？我們可以藉助ligerGrid提供的與編輯相關的事件如onBeforeEdit、onAfterEdit、onAfterShowData等，如下：