easyUI Tree

@author YHC

覆盖默认值 $.fn.tree.defaults.

tree显示一个树结构分层数据在web页面中,它提供用户, expand(展开), collapse(折叠), drag(拖动) ,editing (编辑)和异步加载功能.

相关依赖

• draggable
• droppable

使用示例

Tree 可以在<ul>元素定义,标记可以定义叶子节点,子节点,节点可以是li元素和内置的ul的列表,下面展示的元素使树节点内嵌ul元素:

<ul id="tt" class="easyui-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>  

Tree 也可以在一个空的ul元素中定义和使用javascript加载数据

<ul id="tt"></ul>  

$('#tt').tree({  
    url:'tree_data.json'  
}); 

使用 loadFilter处理 ASP.NET web services输出的json数据.

$('#tt').tree({  
    url: ...,  
    loadFilter: function(data){  
        if (data.d){  
            return data.d;  
        } else {  
            return data;  
        }  
    }  
});  

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	这个节点数据将被加载. $('#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 οnclick="append()" data-options="iconCls:'icon-add'">Append</div> <div οnclick="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	取消编辑一个节点.


以上如有错误信息,请指出,thanks!