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.csdn.net/detail/aslan16/9558777 谢谢阅读。 下周计划：treelist