EasyUI之树形结构tree

转自：https://blog.csdn.net/ya_1249463314/article/details/70305730

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ya_1249463314/article/details/70305730
1.样式

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

2.静态方式生成树

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tree</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<ul id="tt" class="easyui-tree">
<li>
<span>第一章</span>
<ul>
<li>
<span>第一节</span>
<ul>
<li>
<span>第一条</span>
</li>
<li>
<span>第二条</span>
</li>
</ul>
</li>
<li>
<span>第二节</span>
</li>
</ul>
</li>
<li>
<span>第二章</span>
</li>
</ul>
</body>
</html>
结果：

3.动态方式生成树

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tree02</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

</head>
<body>
<ul id="treeId">

</ul>
</body>
<script type="text/javascript">
$("#treeId").tree({
url:'/easyUI/json/province.json'

});
</script>
</html>
json文件：province.json

[{
"id":1,
"text":"杭州",
"children":[
{
"text":"下城区",
"checked":true
},
{
"text":"西湖区",
"state":"open",
"children":[
{
"text":"超市",
"checked":true
},
{
"id": 8,
"text":"银行"
}
]
}
]
},{
"id": 2,
"text":"北京"
}]
结果：

4.文档

属性
属性名属性值类型描述默认值
url string 检索远程数据的URL地址。 null
method string 检索数据的HTTP方法。（POST / GET） post
animate boolean 定义节点在展开或折叠的时候是否显示动画效果。 false
checkbox boolean 定义是否在每一个借点之前都显示复选框。 false
cascadeCheck boolean 定义是否层叠选中状态。 true
onlyLeafCheck boolean 定义是否只在末级节点之前显示复选框。 false
lines boolean 定义是否显示树控件上的虚线。 false
dnd boolean 定义是否启用拖拽功能。 false
data array 节点数据加载。
$('#tt').tree({
data: [{
text: 'Item1',
state: 'closed',
children: [{
text: 'Item11'
},{
text: 'Item12'
}]
},{
text: 'Item2'
}]
});
null
formatter function(node) 定义如何渲染节点的文本。
代码示例：

$('#tt').tree({
formatter:function(node){
return node.text;
}
});
false
loader function(param,success,error) 定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数：
param：发送到远程服务器的参数对象。
success(data)：当检索数据成功的时候调用的回调函数。
error()：当检索数据失败的时候调用的回调函数。 json loader
loadFilter function(data,parent) 返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数：
data：加载的原始数据。
parent: DOM对象，代表父节点。

事件
很多事件的回调函数都包含'node'参数，其具备如下属性：

id：绑定节点的标识值。
text：显示的节点文本。
iconCls：显示的节点图标CSS类ID。
checked：该节点是否被选中。
state：节点状态，'open' 或 'closed'。
attributes：绑定该节点的自定义属性。
target：目标DOM对象。
事件名事件参数描述
onClick node
在用户点击一个节点的时候触发。

代码示例：

$('#tt').tree({
onClick: function(node){
alert(node.text); // 在用户点击的时候提示
}
});
onDblClick node 在用户双击一个节点的时候触发。
onBeforeLoad node, param 在请求加载远程数据之前触发，返回false可以取消加载操作。
onLoadSuccess node, data 在数据加载成功以后触发。
onLoadError arguments 在数据加载失败的时候触发，arguments参数和jQuery的$.ajax()函数里面的'error'回调函数的参数相同。
onBeforeExpand node 在节点展开之前触发，返回false可以取消展开操作。
onExpand node 在节点展开的时候触发。
onBeforeCollapse node 在节点折叠之前触发，返回false可以取消折叠操作。
onCollapse node 在节点折叠的时候触发。
onBeforeCheck node, checked 在用户点击勾选复选框之前触发，返回false可以取消选择动作。（该事件自1.3.1版开始可用）
onCheck node, checked 在用户点击勾选复选框的时候触发。
onBeforeSelect node 在用户选择一个节点之前触发，返回false可以取消选择动作。
onSelect node 在用户选择节点的时候触发。
onContextMenu e, node
在右键点击节点的时候触发。

代码示例：

// 右键点击节点并显示快捷菜单
$('#tt').tree({
onContextMenu: function(e, node){
e.preventDefault();
// 查找节点
$('#tt').tree('select', node.target);
// 显示快捷菜单
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});

// 右键菜单定义如下：
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>
onBeforeDrag node 在开始拖动节点之前触发，返回false可以拒绝拖动。（该事件自1.3.2版开始可用）
onStartDrag node 在开始拖动节点的时候触发。（该事件自1.3.2版开始可用）
onStopDrag node 在停止拖动节点的时候触发。（该事件自1.3.2版开始可用）
onDragEnter target, source 在拖动一个节点进入到某个目标节点并释放的时候触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onDragOver target, source 在拖动一个节点经过某个目标节点并释放的时候触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onDragLeave target, source 在拖动一个节点离开某个目标节点并释放的时候触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onBeforeDrop target, source, point 在拖动一个节点之前触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
（该事件自1.3.3版开始可用）
onDrop target, source, point 当节点位置被拖动时触发。
target：DOM对象，需要被拖动动的目标节点。
source：源节点。
point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
onBeforeEdit node 在编辑节点之前触发。
onAfterEdit node 在编辑节点之后触发。
onCancelEdit node 在取消编辑操作的时候触发。

方法
方法名方法参数描述
options none 返回树控件属性。
loadData data 读取树控件数据。
getNode target 获取指定节点对象。
getData target 获取指定节点数据，包含它的子节点。
reload target 重新载入树控件数据。
getRoot none 获取根节点，返回节点对象。
getRoots none 获取所有根节点，返回节点数组。
getParent target 获取父节点，'target'参数代表节点的DOM对象。
getChildren target 获取所有子节点，'target'参数代表节点的DOM对象。
getChecked state 获取所有选中的节点。'state'可用值有：'checked','unchecked','indeterminate'。如果'state'未指定，将返回'checked'节点。
代码示例：

var nodes = $('#tt').tree('getChecked'); // get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked'); // 获取未选择节点
var nodes = $('#tt').tree('getChecked', 'indeterminate'); // 获取不确定的节点
译者注：（1.3.4新增获取方式）

var nodes = $('#tt').tree('getChecked', ['unchecked','indeterminate']);
getSelected none 获取选择节点并返回它，如果未选择则返回null。
isLeaf target 判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。
find id
查找指定节点并返回节点对象。

代码示例：

// 查找一个节点并选择它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
select target 选择一个节点，'target'参数表示节点的DOM对象。
check target 选中指定节点。
uncheck target 取消选中指定节点。
collapse target 折叠一个节点，'target'参数表示节点的DOM对象。
expand target 展开一个节点，'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候，节点ID的值(名为'id'的参数)将会发送给服务器
请求子节点的数据。
collapseAll target 折叠所有节点。
expandAll target 展开所有节点。
expandTo target 打开从根节点到指定节点之间的所有节点。
scrollTo target 滚动到指定节点。（该方法自1.3.4版开始可用）
append param
追加若干子节点到一个父节点，param参数有2个属性：
parent：DOM对象，将要被追加子节点的父节点，如果未指定，子节点将被追加至根节点。
data：数组，节点数据。

代码示例：

// 追加若干个节点并选中他们
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
parent: selected.target,
data: [{
id: 23,
text: 'node23'
},{
text: 'node24',
state: 'closed',
children: [{
text: 'node241'
},{
text: 'node242'
}]
}]
});
toggle target 打开或关闭节点的触发器，target参数是一个节点DOM对象。
insert param 在一个指定节点之前或之后插入节点，'param'参数包含如下属性：
before：DOM对象，在某个节点之前插入。
after：DOM对象，在某个节点之后插入。
data：对象，节点数据。
下面的代码展示了如何将一个新节点插入到选择的节点之前：

// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('update', {
target: node.target,
text: 'new text'
});
}
enableDnd none 启用拖拽功能。
disableDnd none 禁用拖拽功能。
beginEdit target 开始编辑一个节点。
endEdit target 结束编辑一个节点。
cancelEdit target 取消编辑一个节点。

---------------------
作者：sunpy 孙培煜
来源：CSDN
原文：https://blog.csdn.net/ya_1249463314/article/details/70305730
版权声明：本文为博主原创文章，转载请附上博文链接！

EasyUI之树形结构tree的更多相关文章

回调形成树形结构tree
//Tree.vue <template> <li> <span @click="toggle"> <i v-if="isFol ...
C# EasyUI树形结构权限管理模块
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷学无止境,精益求精本节和大家探讨下C#使用EasyUI树形结构/Tree构 ...
Linux查看目录树形结构
安装tree. yum -y install tree 查看是否安装成功 yum list installed tree 执行tree命令查看目录树形结构 tree
数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
使用ztree.js，受益一生，十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
Linux/Ubuntu tree 命令以树形结构显示文件夹目录结构
1.安装命令工具 sudo apt-get -y install tree 2.可以查看关于tree命令的帮助信息 $ tree --help usage: tree [-adfghilnpqrstu ...
【转】linux tree命令以树形结构显示文件目录结构 ---- 不错
原文网址:http://jingyan.baidu.com/article/acf728fd19c7eff8e510a3eb.html 今天小编来给分享Linux 系统下一个非常有用的命令的使用:tr ...
Tree 树形结构
一.树的基本概念 (1)树(Tree)的概念:树是一种递归定义的数据结构,是一种重要的非线性数据结构. 树可以是一棵空树,它没有任何的结点:也可以是一棵非空树,至少含有一个结点. (2)根(Root) ...
[转帖]linux tree命令--显示目录的树形结构
linux tree命令--显示目录的树形结构版权声明:iamqilei@qq.com https://blog.csdn.net/u011729865/article/details/533 ...

随机推荐

Spider-Python爬虫之使用Selenium模拟浏览器行为
分析他的代码比较简单,主要有以下的步骤:使用BeautifulSoup库,打开百度贴吧的首页地址,再解析得到id为new_list标签底下的img标签,最后将img标签的图片保存下来. header ...
集训第五周动态规划 C题编辑距离
Description Let x and y be two strings over some finite alphabet A. We would like to transform x int ...
九度oj 题目1077：最大序列和
题目1077:最大序列和时间限制:1 秒内存限制:32 兆特殊判题:否提交:6435 解决:1931 题目描述: 给出一个整数序列S,其中有N个数,定义其中一个非空连续子序列T中所有数的和为T ...
bzoj1007 [HNOI2008]水平可见直线 - 几何 - hzwer.com
Description Input 第一行为N(0 < N < 50000),接下来的N行输入Ai,Bi Output 从小到大输出可见直线的编号,两两中间用空格隔开,最后一个数字后面也必 ...
ehcache、memcache、redis三大缓存比较
最近项目组有用到这三个缓存,去各自的官方看了下,觉得还真的各有千秋!今天特意归纳下各个缓存的优缺点,仅供参考! Ehcache 在Java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS ...
POJ 1769_Minimizing maximizer
题意: 一系列m个1~n区间,每个区间固定对某个子区间进行排序,顺序选择若干区间,使最终覆盖所有区间. 分析: computes the length of the shortest subseque ...
POJ 3320_Jessica's Reading Problem
题意: 每页书都对应一个知识点,问最少看连续的多少页,才能把所有知识点都看完? 分析: <挑战程序设计竞赛>介绍的尺取法,反复推进区间的开头和结尾,来求取满足条件的最小区间,先确定好一个满 ...
Delphi：Indy9的IdFTP完全使用
Delphi 7自带的INDY控件,其中包含了IdFTP,可以方便的实现FTP客户端程序,参考自带的例子,其中有上传.下载.删除文件,但是不包含对文件夹的操作,得自己实现上传.下载.删除整个文件夹(带 ...
Layui栅格系统与后台框架布局
一.栅格布局规则: 1. 采用 layui-row 来定义行,如:<div class="layui-row"></div> 2. 采用类似 layui-c ...
csu1365 Play with Chain
很显然的splay,第一次用splay操作区间...我实在佩服这个targan大佬,居然搞出这么牛逼的平衡树,调了大概5个小时终于搞定了.. #include<cstdio> #inclu ...

EasyUI之树形结构tree

EasyUI之树形结构tree的更多相关文章

随机推荐

热门专题