jquery easyui----tree
重写默认方法$.fn.tree.defaults.
这棵树显示分层数据在一个树结构在一个web页面。它提供了用户扩展、压缩、拖拽、编辑和异步加载的功能。
依赖
-
draggable
-
droppable
应用实例
树可以研究在< ul >元素。标记可以定义了叶和儿童。节点将<li>元素在ul列表。以下显示的元素,这将用来制作树节点的嵌套在ul元素。
<ul id="tt" class="<a title="EasyUI" href="http://wuzhuti.cn/tag/easyui">EasyUI</a>-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li> <span><a href="#">File 11</a></span> </li> <li> <span>File 12</span> </li> <li> <span>File 13</span> </li> </ul> </li> <li> <span>File 2</span> </li> <li> <span>File 3</span> </li> </ul> </li> <li> <span>File21</span> </li> </ul>
树还可以被定义在一个空的< ul >元素和负载数据使用javascript。
<ul id="tt"></ul> $('#tt').tree({ url:'tree_data.json' });
使用loadFilter处理json数据从ASP.NET的web服务。
$('#tt').tree({
url: ...,
loadFilter: function(data){
if (data.d){
return data.d;
} else {
return data;
}
}
});
树数据的格式
每个节点可以包含以下属性:
-
id: 节点id,它是重要的来加载远程数据
-
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#"
}]
}]
树的异步
这棵树支持内置的异步加载模式,用户创建一个空的树,然后指定一个服务器端动态返回JSON数据用来填充树与异步和需求。这里是一个例子:
<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>
这棵树是装有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是封闭的,当扩展节点1,将直接显示它的子节点。当扩展节点2,它将发送值(2)服务器获取子节点。这tutorialCreate异步Treeshows如何编写服务器代码返回树数据需求。
属性
|
名称 |
类型 |
说明 |
默认 |
|
url |
string |
一个URL检索远程数据。 |
null |
|
method |
string |
http方法检索数据。 |
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 |
|
loader |
function(param,success,error) |
定义了如何加载数据从远程服务器。可以放弃这次行动返回false。这个函数接受以下参数: |
json loader |
|
loadFilter |
function(data,parent) |
返回过滤数据显示。返回的数据是在标准的树格式。这个函数接受以下参数: |
|
事件
许多事件回调函数可以把“节点”参数,其中包含以下属性:
-
id: 一个标识值绑定到该节点。
-
text: 文本显示。
-
iconCls: css类来显示图标。
-
checked: 检查是否该节点。
-
state: 节点状态,“open”或“closed”。
-
attributes: 自定义属性绑定到该节点。
-
target: 目标DOM对象。
|
名称 |
参数 |
说明 |
|
onClick |
node |
当用户点击一个节点。代码示例: $('#tt').tree({
onClick: function(node){
alert(node.text); // alert node text property when clicked } }); |
|
onDblClick |
node |
当用户双击一个节点。 |
|
onBeforeLoad |
node, param |
前一个请求加载数据,返回false取消这种加载作用。 |
|
onLoadSuccess |
node, data |
当数据加载成功时触发。 |
|
onLoadError |
arguments |
当数据加载失败,参数的参数是一样的“错误”功能的JQuery ajax。 |
|
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 |
当节点是正确的点击。代码示例: // right click node and then display the context menu $('#tt').tree({
onContextMenu: function(e, node){
e.preventDefault(); // select the node $('#tt').tree('select', node.target); // display context menu
$('#mm').menu('show', {
left: e.pageX, top: e.pageY }); } }); // the context menu is defined as below: <div id="mm" class="easyui-menu"> <div onclick="append()" data-options="iconCls:'icon-add'">Append</div> <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div> </div> |
|
onBeforeDrag |
node |
当一个节点的拖动开始,返回false取消拖动。这个事件可以从版本1.3.2。 |
|
onStartDrag |
node |
当开始拖动一个节点。这个事件可以从版本1.3.2。 |
|
onStopDrag |
node |
停止拖拽一个节点之后。这个事件可以从版本1.3.2。 |
|
onDragEnter |
target, source |
当一个节点被拖进某个目标节点,可以下降到。返回错误的拒绝掉。 |
|
onDragOver |
target, source |
当一个节点是拖了一些目标节点,可以删除,返回错误的拒绝掉。 |
|
onDragLeave |
target, source |
当一个节点是拖着离开一些目标节点,可以下降到。 |
|
onDrop |
target, source, point |
Fires 当一个节点被删除。 |
|
onBeforeEdit |
node |
在编辑节点之前。 |
|
onAfterEdit |
node |
在编辑节点之后。 |
|
onCancelEdit |
node |
当取消编辑操作。 |
方法
| 参数 | 说明 | |
|---|---|---|
| options | none | 返回选项树。 |
| loadData | data | 加载树的数据。 |
| getNode | target | 获取指定节点对象。 |
| getData | target | 获取指定节点数据,包括它的子节点。 |
| reload | target | 重新加载树的数据。 |
| getRoot | none | 得到根节点,返回节点对象 |
| getRoots | none | 得到根节点,返回节点数组。 |
| getParent | target | 得到父节点,该节点的目标参数表明DOM对象。 |
| getChildren | target | 让子节点、目标参数显示节点的DOM对象。 |
| getChecked | state | 得到节点的检查。状态提供的值是: 'checked','unchecked','indeterminate'. 如果一个国家没有指定,返回“'checked'节点。代码示例:
var nodes = $('#tt').tree('getChecked'); // get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked'); // get unchecked nodes
var nodes = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodes
|
| getSelected | none | 得到选中的节点,并返回它,如果没有节点选择返回null。 |
| isLeaf | target | 确定指定的节点是叶,目标参数显示节点的DOM对象。 |
| find | id | 找到指定的节点,并返回该节点对象。
代码示例: // 找到一个节点,然后选择它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
|
| select | target | 选择一个节点,该节点的目标参数表明DOM对象。 |
| check | target | 设置指定的节点被选中。 |
| uncheck | target | 设置指定的节点不被选中。 |
| collapse | target | 收缩的一个节点,该节点的目标参数表明DOM对象。 |
| expand | target | 展开一个节点,该节点的目标参数表明DOM对象。当节点被关闭,没有子节点,节点id值(称为“id”参数)将被发送到服务器的请求的子节点数据。 |
| collapseAll | target | 所有节点收缩。 |
| expandAll | target | 打开所有的节点。 |
| expandTo | target | 展开从根到指定的节点。 |
| append | param | 附加一些子节点一个父节点。param参数有两个属性: 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 | 切换展开/折叠状态的节点、目标参数显示节点的DOM对象。 |
| insert | param | 插入一个节点到指定节点之前或之后。“param”参数包含以下属性: before: DOM对象,节点插入之前。 after: DOM对象,节点插入后。 data: 对象,节点数据。下面的代码显示了如何插入一个新节点之前选中的节点:
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
data: {
id: 21,
text: 'node text'
}
});
}
|
| remove | target | 删除一个节点和它的孩子节点、目标参数显示节点的DOM对象。 |
| pop | target | 取出一个节点和它的孩子节点,该方法是一样的,但返回删除的节点删除数据。 |
| update | param | 更新指定的节点。“param“的参数有以下属性: target(DOM object, the node to be updated),id,text,iconCls,checked,etc.代码示例:
// update the selected node text
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 | 取消编辑节点。 |
