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的格式
http://baike.baidu.com/link?url=-NLPp39k0VtBHuPU0yER_K06ek_yTVzzXTzC05GwBuiAtIb-9HE7Ufgn85MbrjBXaeKUtxl_MnOPmumpv8n34q
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如何实现只允许选择叶子节点
原文网址:https://www.cnblogs.com/YanYongSong/p/5103123.html
参照网址:https://www.cnblogs.com/chanke/p/5707517.html
easyui学习记录:combotree的使用总结相关推荐
- Pytorch学习记录-torchtext和Pytorch的实例( 使用神经网络训练Seq2Seq代码)
Pytorch学习记录-torchtext和Pytorch的实例1 0. PyTorch Seq2Seq项目介绍 1. 使用神经网络训练Seq2Seq 1.1 简介,对论文中公式的解读 1.2 数据预 ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- springboot @cacheable不起作用_Springboot学习记录13 使用缓存:整合redis
本学习记录的代码,部分参考自gitee码云的如下工程.这个工程有详尽的Spingboot1.x教程.鸣谢! https://gitee.com/didispace/SpringBoot-Learnin ...
- 【Cmake】Cmake学习记录
Cmake学习记录 1.1 常例 add_library(gen_reference_infogen_reference_info/gen_reference_info.hgen_reference_ ...
- ASP.NETCore学习记录(一)
ASP.NETCore学习记录(一) asp.net core介绍 Startup.cs ConfigureServices Configure 0. ASP.NETCore 介绍 ASP.N ...
- Android开发技术周报176学习记录
Android开发技术周报176学习记录 教程 当 OkHttp 遇上 Http 2.0 http://fucknmb.com/2018/04/16/%E5%BD%93OkHttp%E9%81%87% ...
- add函数 pytorch_Pytorch学习记录-Pytorch可视化使用tensorboardX
Pytorch学习记录-Pytorch可视化使用tensorboardX 在很早很早以前(至少一个半月),我做过几节关于tensorboard的学习记录. https://www.jianshu.co ...
- java之字符串学习记录
java之字符串学习记录 public class StringDemo { public static void main(String[] args) { //静态初始化字符串 String s1 ...
- Redis的学习记录
Redis的学习记录 1.先导了解 1.1 NOSQL概述 1.1.1 为什么要用NoSql? 1.1.2 NoSql了解 1.1.3 NoSql特点 1.1.4 NoSQL的四大分类 2. Redi ...
最新文章
- 如何在arXiv上发表一篇文章
- 南京大学《物联网技术导论》课程
- python中ndarray和matrix
- python 怎么在一行获取多个数字
- GDataXML解析XML文档
- 【Linux】一步一步学Linux——gzip命令(63)
- Excel 2016双击无法打开文件的解决办法
- Android动态日志,一个简单的Android日志类
- python开发流程视频_自学Python的步骤和方法,Python入门全面视频无偿分享,使用Python开发的一些优点...
- E20170618-hm
- 备忘录模式-Memento
- 大数据思维与技术——中国大学MOOC课程笔记
- 如何使用 JQuery 提交 AJAX 表单
- [项目实战篇] Emos在线办公小程序--搭建项目
- windows运行中自定义命令创建/自定义bat文件创建
- GMS:基于网格运动统计的快速极度鲁棒的特征匹配
- Redis缓存雪崩/穿透/击穿
- Centi和HandCash共同开发支付握手协议
- Linux中磁盘读写速度测试
- 要成为游戏开发人员需要有以下书籍(二)