当前位置 博文首页 > zhtbs的博客：Kendo mvvm 项目开发指南 第五章 DataSource操作
? KenDo所有组件与服务器进行连接通信，将ype服务器中的数据拿到数据源DataSource中，在通过DataSource类的将服务器的数据赋值给kendo其他组件。在kendo所有mvvm模式中与服务器连接的请求都是用DataSource类来实现的，DataSource类中提供啦大量的Ajax实现方法。也可以根据业务的实际情况重新定义新的方法覆盖给DataSource类中的方法，在事件中引用这些方法来实现业务功能。
? 数据源远程服务配置-URL，HTTP动词，HTTP标头等访问请求功能，都会使用到transport选项。transport提供了查询，保存，修改，删除4个通用方法，使用者通过设置这4个方法达到与远程服务器进行通信，进行对应的业务数据交互。
| 方法 | 功能 | 备注 |
|---|---|---|
| create | 新增 | |
| read | 查询 | |
| delete | 删除 | |
| update | 修改 |
? 示例创建一个数据源，在数据源transport属性中创建一个查询方法。
ViewModel.ts(业务逻辑类)
--------------------------------------------------------------------
export default class ViewModel extends kendo.data.ObservableObject {
//定义远程连接数据源
public dataSource = new kendo.data.DataSource(
{//定义连接远程服务器，数据源信息内容。
transport: {
read: {//定义查询方法
url: '/zhtbs/zhtbs/test',//服务访问路径地址
dataType: 'json',//返回数据类型
type: 'POST'//数据方类型
}
}
}
);
//构造函数
constructor() {
super();
//调用数据源中的查询方法将查询到的数据传给kendoUI绑定数据
this.dataSource.read();
}
}
template.hbs（模板）
---------------------------------------------------------------
<div data-role="grid"
data-selectable="multiple,row"
data-columns="[
{ field: 'id', title: 'id', width:150 },
{ field: 'name', title: '名字', width:200 }
]"
data-editable="popup"
data-bind="source:dataSource"
style="height:300px; margin-top:10px;"
id="grid"></div>
? read方法核心是使用了Jquery.ajax方法发起远程服务请求，将远程服务获得到数据绑定给KendoUI组件。read方法最重要的属性有url,type,dataType。分别是url服务器路径，type请求类型，dataType数据返回类型。在后边也会介绍read中的其他属性。read的属性也和create，delete，update等方法中的属性同时通用。
1 创建服务器数据
? 使用spring boot 架构创建一个RestController容器。
@RestController
public class RestMainController{
@PostMapping("/zhtbs/test")
public List getFind(){
List list=new ArrayList();
Map map=new HashMap();
map.put("id","1");
map.put("name","zht");
list.add(map);
return list;
}
}
2 创建一个DataSource 数据源
ViewModel.ts(业务逻辑类)
-----------------------------------------------------------------------------
export default class ViewModel extends kendo.data.ObservableObject {
//定义远程连接数据源
public dataSource = new kendo.data.DataSource(
{//定义连接远程服务器，数据源信息内容。
transport: {
read: {//定义查询方法
url: '/zhtbs/zhtbs/test',//服务访问路径地址
dataType: 'json',//返回数据类型
type: 'POST'//数据方类型
}
}
}
);
//构造函数
constructor() {
super();
this.dataSource.read();//调用数据源中的查询方法将查询到的数据传给kendoUI绑定数据
}
}
3 在模板中将数据源与KendoUI组件进行绑定data-bind=“source:dataSource” 。
<div data-role="grid"
data-selectable="multiple,row"
data-columns="[
{ field: 'id', title: 'id', width:150 },
{ field: 'name', title: '名字', width:200 }
]"
data-editable="popup"
data-bind="source:dataSource"
style="height:300px; margin-top:10px;"
id="grid"></div>
? 这是一个完成的DataSource 数据源与web服务器通信的mvvm代码示例。web服务器负责产生业务数据代码，通过前台脚本的DataSource类进行ajax 数据通信，DataSource获得到web服务器产生的数据，将它绑定给模板中的kendo组件。
? 在KenDoMvvm框架中我们使用 DataSource 中的create和update方法向远处服务器发送数据进行新增和修改操作。开发者需要覆盖和重新定义这两个方法中的属性，然后执行dataSource.sync();方法DataSource 就会提交数据高远程服务中。
? 这里有一个问题dataSource.sync();怎么知道我们是新增数据还是修改数据呢？原来问题的答案在dataSource 类中的 schema: { model: { id: ‘id’} } schema下的model方法的定义一个添加与删除使用的数据模型，如果传送的数据中没有id属性对应的数据就是新增，如果有id属性的数据就是修改方法。
1 创建一个dataSource数据源类
ViewModel.ts(业务逻辑类)
---------------------------------------------------------------------------
export default class ViewModel extends kendo.data.ObservableObject {
private product = kendo.data.Model.define({//定义数据模型
id: 'id'//定义添加与删除对比组键 <---------------------------------------|
}); ?? ?? |
//定义远程连接数据源 ??? ?? ?? ?? |
public dataSource = new kendo.data.DataSource( ??? ?? ?? ?? ? |
{ ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??|
transport: { ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? |
read: { |
url: '/zhtbs/zhtbs/test', |
dataType: 'json', |
type: 'POST' |
}, |
create: { |
url: '/zhtbs/zhtbs/save', |
dataType: 'json',//参数类型 ?? |
contentType: 'application/json;charset=UTF-8',//协议类型 ?? |
type: 'POST' |
}, |
update: { |
url: '/zhtbs/zhtbs/up', |
dataType: 'json',//参数类型 ?? |
contentType: 'application/json;charset=UTF-8',//协议类型 ??|
type: 'POST' |
}, |
parameterMap: function(data) {//参数过滤器 ?? ?? ?? ?? ?? ?? |
console.log(kendo.stringify(data)); |
//kendo.stringify将数据对象转成对应个数据结构 |
return kendo.stringify(data); |
} |
}, |
batch: false, |
schema: { |
model: this.product <--
