Tree 数据转换

所有节点都包含以下属性:

  • id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data
  • text: 显示的节点文本
  • state: 节点状态, 'open' 或者 'closed', 默认是 'open'. 当设置为 'closed', 节点所有的子节点将从远程服务器站点加载
  • checked: 指明检查节点是否选中.
  • attributes: 可以添加到节点的自定义属性
  • children: 一个节点数组,定义一些子节点

一些示例:

  1. [{
  2. "id":1,
  3. "text":"Folder1",
  4. "iconCls":"icon-save",
  5. "children":[{
  6. "text":"File1",
  7. "checked":true
  8. },{
  9. "text":"Books",
  10. "state":"open",
  11. "attributes":{
  12. "url":"/demo/book/abc",
  13. "price":100
  14. },
  15. "children":[{
  16. "text":"PhotoShop",
  17. "checked":true
  18. },{
  19. "id": 8,
  20. "text":"Sub Bookds",
  21. "state":"closed"
  22. }]
  23. }]
  24. },{
  25. "text":"Languages",
  26. "state":"closed",
  27. "children":[{
  28. "text":"Java"
  29. },{
  30. "text":"C#"
  31. }]
  32. }]

异步加载树

tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求.例如:

  1. <ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

tree的加载是通过URL  'get_data.php'站点.子节点的加载依赖于父节点的状态.当展开一个关闭节点,如果节点没有子节点加载,将发送节点id值作为http参数,参数命名为'id'到远程服务器,通过以上URL定义.检索子节点数据
看看这个从服务器返回的数据

  1. [{
  2. "id": 1,
  3. "text": "Node 1",
  4. "state": "closed",
  5. "children": [{
  6. "id": 11,
  7. "text": "Node 11"
  8. },{
  9. "id": 12,
  10. "text": "Node 12"
  11. }]
  12. },{
  13. "id": 2,
  14. "text": "Node 2",
  15. "state": "closed"
  16. }]

节点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 这个节点数据将被加载.

$('#tt').tree({
data: [{
text: 'Item1',
state: 'closed',
children: [{
text: 'Item11'
},{
text: 'Item12'
}]
},{
text: 'Item2'
}]
});
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 当用户点击节点的时候触发. 示例代码:

$('#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 当数据加载失败触发,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 当在节点上右键点击的时候触发,代码示例:

// 右键点击节点然后显示上下文菜单
$('#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'">Append</div>
<div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>
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  查找特定的节点和返回节点对象,代码示例:

// 查找一个节点然后返回它
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对象,当节点的状态是closed的时候 和没有子节点,节点id值(参数命名为'id')将发送给服务器请求子节点数据.
collapseAll target 折叠所有节点.
expandAll target 展开所有节点.
expandTo target 展开从根节点到指定的节点 .
append param 附加一些子节点到父节点中. param参数有两个属性:
parent: DOM 对象,被添加到的父节点,如果没有分配,附加到根节点.
data: array, the nodes data. Code example:

// 添加一些节点到选择的节点
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 切换expanded/collapsed 节点的状态,target 参数指明节点DOM对象.
insert param 插入一个节点到特定节点的之前或之后.'param'参数包含以下属性:
before: DOM 对象,节点插入到之前.
after: DOM 对象, 节点插入到之后.
data: object, 节点数据.

以下代码展示,如何插入新节点到选择节点之前:

var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
data: {
id: 21,
text: 'node text'
}
});
}
remove target 移除一个节点和其子节点,target 参数指明节点DOM对象.
pop target 移除一个节点和其子节点,这个方法和remove类似,但是它返回移除的节点数据.
update param 更新特定的节点. 'param'参数包含以下属性:
target(DOM 对象, 更新的节点),id,text,iconCls,checked,等等.

示例代码:

// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('update', {
target: node.target,
text: 'new text'
});
}
enableDnd none 启用 drag 和 drop 功能.
disableDnd none 禁用 drag 和drop 功能.
beginEdit target 开始编辑一个节点.
endEdit target 结束编辑一个节点.
cancelEdit target 取消编辑一个节点.
 
原址: http://www.cnblogs.com/easypass/archive/2012/12/27/2835219.html

easyui tree的简单使用的更多相关文章

  1. Jquery easyui Tree的简单使用

    Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...

  2. 如何采用easyui tree编写简单角色权限代码

    首先每个管理员得对应一个角色: 而角色可以操作多个栏目,这种情况下我们可以采用tree多选的方式: 在页面上js代码: $('#Permission').dialog({ title: '栏目权限', ...

  3. 【项目经验】EasyUI Tree

    ITOO5.0开始了,我参加了伟大的基础系统,从整体上来说,基础系统有三个职能: 1.自己的核心职能--选课(公共选修课,专业选修课),课表: 2.为其他系统提供真实数据: 3.维护信息 而近两三天, ...

  4. easyui tree 的数据格式转换

    一般用来储存树数据的数据库表都含有两个整型字段:id pid,所以我们查询出来的List一般是这样的(约定pId为-1的节点为根节点): var serverList = [ {id : 2,pid ...

  5. 从数据库读取数据并动态生成easyui tree构结

    一. 数据库表结构 二.从后台读取数据库生成easyui tree结构的树 1.TreeNode树结点类(每个结点都包含easyui tree 的基本属性信息) import java.io.Seri ...

  6. Jquery easyui tree 一些常见操作

    Tree: easyui tree的异步加载实现很简单,easyui的中文API文档中有实例(http://api.btboys.com/easyui/)——创建异步树形菜单,就是在tree node ...

  7. .NET easyUI tree树状结构

    简单的制作后台制作写一个json(string类型)格式 public partial class goodstype_type : System.Web.UI.Page { public strin ...

  8. EasyUI Datagrid的简单使用

    此前同样写过EasyUI Datagrid的demo,好记性不如烂笔头,何况记性也不是那么好,赶紧记录一下.照搬上一篇EasyUI Tree的格式. 实现效果:获取数据库表的数据,在EasyUI Da ...

  9. Easyui Tree方法扩展 - getLevel(获取节点级别)

    Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...

随机推荐

  1. EasyUI 打印当前页

    function CommonPrint(printDatagrid, type) { var tableString = '<table cellspacing="0" c ...

  2. EasyUI 加载Tree

    function LoadTree(result) { mainMenu = $('#mainMenu').tree({ url: "/ajax/GetTreeJson.ashx" ...

  3. mysql的row_number()实现

    在mysql中没有row_number()方法,这里模拟row_number()实现: 如有表 studentid   name age   class1 张1 15     12 张2 15     ...

  4. hihoCoder #1471 拥堵的城市

    这道题目是hihoCoder Challenge 27的C题,我考虑了5天:(. 计数问题.由于树的结构的特殊性(树具有递归结构),不难想到思路是树形DP.由于这是[计数问题]而非[优化问题],我们思 ...

  5. P1373 小a和uim之大逃离 (动态规划)

    题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北部天边急涌过来,还伴着一道道闪电,一阵阵雷声.刹那间,狂风大作,乌云布满了天空,紧接着豆大的雨点从天空中打落下来,只见前方出现了一个 ...

  6. Pizza Delivery

    Pizza Delivery 时间限制: 2 Sec  内存限制: 128 MB 题目描述 Alyssa is a college student, living in New Tsukuba Cit ...

  7. leetcode 331. Verify Preorder Serialization of a Binary Tree

    传送门 331. Verify Preorder Serialization of a Binary Tree My Submissions QuestionEditorial Solution To ...

  8. Codeforces Round #291 (Div. 2) D. R2D2 and Droid Army [线段树+线性扫一遍]

    传送门 D. R2D2 and Droid Army time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  9. Mysql Binlog日志文件介绍

    一.Binlog简介 官方文档参考 https://dev.mysql.com/doc/refman/5.5/en/binary-log.html Binlog(Binary Log) 指数据库的表创 ...

  10. ZOJ 3717 二分+2-sat判定。

    好久没有2-sat了,此题当复习之用,二分求最大值+2-sat判断可行,此题主要跪于题意:The results should be rounded to three decimal places. ...