轻松学习jQuery插件EasyUI EasyUI创建树形菜单

请注意，树（Tree)组件是定义在 <ul> 标记中，树节点数据从 URL “tree_data.json” 加载。
得到父节点

然后我们通过点击节点选择水果节点，我们将添加一些其他的水果数据。执行 getSelected 方法得到处理节点：
 var node = $(‘#tt’).tree(‘getSelected’);
getSelected 方法的返回结果是一个 javascript 对象，它有一个 id、text、target 属性。target 属性是一个 DOM 对象，引用选中节点，它的 append 方法将用于附加子节点。
附加节点

var node = $('#tt').tree('getSelected');
 if (node){
 var nodes = [{
 "id":13,
 "text":"Raspberry"
 },{
 "id":14,
 "text":"Cantaloupe"
 }];
 $('#tt').tree('append', {
 parent:node.target,
 data:nodes
 });
 }

当添加一些水果，您将看见：

正如您所看到的，使用 easyui 的树（Tree）插件去附加节点不是那么的难。
四、EasyUI创建带复选框的树形菜单
easyui 的树（Tree）插件允许您创建一个复选框树。如果您点击一个节点的复选框，这个点击的节点信息将向上和向下继承。例如：点击 ‘tomato’ 节点的复选框，您将会看见 ‘Vegetables’ 节点现在仅仅选中部分。

创建复选框树

<ul id="tt" class="easyui-tree"
 url="data/tree_data.json"
 checkbox="true">
</ul>

五、EasyUI树形菜单拖放控制
当在一个应用中使用树（Tree）插件，拖拽（drag）和放置（drop）功能要求允许用户改变节点位置。启用拖拽（drag）和放置（drop）操作，所有您需要做的就是把树（Tree）插件的 ‘dnd’ 属性设置为 true。

创建树形菜单（Tree）

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

当在一个树节点上发生放置操作，’onDrop’ 事件将被触发，您应该做一些或更多的操作，例如保存节点状态到远程服务器端，等等。

onDrop: function(targetNode, source, point){
 var targetId = $(target).tree('getNode', targetNode).id;
 $.ajax({
 url: '...',
 type: 'post',
 dataType: 'json',
 data: {
 id: source.id,
 targetId: targetId,
 point: point
 }
 });
}