jQuery EasyUI API 中文文档 - 树（Tree）

逃离我推掉我的手 2022-03-21 02:36 320阅读 0赞

**(学习留存，如有侵权，请告知，立刻删除！)**

用 $.fn.tree.defaults 重写了 defaults。

**依赖**

*  draggable
 *  droppable

**用法**

Tree 能在 <ul> 元素里定义，此标记可以定义为叶节点和子节点。下面是一个示例：

1.  **<ul** id="tt"**>**

2.      **<li>**

3.          ****Folder****

4.          **<ul>**

5.              **<li>**

6.                  ****Sub Folder 1****

7.                  **<ul>**

8.                      **<li>**

9.                          **<a** href="\#"**>**File 11**</a>**

10.                     **</li>**

11.                     **<li>**

12.                         ****File 12****

13.                     **</li>**

14.                     **<li>**

15.                         ****File 13****

16.                     **</li>**

17.                 **</ul>**

18.             **</li>**

19.             **<li>**

20.                 ****File 2****

21.             **</li>**

22.             **<li>**

23.                 ****File 3****

24.             **</li>**

25.         **</ul>**

26.     **</li>**

27.     **<li>**

28.         ****File21****

29.     **</li>**

30. **</ul>**

Tree 也可以在一个空的 <ul> 元素里定义。

1.  **<ul** id="tt"**></ul>**

1.  $('\#tt').tree(\{

2.      url:'tree\_data.json'

3.  \});

**树数据的格式（****Tree data format****）**

每个节点可以包含下列特性：

*  id：节点的 id，它对于加载远程数据很重要。
 *  text：显示的节点文字。
 *  state：节点状态， 'open' 或 'closed'，默认是 'open'。当设为 'closed' 时，此节点有子节点，并且将从远程站点加载它们。
 *  checked：指示节点是否被选中。 Indicate whether the node is checked selected.
 *  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. \}\]

**特性**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#8cacbb;"> 名称 </td> 
 <td> 类型 </td> 
 <td> 说明 </td> 
 <td> 默认值 </td> 
 </tr> 
 <tr> 
 <td> url </td> 
 <td> string </td> 
 <td> 获取远程数据的&nbsp;URL&nbsp;。 </td> 
 <td> null </td> 
 </tr> 
 <tr> 
 <td> method </td> 
 <td> string </td> 
 <td> 获取数据的&nbsp;http method&nbsp;。 </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> 定义是否在每个节点前边显示&nbsp;checkbox&nbsp;。 </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> 定义是否只在叶节点前显示&nbsp;checkbox&nbsp;。 </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> 加载的节点数据。 </td> 
 <td> null </td> 
 </tr> 
 </tbody> 
</table>

**事件**

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

*  id：绑定到节点的标识值。
 *  text：显示的文字。
 *  checked：是否节点被选中。
 *  attributes：绑定到节点的自定义属性。
 *  target：目标的 DOM 对象。

**方法**

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#8cacbb;"> 名称 </td> 
 <td> 参数 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> options </td> 
 <td> none </td> 
 <td> 返回树的&nbsp;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> 获取父节点，&nbsp;target&nbsp;参数指节点的&nbsp;DOM&nbsp;对象。 </td> 
 </tr> 
 <tr> 
 <td> getChildren </td> 
 <td> target </td> 
 <td> 获取子节点，&nbsp;target&nbsp;参数指节点的&nbsp;DOM&nbsp;对象。 </td> 
 </tr> 
 <tr> 
 <td> getChecked </td> 
 <td> none </td> 
 <td> 获取所有选中的节点。 </td> 
 </tr> 
 <tr> 
 <td> getSelected </td> 
 <td> none </td> 
 <td> 获取选中的节点并返回它，如果没有选中节点，就返回&nbsp;null。 </td> 
 </tr> 
 <tr> 
 <td> isLeaf </td> 
 <td> target </td> 
 <td> 把指定的节点定义成叶节点，&nbsp;target&nbsp;参数表示节点的&nbsp;DOM&nbsp;对象。 </td> 
 </tr> 
 <tr> 
 <td> find </td> 
 <td> id </td> 
 <td> 找到指定的节点并返回此节点对象。 </td> 
 </tr> 
 <tr> 
 <td> select </td> 
 <td> target </td> 
 <td> 选中一个节点，&nbsp;target&nbsp;参数表示节点的&nbsp;DOM&nbsp;对象。 </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> 折叠一个节点，&nbsp;target&nbsp;参数表示节点的&nbsp;DOM&nbsp;对象。 </td> 
 </tr> 
 <tr> 
 <td> expand </td> 
 <td> target </td> 
 <td> 展开一个节点，&nbsp;target&nbsp;参数表示节点的&nbsp;DOM&nbsp;对象。 </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> append </td> 
 <td> param </td> 
 <td> 追加一些子节点们到一个父节点，&nbsp;param&nbsp;参数有两个特性： parent：DOM&nbsp;对象，追加到的父节点，如果没有分配，则追加为根节点。 data：数组，节点们的数据。 </td> 
 </tr> 
 <tr> 
 <td> toggle </td> 
 <td> target </td> 
 <td> 切换节点的展开/折叠状态，&nbsp;target&nbsp;参数表示节点的&nbsp;DOM&nbsp;对象。 </td> 
 </tr> 
 <tr> 
 <td> insert </td> 
 <td> param </td> 
 <td> 在指定节点的前边或后边插入一个节点，&nbsp;param&nbsp;参数包含下列特性： before：DOM&nbsp;对象，前边插入的节点。 after：DOM&nbsp;对象，后边插入的节点。 data：对象，节点数据。 </td> 
 </tr> 
 <tr> 
 <td> remove </td> 
 <td> target </td> 
 <td> 移除一个节点和它的子节点们，&nbsp;target&nbsp;参数表示节点的&nbsp;DOM&nbsp;对象。 </td> 
 </tr> 
 <tr> 
 <td> pop </td> 
 <td> target </td> 
 <td> 弹出一个节点和它的子节点们，此方法和&nbsp;remove&nbsp;一样，但是返回了移除的节点数据。 </td> 
 </tr> 
 <tr> 
 <td> update </td> 
 <td> param </td> 
 <td> 跟心指定的节点，&nbsp;param&nbsp;参数有下列特性： target（DOM&nbsp;对象，被更新的节点）、id、text、iconCls、checked、等等。 </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> nodeEl </td> 
 <td> 开始编辑节点。 </td> 
 </tr> 
 <tr> 
 <td> endEdit </td> 
 <td> nodeEl </td> 
 <td> 结束编辑节点。 </td> 
 </tr> 
 <tr> 
 <td> cancelEdit </td> 
 <td> nodeEl </td> 
 <td> 取消编辑节点。 </td> 
 </tr> 
 </tbody> 
</table>