KendoUI使用日记（一）TreeList

摘要

我们公司的前台j架构使用的是kendoui。这个磨人的小妖精，界面还是很漂亮的，就是中文的资料很少，而且无离线api。哎呀呀呀，只能一边查api，一边用了。

我木有调查过使用kendoui使用者有多少，现在，我把使用摸索的过程总结出来，希望能帮到使用中的小伙伴。

TreeList是树表界面是长这个模样的。

集合了Tree 和Grid两个特性

 

以下是几个我用到的功能。咳咳，代码是从官网上扒下来的，如果引入js失效，那大概就是他们换地址了吧……

• id为字符串
  

treelist 的demo，id都是数字形式，而我们的数据库中的数据是UUID的形式。我们先来测试，把多余的功能去掉。

   
   
$("#treelist").kendoTreeList({
	dataSource: dataSource,
	height: 540,
	columns: [
		{ field: "Position" },
		{ field: "Name" },
		{ field: "Phone" }
	]
});

代码如此简单。

dataSource长这个模样

   
   
schema: {
	model: {
		id: "id",
		expanded: true
	}
}

参考源码： http://demos.telerik.com/kendo-ui/treelist/local-data-binding

好了，说说我遇到的坑吧，他们的local-data-binding完全木有问题，有问题的remote-data-binding从后台取的数据怎么就成了这个样子？

   
   
schema: {
	model: {
		id: "EmployeeId",
		parentId: "ReportsTo",
		fields: {
			EmployeeId: { type: "number", nullable: false },
			ReportsTo: { field: "ReportsTo", nullable: true }
		}
	}
}

看到问题所在了么，他们的id字段变了，这个没有问题，但是加上了一个  type:"number" 的限定，也就是说，只能传入数字格式的id字段……把这个配置项去掉了就可以了

• 自定义操作按钮：

kendoui内置了几个行内按钮，当然，和grid一样，也提供了自定义的行内操作

把没啥大用东西删掉，还是出来了这么一大堆的东西，关键其实是就command,如果你要查API，请参照columns.command

   
   
command: [ "edit", "destroy",
	{//前面两个是系统中自己的按钮命令，而这一个是自己添加的，可以进行操作，并可以取到列表中的信息
		name: "hehe",
		text: "呵呵",
		click: function(e){
			var tr = $(e.target).closest("tr"); 
			var data = this.dataItem(tr);
			console.log("Details for: " + data.Name);
			alert(data.Name);
		}
	}
],

c代码

• 过滤字段

这个我没记错的话，demo也有，不过我们用到了，我就拿出来用用吧

   
   
filterable: {  
//这里的过滤器，意思是如果是字符串，就滤留下包含的行，如果是数字，就只留下等于的行
	showOperators: false,
	operators: {
		string: {
			contains: "包含"
		},
		number: {
			equal: "等于"
		}
	}
},

目前用到这么几种需求，如果大家还有其他的需要实现，也欢迎在评论区讨论。

查看详细代码  http://download.youkuaiyun.com/detail/aslan16/9558777

谢谢阅读。

下周计划：treelist