easyui tree的简单使用
Tree 数据转换
所有节点都包含以下属性:
- id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data
- text: 显示的节点文本
- state: 节点状态, 'open' 或者 'closed', 默认是 'open'. 当设置为 'closed', 节点所有的子节点将从远程服务器站点加载
- checked: 指明检查节点是否选中.
- attributes: 可以添加到节点的自定义属性
- children: 一个节点数组,定义一些子节点
一些示例:
- [{
- "id":1,
- "text":"Folder1",
- "iconCls":"icon-save",
- "children":[{
- "text":"File1",
- "checked":true
- },{
- "text":"Books",
- "state":"open",
- "attributes":{
- "url":"/demo/book/abc",
- "price":100
- },
- "children":[{
- "text":"PhotoShop",
- "checked":true
- },{
- "id": 8,
- "text":"Sub Bookds",
- "state":"closed"
- }]
- }]
- },{
- "text":"Languages",
- "state":"closed",
- "children":[{
- "text":"Java"
- },{
- "text":"C#"
- }]
- }]
异步加载树
tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求.例如:
- <ul class="easyui-tree" data-options="url:'get_data.php'"></ul>
tree的加载是通过URL 'get_data.php'站点.子节点的加载依赖于父节点的状态.当展开一个关闭节点,如果节点没有子节点加载,将发送节点id值作为http参数,参数命名为'id'到远程服务器,通过以上URL定义.检索子节点数据
看看这个从服务器返回的数据
- [{
- "id": 1,
- "text": "Node 1",
- "state": "closed",
- "children": [{
- "id": 11,
- "text": "Node 11"
- },{
- "id": 12,
- "text": "Node 12"
- }]
- },{
- "id": 2,
- "text": "Node 2",
- "state": "closed"
- }]
节点1和节点2都是closed状态的,可以直接显示它们的子节点,当展开节点2时,发送值2到远程服务器检索子节点
这个教程创建异步的树click me!!!,展示如何写服务器端代码根据需求返回tree数据.
一、方法
Name | Type | Description | Default |
---|---|---|---|
url | string | 一个从远程服务器检索数据的URL. | null |
method | string | 检索数据的http方法类型. | post |
animate | boolean | 定义当展开/折叠节点的时候是否显示效果. | false |
checkbox | boolean | 定义是否显示checkbox在所有节点之前. | false |
cascadeCheck | boolean | 定义是否级联选择. | true |
onlyLeafCheck | boolean | 定义是否仅仅只是在叶子节点显示checkbox. | false |
lines | boolean | 定义是否显示树线. | false |
dnd | boolean | 定义是否启用drag and drop. | false |
data | array | 这个节点数据将被加载.
|
null |
loader | function(param,success,error) | 定义如何从远程服务器加载数据.返回false将终止这个动作.这个函数提供以下参数: param: 这个参数对象将传送给远程服务器. success(data): 当检索数据成功之后的回调函数. error(): 当检索数据出现异常的时候调用的回调函数. |
json loader |
loadFilter | function(data,parent) | 返回显示过滤后的数据. 返回的数据是标准的tree格式.这个函数提供以下参数: data:装载的是原始数据. parent: DOM 对象, 指定父节点. |
二、事件
许多回调函数提供'node'参数, 都包含以下属性:
- id: 绑定到节点的标识值.
- text:显示文本.
- iconCls: 显示icon的css样式.
- checked: 节点是否选中.
- state: 节点状态, 'open' 或者 'closed'.
- attributes: 绑定到节点的自定义属性.
- target: 目标 DOM 对象.
Name | Parameters | Description |
---|---|---|
onClick | node | 当用户点击节点的时候触发. 示例代码:
|
onDblClick | node | 当用户双击一个节点的时候触发. |
onBeforeLoad | node, param | 当一个请求加载数据在前触发, 返回false取消加载动作. |
onLoadSuccess | node, data | 当数据加载成功之后触发. |
onLoadError | arguments | 当数据加载失败触发,arguments参数和ajax jQuery 的'error'一样 . |
onBeforeExpand | node | 节点展开之前触发,返回false取消展开动作. |
onExpand | node | 当节点展开之后触发. |
onBeforeCollapse | node | 节点折叠之前触发,返回false将取消折叠动作. |
onCollapse | node | 当节点折叠之后触发. |
onCheck | node, checked | 当用户点击checkbox的时候触发. |
onBeforeSelect | node | 节点被选中之前触发,返回false取消选择动作. |
onSelect | node | 当节点选中之后触发. |
onContextMenu | e, node | 当在节点上右键点击的时候触发,代码示例:
|
onDrop | target, source, point | 当节点被放置的时候触发. target: DOM 对象,这个节点是被放置的目标. source: 源节点. point:指明drop操作,可用值有: 'append','top' or 'bottom'. |
onBeforeEdit | node | 在编辑节点之前触发. |
onAfterEdit | node | 编辑节点之后触发. |
onCancelEdit | node | 取消编辑动作时候触发. |
三、方法
Name | Parameter | Description |
---|---|---|
options | none | 返回tree 的options. |
loadData | data | 加载tree数据. |
getNode | target | 得到特定的节点对象. |
getData | target | 得到特定节点数据, 包含其子节点. |
reload | target | 重新加载tree数据. |
getRoot | none | 得到根节点, 返回节点对象 |
getRoots | none | 得到根节点, 返回节点数组. |
getParent | target | 得到父节点,target参数指明节点DOM对象. |
getChildren | target | 得到子节点,target 参数指明节点DOM对象. |
getChecked | none | 得到所有选中节点. |
getSelected | none | 得到选择节点和返回它,如果没有选择节点将返回null. |
isLeaf | target | 解决特定的节点是否是叶子节点, target 参数指明节点DOM对象. |
find | id | 查找特定的节点和返回节点对象,代码示例:
|
select | target | 选择一个节点,target 参数指明节点DOM对象. |
check | target | 设置特定的节点选中. |
uncheck | target | 设置特定的节点取消选中. |
collapse | target | 折叠一个节点, target 参数指明节点DOM对象. |
expand | target | 展开一个节点, target 参数指明节点DOM对象,当节点的状态是closed的时候 和没有子节点,节点id值(参数命名为'id')将发送给服务器请求子节点数据. |
collapseAll | target | 折叠所有节点. |
expandAll | target | 展开所有节点. |
expandTo | target | 展开从根节点到指定的节点 . |
append | param | 附加一些子节点到父节点中. param参数有两个属性: parent: DOM 对象,被添加到的父节点,如果没有分配,附加到根节点. data: array, the nodes data. Code example:
|
toggle | target | 切换expanded/collapsed 节点的状态,target 参数指明节点DOM对象. |
insert | param | 插入一个节点到特定节点的之前或之后.'param'参数包含以下属性: before: DOM 对象,节点插入到之前. after: DOM 对象, 节点插入到之后. data: object, 节点数据. 以下代码展示,如何插入新节点到选择节点之前:
|
remove | target | 移除一个节点和其子节点,target 参数指明节点DOM对象. |
pop | target | 移除一个节点和其子节点,这个方法和remove类似,但是它返回移除的节点数据. |
update | param | 更新特定的节点. 'param'参数包含以下属性: target(DOM 对象, 更新的节点),id,text,iconCls,checked,等等. 示例代码:
|
enableDnd | none | 启用 drag 和 drop 功能. |
disableDnd | none | 禁用 drag 和drop 功能. |
beginEdit | target | 开始编辑一个节点. |
endEdit | target | 结束编辑一个节点. |
cancelEdit | target | 取消编辑一个节点. |
easyui tree的简单使用的更多相关文章
- Jquery easyui Tree的简单使用
Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...
- 如何采用easyui tree编写简单角色权限代码
首先每个管理员得对应一个角色: 而角色可以操作多个栏目,这种情况下我们可以采用tree多选的方式: 在页面上js代码: $('#Permission').dialog({ title: '栏目权限', ...
- 【项目经验】EasyUI Tree
ITOO5.0开始了,我参加了伟大的基础系统,从整体上来说,基础系统有三个职能: 1.自己的核心职能--选课(公共选修课,专业选修课),课表: 2.为其他系统提供真实数据: 3.维护信息 而近两三天, ...
- easyui tree 的数据格式转换
一般用来储存树数据的数据库表都含有两个整型字段:id pid,所以我们查询出来的List一般是这样的(约定pId为-1的节点为根节点): var serverList = [ {id : 2,pid ...
- 从数据库读取数据并动态生成easyui tree构结
一. 数据库表结构 二.从后台读取数据库生成easyui tree结构的树 1.TreeNode树结点类(每个结点都包含easyui tree 的基本属性信息) import java.io.Seri ...
- Jquery easyui tree 一些常见操作
Tree: easyui tree的异步加载实现很简单,easyui的中文API文档中有实例(http://api.btboys.com/easyui/)——创建异步树形菜单,就是在tree node ...
- .NET easyUI tree树状结构
简单的制作后台制作写一个json(string类型)格式 public partial class goodstype_type : System.Web.UI.Page { public strin ...
- EasyUI Datagrid的简单使用
此前同样写过EasyUI Datagrid的demo,好记性不如烂笔头,何况记性也不是那么好,赶紧记录一下.照搬上一篇EasyUI Tree的格式. 实现效果:获取数据库表的数据,在EasyUI Da ...
- Easyui Tree方法扩展 - getLevel(获取节点级别)
Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...
随机推荐
- 【Android】页面迁移时先弹出键盘问题解决
android自动弹出软键盘(输入键盘) 在AndroidMainfest.xml内容无法更改情况下,也就是键盘非要弹出情况下,进入此页面时先关闭软键盘不让其弹出 InputMethodManager ...
- 【Luogu】P3052摩天大楼里的奶牛(遗传算法乱搞)
一道状压题,但今天闲来无事又用遗传乱搞了一下. 设了一个DNA数组,DNA[i]记录第i个物品放在哪个组里.适应度是n-这个生物的组数+1. 交配选用的是轮盘赌和单亲繁殖——0.3的几率单点变异.(事 ...
- BZOJ 1185 [HNOI2007]最小矩形覆盖 ——计算几何
程序写的太垃圾,卡不过去. GG,甘拜下风. #include <map> #include <cmath> #include <queue> #include & ...
- LVM 类型的 Storage Pool
LVM 类型的 Storage Pool 不仅一个文件可以分配给客户机作为虚拟磁盘,宿主机上 VG 中的 LV 也可以作为虚拟磁盘分配给虚拟机使用. 不过,LV 由于没有磁盘的 MBR 引导记录,不能 ...
- Virtualization基础
官方文档学习 https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/pdf/Virtualization_G ...
- Maven单元测试
// SKU码:系列前3位+6位年月日+3位序号(自动生产,取数据库中当天最大的,没有就赋值位001) // 订单编号:BRD+6位年月日+5位序号 // // 退单号:BRT+6位年月日+3位序号 ...
- Idea Failed to read artifact descriptor for xx:jar:unknown
网上的解决方案: 根据网上说明添加了maven命令clean compile install -Dmaven.test.skip=true,与我遇到的问题不同 有的方法猜测可以通过,但是没时间测试了 ...
- IntelliJ IDEA出现:This file is indented with tabs instead of 4 spaces的问题解决
根据阿里巴巴Java开发手册,不能使用Tab字符,改成4个字符,设置如下: 注意:是不选择! 一定要选择这个:
- 用canvas实现一个colorpicker
http://www.cnblogs.com/ufex/p/6382982.html 每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个color ...
- JS那些事儿——Gulp的入门使用
前言 新人使用gulp的一个记录. 首先对于第一个新事物,我会问gulp这是什么? 答:gulp是一个自动化构建工具,它可以做一些自动化的任务,比如: 检查Javascript 编译Sass(或Les ...