wex5 加载ajax数据,Data组件基础05：再谈Data组件新增，查询，保存

## 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目录