easyui学习记录:combotree的使用总结
一、简介:
combotree控件是对combo(自定义下拉框)与tree(树)控件的扩展,它与combobox(下拉列表框)类似,但是它将下拉列表框的列表替换成了树。该控件支持树状态的复选框从而实现多选。
1、属性
树形下拉框的属性扩展自combo与tree,其重写的属性如下:
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
editable | boolean | 定义用户是否可以直接输入文本到字段中。 | false |
2、方法
树形下拉框的方法扩展自combo(自定义下拉框),其重写和新增的方法如下:
方法名 | 方法参数 | 描述 |
---|---|---|
options | none | 返回属性对象。 |
tree | none | 返回树形对象。以下的例子显示了如何得到选择的树节点。
|
loadData | data | 读取本地树形数据。
代码示例:
|
reload | url | 再次请求远程树数据。通过'url'参数重写原始URL值。 |
clear | none | 清空控件的值。 |
setValues | values | 设置组件值数组。
代码示例:
|
setValue | value | 设置组件值。
代码示例:
|
3、事件
该控件的事件完全继承自combo与tree.
二、用法
该控件有两种创建的方式:通过标签的方式创建以及通过javascript编程的方式创建,在下面的例子中着重以编程的方式实现。
html代码:
1 |
|
1、本地数据源的加载
通过继承自tree的"data"属性来实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
效果图:
通过方法“loadData”实现:
HTML代码:
1 |
|
js代码:
1 2 3 4 5 6 7 8 9 10 11 |
|
2、异步加载数据
在介绍异步加载数据之前,先讲解一下数据源的格式。其格式为json,每个节点都具备一下属性:
-
id:节点ID,对加载远程数据很重要。
-
text:显示节点文本。
-
state:节点状态,'open' 或 'closed',默认:'open'。如果为'closed'的时候,将不自动展开该节点。
-
checked:表示该节点是否被选中。
-
attributes: 被添加到节点的自定义属性。
-
children: 一个节点数组声明了若干节点。
数据源格式举例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
异步加载数据举例:
前端js代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
在这里我是通过一般处理程序来接受传递到后台的参数然后进行一系列的逻辑处理生成一个json。
三、在实现过程中遇到的问题以及解决方法记录
1、json的格式
2、C#中引号的嵌套
通过转义字符来实现:\"
3、如何生成combotree的数据源
通过递归的算法来实现,直接上代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
|
3、combotree如何实现只允许选择叶子节点
推荐阅读
-
easyui学习记录:combotree的使用总结
-
Yii2的相关学习记录,alert等美化、confirm异步、session中的flash及小部件的使用(六),yii2confirm
-
基于Proteus与keil联合仿真的51单片机学习记录(五)(使用T/C的工作方式0定时)
-
基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
-
MyBatis学习总结(16)Mybatis使用的几个建议
-
使用Spring Data JPA的坑点记录总结
-
Docker使用的个人学习总结
-
Vue2.0使用过程常见的一些问题总结学习
-
Docker使用的个人学习总结
-
一、Java学习中的总结---方法的使用