Kendo mvvm 项目开发指南 第八章 kendo组件与树组件
第八章kendo组件与树组件kendo组件中的模板绑定是最常使用到的开发技巧之一，模板语法是kendo mvvm模式中必须掌握的知识点。在开发中会大量的使用到kendo绑定页面元素遍历数据模型数据，判断语法来进行业务逻辑判断。kendo 组件元素 （例子15）kendo类也是kendo中的基本组件，包含了很多通用的功能。kendo 元素绑定bind（例子15）可以使用kendo组件将页面中一
·
第八章 kendo组件与树组件
kendo组件中的模板绑定是最常使用到的开发技巧之一，模板语法是kendo mvvm模式中必须掌握的知识点。在开发中会大量的使用到kendo绑定页面元素遍历数据模型数据，判断语法来进行业务逻辑判断。
kendo 组件元素 （例子15）
kendo类也是kendo中的基本组件，包含了很多通用的功能。
kendo 元素绑定bind（例子15）
可以使用kendo组件将页面中一个元素与一个简单独立的业务数据事件类绑定在一起。这样可以更加灵活的变化和使用kendo组件与html页面的元素关系。
在例子中我们在index.ts 视图引导类中初始化一个业务类与页面元素的对应关系，将它们绑定在一起。
kendo 的组件绑定模板中html元素与一个简单的业务逻辑类
import template from './template.hbs';
import ViewModel from './ViewModel';
/**
* 练习入口
*/
export default function initIndex(): ViewWithTitle {
const vm = new ViewModel();
const view = new kendo.View(
template({
name:'DataSource',
}),
{
model: vm,
init:function(){
const viewModel = kendo.observable({
name: '韬哥',
mail: 'zht114001@163.com',
onSaveUp():void {
const name = this.get('name');
const mail = this.get('mail');
alert('Hello, ' + name + ' ' + mail + '!!!');
}
});
//页面元素与viewModel业务逻辑类建立绑定
kendo.bind($('#zhtview'), viewModel);
}
},
);
return { title: 'kendo', view};
}
template.hbs（模板）
------------------------------------------------------
<div id="zhtview">
<label>First Name:<input data-bind="value: name" />
</label>
<label>Last Name:<input data-bind="value: mail" />
</label>
<button data-bind="click: onSaveUp">提交</button>
</div>
kendo 组件内嵌模板template使用（例子15）
kendo 组件提供了一个将模板编译为构建 HTML 的函数，这样为我们开发提供了更加灵活操作性。同时这个模板使用自己的模板语法，也弥补了kendo引入的模板(html页面)时候有些功能和数据读取与操作困难的问题。
模板使用 # = 数据模型引用 # 和 #:数据模型引用 # 这两种方式来加载数据模型中的数据信息内容量 {数据模型引用:‘数据’}。
#if (foo) {# foo is true #}# 使用这种方式进行脚本判断。
export default function initIndex(): ViewWithTitle {
const vm = new ViewModel();
const view = new kendo.View(
template({
name:'DataSource',
}),
{
model: vm,
//初始化方法
init:function(){
$('#zhttemplate1').html(
kendo.template('我读取模板信息: #: html #')
({html:'template初始化成功'}));
$('#zhttemplate2').html(
kendo.template('#if (foo) {# foo is true #}#')
({foo:true}));
}
},
);
return { title: 'kendo', view};
}
例子2
逻辑类中定义模板绑定判断功能。
export default class ViewModel extends kendo.data.ObservableObject {
//构造函数
constructor() {
super();
}
public foo:any;
public istemplate():void{
this.foo=false;//定义为false
$('#zhttemplate2').html(
kendo.
template('#if (foo) {# foo is true #}#')(this));
}
}
template.hbs（模板）
------------------------------------------------------
<div class="mypage">
<h1 id="zhttemplate2"></h1>
<button
data-bind="click:istemplate">zhttemplate2 模板改变</button>
</div>
模板中数组循环遍历
可以在逻辑类中定义数组信息传递到模板中，在模板中循环遍历数组的信息组成html元素的字符串，在将这个字符串传递给对应的html元素。
template 中 # for (var i = 0; i < data.length; i++) { # 模板的循环体 # } #
export default class ViewModel extends kendo.data.ObservableObject {
//template 模板循环内容
public onfor():void{
const data = [{name:'a1',id:1},
{name:'a2',id:2},
{name:'a3',id:3},
{name:'a4',id:4}];
//获得模板数据内容
const template =kendo.template($('#javascriptTemplate').html());
//将模板与数据绑定后生成的html字符串传，在examplezhtbs元素上生成html
$('#examplezhtbs').html(template(data));
}
}
template.hbs（模板）
------------------------------------------------------
<script id="javascriptTemplate" type="text/x-kendo-template">
<ul>
//数组循环
# for (var i = 0; i < data.length; i++) { #
<li>#= data[i].id# ---- #= data[i].name #</li>
# } #
</ul>
</script>
kendo comfirm
和window.comfirm()方法的使用一样，但是需要在comfirm内设函数中定义确认功能。
kendo.confirm("Confirm text")
.done(function(){
//确认部分代码
})
.fail(function(){
//取消部分代码
});
Kendo treeview 树组件（例子15）
kendo提供了tree树型UI主键功能。我们需要使用HierarchicalDataSource 数据源来和treeview 进行mvvm数据绑定与对接。使用data-text-field元素来指定数据结构中对应数据的节点属性名称。
export default class ViewModel extends kendo.data.ObservableObject {
//构造函数
public dataSource1: kendo.data.HierarchicalDataSource;//创建数据源引用
constructor() {
super();
this.dataSource1=new kendo.data.HierarchicalDataSource({
data: [
{ ProductName: '***总公司',ID:1,
items: [
{ ProductName: '第一分公司',ID:10},
{ ProductName: '第二分公司',ID:20,
items: [{ProductName: '第201分公司',ID:2010}]}
] } |
] |
});//创建一个数据源 |
} |
} |
template.hbs（模板） |
-----------------------------------------------------|
<div> |
data-role="treeview" |
data-text-field="['ProductName']" <-------|
data-bind="source: dataSource1">
</div>
树节点事件设置
kendo mvvm模式下需要载模板中定义一个events:{select:onSelet} 事件，我们在逻辑类中定义这个树组件的事件实现。
export default class ViewModel extends kendo.data.ObservableObject {
.........
//树事件
public onSelet(e:any):void{
const treenode:kendo.data.Node//设置树节点选择内容
= $('#zhttreeview').data('kendoTreeView')//kendo 获得树内容
.dataItem(e.node);//获得节点对象内容json对象{}
alert(treenode.get('ID'));//获得json对象内的属性值
}
}
template.hbs（模板）
------------------------------------------------------
<div
id="zhttreeview"
data-role="treeview"
data-text-field="['ProductName']"
data-bind="source: dataSource1,
events:{select:onSelet}">
</div>
2个树联动信息
两个kendo 树组件进行事件联动。定义两个树的数据源A树dataSource1，B树dataSource2，在构造方法中初始化这两个数据源，在模板中定义两个树的组件，分别绑定数据源data-bind="" dataSource1和dataSource2。
通过第一个树的节点点击事件，通过第一个A树的节点内容为dataSource2数据源的绑定不同的数据值，这个时候B树就会根据dataSource2数据源内容的变化而变化。
export default class ViewModel extends kendo.data.ObservableObject {
//构造函数
public dataSource1: kendo.data.HierarchicalDataSource;//创建数据源引用
public dataSource2: kendo.data.HierarchicalDataSource;//创建数据源引用
constructor() {
super();
this.dataSource1=
new kendo.data.HierarchicalDataSource({
data: [
{ ProductName: '***总公司',ID:10,
items: [
{ ProductName: '第一分公司',ID:100},
{ ProductName: '第二分公司',ID:200 ,
items: [{ProductName: '第201分公司',ID:2010 }]}
] }
]
});//创建一个数据源
this.dataSource2=new kendo.data.HierarchicalDataSource({
data: [
{ text: '初始化200', items: [
{ text: '初始化200' }
] }
]
});
}
//树事件
public onSelet(e:any):void{
const treenode:kendo.data.Node= $('#zhttreeview').data('kendoTreeView').dataItem(e.node);
const id=treenode.get('ID')
console.log(e);
if(id==200){
this.dataSource2.data([//树2的数据源加载
{ text: '初始化2220', items: [
{ text: '部门2220' }
] }
]);
}
if(id==100){
this.dataSource2.data([//树2的数据源加载
{ text: '初始化100', items: [
{ text: '部门1000' }
] }
]);
}
if(id==10){
this.dataSource2.data([//树2的数据源加载
{ text: '初始化1', items: [
{ text: '部门1' }
] }
]);
}
}
}
template.hbs（模板）
------------------------------------------------------
<div
id="zhttreeviewb"
data-role="treeview"
data-text-field="['text']"
data-bind="source: dataSource2">
</div>
<div
data-role="treeview"
data-text-field="['DeviceGroupName', 'DeviceName']"
data-bind="source: dataSource">
</div>
其他附件
javaWeb服务类
DataSource使用到的java代发web端的示例代码，我们的web端使用的是spring boot来实现的。如果使用其他语言需要方法web端的rest josn串就可以实现这个示例。
@RestController
public class RestMainController{
@PostMapping("/zhtbs/test")
public List getFind(){
return findlist(null);
}
@PostMapping("/zhtbs/save")
public List save(@RequestBody Map user){
System.out.println("save "+user.get("name"));
return findlist(user);
}
@PostMapping("/zhtbs/up")
public Map up(@RequestBody Map user){
System.out.println("up "+user.get("name")
+" "+user.get("myid"));
return user;
}
@PostMapping("/zhtbs/del")
public Map del(@RequestBody Map user){
System.out.println("delete "+user.get("name")
+" "+user.get("myid"));
return user;
}
@PostMapping("/zhtbs/pagelist")
public Map pagelist(@RequestBody Map user){
System.out.println("page "+user);
List list=findlist(null);
Map pagemape=new HashMap();
pagemape.put("data",list);//内容
pagemape.put("count",5);//总条数
return pagemape;
}
public List findlist(Map user){
List list=new ArrayList();
Map map=new HashMap();
map.put("myid","1");
map.put("name","zht");
list.add(map);
Map map1=new HashMap();
map1.put("myid","2");
map1.put("name","b1");
list.add(map1);
Map map2=new HashMap();
map2.put("myid","3");
map2.put("name","b2");
list.add(map2);
Map map3=new HashMap();
map3.put("myid","4");
map3.put("name","b3");
list.add(map3);
Map map4=new HashMap();
map4.put("myid","5");
map4.put("name","b5");
list.add(map4);
if(user!=null){
list.add(user);
}
return list;
}
}
源码下载地址https://pan.baidu.com/s/1Q6pbC2SR70HKCeVXgOGUPQ
提取：1234
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)