## Data組件基礎05：再談Data組件新增，查詢，保存 前面我們介紹了Data的數據新增，查詢，保存；接下來我們來看看怎么進行新增，查詢，保存邏輯的擴展； Data上有onCustomNew、onCustomRefresh、onCustomSave事件，這幾個事件就是給開發者用于實現data的新增、查詢、保存邏輯的；看到這大家可能會產生疑問：“為什么需要這幾個事件，加載數據不是可以使用loadData嗎？保存也可以自己發ajax請求啊？” 有這些疑問很正常，開發者確實可以不需要這些事件來實現data的新增、查詢、保存邏輯，但是我們還是推薦使用onCustomNew、onCustomRefresh、onCustomSave事件重新實現； 原因是因為Data組件作為前端UI中的數據核心組件，很多組件都需要感知data的數據狀態，同時Data組件內部也維護著自己的狀態；當跳出data現有機制和接口很有可能其他關聯的組件就失去了與之關聯感知的能力，同時data自身提供的新增、查詢、保存操作也無法使用開發者擴展的邏輯。例如：如果加載數據開發者自己使用loadData加載，最簡單的mobile中scrollView組件上拉加載數據能力就無法感知擴展的邏輯。 下面通過一個具體的案例來講解onCustomNew、onCustomRefresh、onCustomSave事件擴展新增、查詢、保存邏輯 首先我們新建一個.w,在.w中放入data組件（注意：不是BizData組件），定義列FID、fString、fInteger、fFloat， 增加data的onCustomRefresh，由于接管了onCustomRefresh事件，autoLoad=true自動會使用新的邏輯加載數據 代碼如下： //數據刷新接管實現 Model.prototype.masterDataCustomRefresh = function(event){ /* event包含 { "source" : 組件的js對象, "cancel" : 可修改，設置為true后中斷當前刷新動作, "limit" : 頁大小, "offset" : 偏移, "options" : 刷新給入的參數 } */ //這里簡單演示從datas.json文件中取數據，還可以傳遞limit、offset實現分頁的邏輯 var masterData = event.source; $.ajax({ type: "GET", url: require.toUrl('./datas.json'), dataType: 'json', async: false,//使用同步方式，目前data組件有同步依賴 cache: false, success: function(data){ masterData.loadData(data);//將返回的數據加載到data組件 }, error: function(){ throw justep.Error.create("加載數據失敗"); } }); }; 增加data的onCustomSave 代碼如下： //接管保存邏輯，這里將修改的數據送到服務端save.j，保存為save.json文件 Model.prototype.masterDataCustomSave = function(event){ /* event包含 { "source" : 組件的js對象, "cancel" : 可修改，設置為true后中斷當前保存動作 "options" : 保存時給入的參數 } */ var masterData = event.source; $.ajax({ type: "POST", url: require.toUrl('./save.j'), contentType: 'application/json', async: false, cache: false, data: JSON.stringify(masterData.toJson(true)),//序列化data修改的數據 success: function(data){ masterData.applyUpdates();//更新數據狀態 }, error: function(){ throw justep.Error.create("保存數據失敗"); } }); }; 針對保存服務端新增“save.j”,實現數據保存 import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.justep.filesystem.FileSystemWrapper; import com.justep.ui.JavaServer; //簡單實現數據保存，把修改的數據存入文件save.json public class Save extends com.justep.ui.impl.JProcessorImpl { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String fileName = FileSystemWrapper.instance().getRealPath( "/UI2/system/components/justep/data/demo/save.json"); File outFile = new File(fileName); OutputStream ro = new FileOutputStream(outFile); String postData = JavaServer.getPostData(request); byte[] b = postData.getBytes("UTF-8"); ro.write(b); ro.flush(); ro.close(); } } 增加data的onCustomNew 代碼如下： //接管新增邏輯，簡單使用new.json文件返回新增數據，還可以根據給入的默認值實現新增的數據默認值處理 Model.prototype.masterDataCustomNew = function(event){ /* event包含 { "source" : 組件的js對象, "option" : 新增時傳入的option參數，包括：parent,defaultValues "data" : 行數據對象數組[{sName:'LiMing',sAge:18},...]，數組的length決定新增的行數 data格式： [ { "列名" : 默認值, "列名" : 默認值, ... }, ... ] } */ $.ajax({ type: "GET", url: require.toUrl('./new.json'), dataType: 'json', async: false, cache: false, success: function(data){ event.data = data; }, error: function(){ throw justep.Error.create("新增數據失敗"); } }); }; 到這里我們就簡單實現了data的查詢、新增、保存 源碼：[demo.zip](http://wex5.com/cn/wp-content/uploads/2015/06/demo.zip)—–解壓后放入/UI2/system/components/justep/data/demo目錄