KendoUI使用日记(一)TreeList

摘要
我们公司的前台j架构使用的是kendoui。这个磨人的小妖精,界面还是很漂亮的,就是中文的资料很少,而且无离线api。哎呀呀呀,只能一边查api,一边用了。
我木有调查过使用kendoui使用者有多少,现在,我把使用摸索的过程总结出来,希望能帮到使用中的小伙伴。
TreeList是树表界面是长这个模样的。
集合了Tree 和Grid两个特性
 
以下是几个我用到的功能。咳咳,代码是从官网上扒下来的,如果引入js失效,那大概就是他们换地址了吧……
  • id为字符串
treelist 的demo,id都是数字形式,而我们的数据库中的数据是UUID的形式。我们先来测试,把多余的功能去掉。
   
   
  1. $("#treelist").kendoTreeList({
  2. dataSource: dataSource,
  3. height: 540,
  4. columns: [
  5. { field: "Position" },
  6. { field: "Name" },
  7. { field: "Phone" }
  8. ]
  9. });
代码如此简单。
dataSource长这个模样
   
   
  1. schema: {
  2. model: {
  3. id: "id",
  4. expanded: true
  5. }
  6. }
好了,说说我遇到的坑吧,他们的local-data-binding完全木有问题,有问题的remote-data-binding从后台取的数据怎么就成了这个样子?
   
   
  1. schema: {
  2. model: {
  3. id: "EmployeeId",
  4. parentId: "ReportsTo",
  5. fields: {
  6. EmployeeId: { type: "number", nullable: false },
  7. ReportsTo: { field: "ReportsTo", nullable: true }
  8. }
  9. }
  10. }
看到问题所在了么,他们的id字段变了,这个没有问题,但是加上了一个  type:"number" 的限定,也就是说,只能传入数字格式的id字段……把这个配置项去掉了就可以了
  • 自定义操作按钮:
kendoui内置了几个行内按钮,当然,和grid一样,也提供了自定义的行内操作
把没啥大用东西删掉,还是出来了这么一大堆的东西,关键其实是就command,如果你要查API,请参照columns.command
   
   
  1. command: [ "edit", "destroy",
  2. {//前面两个是系统中自己的按钮命令,而这一个是自己添加的,可以进行操作,并可以取到列表中的信息
  3. name: "hehe",
  4. text: "呵呵",
  5. click: function(e){
  6. var tr = $(e.target).closest("tr");
  7. var data = this.dataItem(tr);
  8. console.log("Details for: " + data.Name);
  9. alert(data.Name);
  10. }
  11. }
  12. ],

c代码
  • 过滤字段
这个我没记错的话,demo也有,不过我们用到了,我就拿出来用用吧
   
   
  1. filterable: {
  2. //这里的过滤器,意思是如果是字符串,就滤留下包含的行,如果是数字,就只留下等于的行
  3. showOperators: false,
  4. operators: {
  5. string: {
  6. contains: "包含"
  7. },
  8. number: {
  9. equal: "等于"
  10. }
  11. }
  12. },

目前用到这么几种需求,如果大家还有其他的需要实现,也欢迎在评论区讨论。
查看详细代码  http://download.csdn.net/detail/aslan16/9558777
谢谢阅读。
下周计划:treelist
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值