EasyUI中树的基本操作

朴灿烈づ我的快乐病毒、 2023-10-18 20:08 8阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

树（tree）定义在 <ul> 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 <li> 元素。

### 属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>string</td> 
   <td>获取远程数据的 URL 。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>method</td> 
   <td>string</td> 
   <td>检索数据的 http 方法（method）。</td> 
   <td>post</td> 
  </tr> 
  <tr> 
   <td>animate</td> 
   <td>boolean</td> 
   <td>定义当节点展开折叠时是否显示动画效果。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>boolean</td> 
   <td>定义是否在每个节点前边显示复选框。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>cascadeCheck</td> 
   <td>boolean</td> 
   <td>定义是否级联检查。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>onlyLeafCheck</td> 
   <td>boolean</td> 
   <td>定义是否只在叶节点前显示复选框。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>lines</td> 
   <td>boolean</td> 
   <td>定义是否显示树线条。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>dnd</td> 
   <td>boolean</td> 
   <td>定义是否启用拖放。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>array</td> 
   <td>要加载的节点数据。 <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#tt').tree({ </li> 
     <li>data: [{ </li> 
     <li>text: 'Item1',</li> 
     <li>state: 'closed',</li> 
     <li>children: [{ </li> 
     <li>text: 'Item11'</li> 
     <li>},{ </li> 
     <li>text: 'Item12'</li> 
     <li>}]</li> 
     <li>},{ </li> 
     <li>text: 'Item2'</li> 
     <li>}]</li> 
     <li>});</li> 
    </ol></td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>formatter</td> 
   <td>function(node)</td> 
   <td>定义如何呈现节点文本。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#tt').tree({ </li> 
     <li>formatter:function(node){ </li> 
     <li>return node.text;</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>loader</td> 
   <td>function(param,success,error)</td> 
   <td>定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：<br> param：要传递到远程服务器的参数对象。<br> success(data)：当检索数据成功时调用的回调函数。<br> error()：当检索数据失败时调用的回调函数。</td> 
   <td>json loader</td> 
  </tr> 
  <tr> 
   <td>loadFilter</td> 
   <td>function(data,parent)</td> 
   <td>返回要显示的过滤数据。返回数据时以标准树格式返回的。该函数有下列参数：<br> data：要加载的原始数据。<br> parent：DOM 对象，表示父节点。</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

很多事件的回调函数需要 'node' 参数，它包括下列属性：

*  id：绑定到节点的标识值。
 *  text：要显示的文本。
 *  iconCls：用来显示图标的 css class。
 *  checked：节点是否被选中。
 *  state：节点状态，'open' 或 'closed'。
 *  attributes：绑定到节点的自定义属性。
 *  target：目标的 DOM 对象。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onClick</td> 
   <td>node</td> 
   <td>当用户点击一个节点时触发。代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#tt').tree({ </li> 
     <li>onClick: function(node){ </li> 
     <li>alert(node.text); // alert node text property when clicked</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>onDblClick</td> 
   <td>node</td> 
   <td>当用户双击一个节点时触发。</td> 
  </tr> 
  <tr> 
   <td>onBeforeLoad</td> 
   <td>node, param</td> 
   <td>当加载数据的请求发出前触发，返回 false 则取消加载动作。</td> 
  </tr> 
  <tr> 
   <td>onLoadSuccess</td> 
   <td>node, data</td> 
   <td>当数据加载成功时触发。</td> 
  </tr> 
  <tr> 
   <td>onLoadError</td> 
   <td>arguments</td> 
   <td>当数据加载失败时触发，arguments 参数与 jQuery.ajax 的 'error' 函数一样。</td> 
  </tr> 
  <tr> 
   <td>onBeforeExpand</td> 
   <td>node</td> 
   <td>节点展开前触发，返回 false 则取消展开动作。</td> 
  </tr> 
  <tr> 
   <td>onExpand</td> 
   <td>node</td> 
   <td>当节点展开时触发。</td> 
  </tr> 
  <tr> 
   <td>onBeforeCollapse</td> 
   <td>node</td> 
   <td>节点折叠前触发，返回 false 则取消折叠动作。</td> 
  </tr> 
  <tr> 
   <td>onCollapse</td> 
   <td>node</td> 
   <td>当节点折叠时触发。</td> 
  </tr> 
  <tr> 
   <td>onBeforeCheck</td> 
   <td>node, checked</td> 
   <td>当用户点击复选框前触发，返回 false 则取消该选中动作。该事件自版本 1.3.1 起可用。</td> 
  </tr> 
  <tr> 
   <td>onCheck</td> 
   <td>node, checked</td> 
   <td>当用户点击复选框时触发。</td> 
  </tr> 
  <tr> 
   <td>onBeforeSelect</td> 
   <td>node</td> 
   <td>节点被选中前触发，返回 false 则取消选择动作。</td> 
  </tr> 
  <tr> 
   <td>onSelect</td> 
   <td>node</td> 
   <td>当节点被选中时触发。</td> 
  </tr> 
  <tr> 
   <td>onContextMenu</td> 
   <td>e, node</td> 
   <td>当右键点击节点时触发。代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// right click node and then display the context menu</li> 
     <li>$('#tt').tree({ </li> 
     <li>onContextMenu: function(e, node){ </li> 
     <li>e.preventDefault();</li> 
     <li>// select the node</li> 
     <li>$('#tt').tree('select', node.target);</li> 
     <li>// display context menu</li> 
     <li>$('#mm').menu('show', { </li> 
     <li>left: e.pageX,</li> 
     <li>top: e.pageY</li> 
     <li>});</li> 
     <li>}</li> 
     <li>});</li> 
     <li>&nbsp;</li> 
     <li>// the context menu is defined as below:</li> 
     <li>&lt;div id="mm" class="easyui-menu" style="width:120px;"&gt;</li> 
     <li>&lt;div οnclick="append()" data-options="iconCls:'icon-add'"&gt;Append&lt;/div&gt;</li> 
     <li>&lt;div οnclick="remove()" data-options="iconCls:'icon-remove'"&gt;Remove&lt;/div&gt;</li> 
     <li>&lt;/div&gt;</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>onBeforeDrag</td> 
   <td>node</td> 
   <td>当节点的拖拽开始时触发，返回 false 则禁止拖拽。该事件自版本 1.3.2 起可用。</td> 
  </tr> 
  <tr> 
   <td>onStartDrag</td> 
   <td>node</td> 
   <td>当开始拖拽节点时触发。该事件自版本 1.3.2 起可用。</td> 
  </tr> 
  <tr> 
   <td>onStopDrag</td> 
   <td>node</td> 
   <td>当停止拖拽节点时触发。该事件自版本 1.3.2 起可用。</td> 
  </tr> 
  <tr> 
   <td>onDragEnter</td> 
   <td>target, source</td> 
   <td>当节点被拖拽进入某个允许放置的目标节点时触发，返回 false 则禁止放置。<br> target：被放置的目标节点元素。<br> source：被拖拽的源节点。<br> 该事件自版本 1.3.2 起可用。</td> 
  </tr> 
  <tr> 
   <td>onDragOver</td> 
   <td>target, source</td> 
   <td>当节点被拖拽到允许放置的目标节点上时触发，返回 false 则禁止放置。<br> target：被放置的目标节点元素。<br> source：被拖拽的源节点。<br> 该事件自版本 1.3.2 起可用。</td> 
  </tr> 
  <tr> 
   <td>onDragLeave</td> 
   <td>target, source</td> 
   <td>当节点被拖拽离开允许放置的目标节点时触发。<br> target：被放置的目标节点元素。<br> source：被拖拽的源节点。<br> 该事件自版本 1.3.2 起可用。</td> 
  </tr> 
  <tr> 
   <td>onBeforeDrop</td> 
   <td>target,source,point</td> 
   <td>节点被放置之前触发，返回 false 则禁止放置。<br> target：DOM 对象，放置的目标节点。<br> source：源节点。<br> point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。<br> 该事件自版本 1.3.2 起可用。</td> 
  </tr> 
  <tr> 
   <td>onDrop</td> 
   <td>target,source,point</td> 
   <td>当节点被放置时触发。 target：DOM 对象，放置的目标节点。<br> source：源节点。<br> point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。</td> 
  </tr> 
  <tr> 
   <td>onBeforeEdit</td> 
   <td>node</td> 
   <td>编辑节点前触发。</td> 
  </tr> 
  <tr> 
   <td>onAfterEdit</td> 
   <td>node</td> 
   <td>编辑节点后触发。</td> 
  </tr> 
  <tr> 
   <td>onCancelEdit</td> 
   <td>node</td> 
   <td>当取消编辑动作时触发。</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回树的选项（options）。</td> 
  </tr> 
  <tr> 
   <td>loadData</td> 
   <td>data</td> 
   <td>加载树的数据。</td> 
  </tr> 
  <tr> 
   <td>getNode</td> 
   <td>target</td> 
   <td>获取指定的节点对象。</td> 
  </tr> 
  <tr> 
   <td>getData</td> 
   <td>target</td> 
   <td>获取指定的节点数据，包括它的子节点。</td> 
  </tr> 
  <tr> 
   <td>reload</td> 
   <td>target</td> 
   <td>重新加载树的数据。</td> 
  </tr> 
  <tr> 
   <td>getRoot</td> 
   <td>none</td> 
   <td>获取根节点，返回节点对象。</td> 
  </tr> 
  <tr> 
   <td>getRoots</td> 
   <td>none</td> 
   <td>获取根节点，返回节点数组。</td> 
  </tr> 
  <tr> 
   <td>getParent</td> 
   <td>target</td> 
   <td>获取父节点，target 参数表示节点的 DOM 对象。</td> 
  </tr> 
  <tr> 
   <td>getChildren</td> 
   <td>target</td> 
   <td>获取子节点， target 参数表示节点的 DOM 对象。</td> 
  </tr> 
  <tr> 
   <td>getChecked</td> 
   <td>state</td> 
   <td>获取选中的节点。状态可用值有：'checked'、'unchecked'、'indeterminate'。如果状态未分配，则返回 'checked' 节点。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>var nodes = $('#tt').tree('getChecked'); // get checked nodes</li> 
     <li>var nodes = $('#tt').tree('getChecked', 'unchecked'); // get unchecked nodes</li> 
     <li>var nodes = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodes</li> 
     <li>var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']); // get checked and indeterminate nodes</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>getSelected</td> 
   <td>none</td> 
   <td>获取选中的节点并返回它，如果没有选中节点，则返回 null。</td> 
  </tr> 
  <tr> 
   <td>isLeaf</td> 
   <td>target</td> 
   <td>把指定的节点定义成叶节点，target 参数表示节点的 DOM 对象。</td> 
  </tr> 
  <tr> 
   <td>find</td> 
   <td>id</td> 
   <td>找到指定的节点并返回该节点对象。代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// find a node and then select it</li> 
     <li>var node = $('#tt').tree('find', 12);</li> 
     <li>$('#tt').tree('select', node.target);</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>target</td> 
   <td>选中一个节点，target 参数表示节点的 DOM 对象。</td> 
  </tr> 
  <tr> 
   <td>check</td> 
   <td>target</td> 
   <td>把指定节点设置为勾选。</td> 
  </tr> 
  <tr> 
   <td>uncheck</td> 
   <td>target</td> 
   <td>把指定节点设置为未勾选。</td> 
  </tr> 
  <tr> 
   <td>collapse</td> 
   <td>target</td> 
   <td>折叠一个节点，target 参数表示节点的 DOM 对象。</td> 
  </tr> 
  <tr> 
   <td>expand</td> 
   <td>target</td> 
   <td>展开一个节点，target 参数表示节点的 DOM 对象。当节点关闭且没有子节点时，节点的 id 值（名为 'id' 参数）将被发送至服务器以请求子节点数据。</td> 
  </tr> 
  <tr> 
   <td>collapseAll</td> 
   <td>target</td> 
   <td>折叠所有的节点。</td> 
  </tr> 
  <tr> 
   <td>expandAll</td> 
   <td>target</td> 
   <td>展开所有的节点。</td> 
  </tr> 
  <tr> 
   <td>expandTo</td> 
   <td>target</td> 
   <td>从根部展开一个指定的节点。</td> 
  </tr> 
  <tr> 
   <td>scrollTo</td> 
   <td>target</td> 
   <td>滚动到指定节点。该方法自版本 1.3.4 起可用。</td> 
  </tr> 
  <tr> 
   <td>append</td> 
   <td>param</td> 
   <td>追加一些子节点到一个父节点，param 参数有两个属性：<br> parent：DOM 对象，要追加到的父节点，如果没有分配，则追加为根节点。<br> data：数组，节点的数据。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// append some nodes to the selected node</li> 
     <li>var selected = $('#tt').tree('getSelected');</li> 
     <li>$('#tt').tree('append', { </li> 
     <li>parent: selected.target,</li> 
     <li>data: [{ </li> 
     <li>id: 23,</li> 
     <li>text: 'node23'</li> 
     <li>},{ </li> 
     <li>text: 'node24',</li> 
     <li>state: 'closed',</li> 
     <li>children: [{ </li> 
     <li>text: 'node241'</li> 
     <li>},{ </li> 
     <li>text: 'node242'</li> 
     <li>}]</li> 
     <li>}]</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>toggle</td> 
   <td>target</td> 
   <td>切换节点的展开/折叠状态，target 参数表示节点的 DOM 对象。</td> 
  </tr> 
  <tr> 
   <td>insert</td> 
   <td>param</td> 
   <td>在指定节点的前边或后边插入一个节点，param 参数包括下列属性：<br> before：DOM 对象，前边插入的节点。<br> after：DOM 对象，后边插入的节点。<br> data：对象，节点数据。<br><br> 下面的代码演示了如何在选中节点之前插入一个新的节点： <pre>&nbsp;</pre> 
    <ol> 
     <li>var node = $('#tt').tree('getSelected');</li> 
     <li>if (node){ </li> 
     <li>$('#tt').tree('insert', { </li> 
     <li>before: node.target,</li> 
     <li>data: { </li> 
     <li>id: 21,</li> 
     <li>text: 'node text'</li> 
     <li>}</li> 
     <li>});</li> 
     <li>}</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>remove</td> 
   <td>target</td> 
   <td>移除一个节点和它的子节点，target 参数表示节点的 DOM 对象。</td> 
  </tr> 
  <tr> 
   <td>pop</td> 
   <td>target</td> 
   <td>弹出一个节点和它的子节点，该方法和 remove 一样，但是返回了移除的节点数据。</td> 
  </tr> 
  <tr> 
   <td>update</td> 
   <td>param</td> 
   <td>更新指定的节点，'param' 参数有下列属性：<br> target（DOM 对象，要被更新的节点）、id、text、iconCls、checked，等等。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// update the selected node text</li> 
     <li>var node = $('#tt').tree('getSelected');</li> 
     <li>if (node){ </li> 
     <li>$('#tt').tree('update', { </li> 
     <li>target: node.target,</li> 
     <li>text: 'new text'</li> 
     <li>});</li> 
     <li>}</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>enableDnd</td> 
   <td>none</td> 
   <td>启用拖放功能。</td> 
  </tr> 
  <tr> 
   <td>disableDnd</td> 
   <td>none</td> 
   <td>禁用拖放功能。</td> 
  </tr> 
  <tr> 
   <td>beginEdit</td> 
   <td>target</td> 
   <td>开始编辑节点。</td> 
  </tr> 
  <tr> 
   <td>endEdit</td> 
   <td>target</td> 
   <td>结束编辑节点。</td> 
  </tr> 
  <tr> 
   <td>cancelEdit</td> 
   <td>target</td> 
   <td>取消编辑节点。</td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

### 使用基本的ul元素构造树 ###

### 使用js加载json数据构造树 ###

每个节点可以包括下列属性：

id：节点的 id，它对于加载远程数据很重要。  
text：要显示的节点文本。  
state：节点状态，'open' 或 'closed'，默认是 'open'。当设置为 'closed' 时，该节点有子节点，并且将从远程站点加载它们。  
checked：指示节点是否被选中。  
attributes：给一个节点添加的自定义属性。  
children：定义了一些子节点的节点数组。

示例代码：

效果

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

### 可编辑的树 ###

设置点击事件为可以编辑，设置编辑之后的事件为提示节点内容，获取到节点内容就可以进行ajax提交数据等其他操作。

onClick:function (node) {
                    $(this).tree("beginEdit",node.target);
                },
                onAfterEdit:function (node) {
                    alert("编辑后的节点内容为："+node.text)
       }

完整示例代码：

### 效果 ###

![Image 1][]![201906192138521.gif][]

### 给树添加追加与删除菜单 ###

效果

![Image 1][]![20190619213859648.gif][]

实现

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <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>
    <ul id="tree2">
    
    </ul>
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="appendNode()" data-options="iconCls:'icon-add'">Append</div>
        <div onclick="insertNode()" data-options="iconCls:'icon-back'">Insert</div>
        <div onclick="removeNode()" data-options="iconCls:'icon-remove'">Remove</div>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#tree2").tree({
                data:[{
                    "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#"
                    }]
                }],
                onClick:function (node) {
                    $(this).tree("beginEdit",node.target);
                },
                onAfterEdit:function (node) {
                    alert("编辑后的节点内容为："+node.text)
                },
                onContextMenu:function (e,node) {
                    //阻止原来的右键事件
                    e.preventDefault();
                    $(this).tree("select",node.target);
                    $("#mm").menu("show",{
                        left:e.pageX,
                        top:e.pageY
                    })
                }
            })
        })
        var id={};
        function appendNode(){
            var selected =$("#tree2").tree("getSelected");
            var node ={
                parent:selected.target,
                data:[
                    {
                        id:++id,
                        text:''
                    }
                ]
            }
            $("#tree2").tree("append",node);
            node=$("#tree2").tree("find",id);
            $("#tree2").tree("beginEdit",node.target);
        }
        function insertNode() {
            var selected =$("#tree2").tree("getSelected");
            var node={
                id:++id,
                text:''
            }
            $("#tree2").tree("insert",{
                after:selected.target,
                data:node
            });
            node=$("#tree2").tree("find",id);
            $("#tree2").tree("beginEdit",node.target);
        }
        function removeNode() {
            selected =$("#tree2").tree("getSelected");
            $("#tree2").tree("remove",selected.target);
        }
    </script>
    </body>
    </html>

### 拖拽树效果 ###

![Image 1][]![20190619213918506.gif][]

设置dnd属性为true,onDrop事件是拖拽之后的事件。

source能获取拖拽前的节点，target能获取拖拽后的节点。

dnd:true,
                onDrop:function(target,source,point){
                    alert("原来的节点："+source.text);
                    alert("新的节点："+$(this).tree("getNode",target).text)
                }

完整代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <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>
    <ul id="tree2">
    
    </ul>
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="appendNode()" data-options="iconCls:'icon-add'">Append</div>
        <div onclick="insertNode()" data-options="iconCls:'icon-back'">Insert</div>
        <div onclick="removeNode()" data-options="iconCls:'icon-remove'">Remove</div>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#tree2").tree({
                data:[{
                    "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#"
                    }]
                }],
                onClick:function (node) {
                    $(this).tree("beginEdit",node.target);
                },
                onAfterEdit:function (node) {
                    alert("编辑后的节点内容为："+node.text)
                },
                onContextMenu:function (e,node) {
                    //阻止原来的右键事件
                    e.preventDefault();
                    $(this).tree("select",node.target);
                    $("#mm").menu("show",{
                        left:e.pageX,
                        top:e.pageY
                    })
                },
                dnd:true,
                onDrop:function(target,source,point){
                    alert("原来的节点："+source.text);
                    alert("新的节点："+$(this).tree("getNode",target).text)
                }
            })
        })
        var id={};
        function appendNode(){
            var selected =$("#tree2").tree("getSelected");
            var node ={
                parent:selected.target,
                data:[
                    {
                        id:++id,
                        text:''
                    }
                ]
            }
            $("#tree2").tree("append",node);
            node=$("#tree2").tree("find",id);
            $("#tree2").tree("beginEdit",node.target);
        }
        function insertNode() {
            var selected =$("#tree2").tree("getSelected");
            var node={
                id:++id,
                text:''
            }
            $("#tree2").tree("insert",{
                after:selected.target,
                data:node
            });
            node=$("#tree2").tree("find",id);
            $("#tree2").tree("beginEdit",node.target);
        }
        function removeNode() {
            selected =$("#tree2").tree("getSelected");
            $("#tree2").tree("remove",selected.target);
        }
    </script>
    </body>
    </html>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190619213806838.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190619213834272.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[201906192138521.gif]: https://img-blog.csdnimg.cn/201906192138521.gif
[20190619213859648.gif]: https://img-blog.csdnimg.cn/20190619213859648.gif
[20190619213918506.gif]: https://img-blog.csdnimg.cn/20190619213918506.gif