| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| url | string | 檢索遠程數據的URL地址。 | null |
| method | string | 檢索數據的HTTP方法。（POST / GET） | post |
| animate | boolean | 定義節點在展開或折疊的時候是否顯示動畫效果。 | false |
| checkbox | boolean | 定義是否在每一個借點之前都顯示復選框。 | false |
| cascadeCheck | boolean | 定義是否層疊選中狀態。 | true |
| onlyLeafCheck | boolean | 定義是否只在末級節點之前顯示復選框。 | false |
| lines | boolean | 定義是否顯示樹控件上的虛線。 | false |
| dnd | boolean | 定義是否啟用拖拽功能。 | false |
| data | array | 節點數據加載。$('#tt').tree({ data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' },{ text: 'Item12' }] },{ text: 'Item2' }]}); | null |
| formatter | function(node) | 定義如何渲染節點的文本。 代碼示例： $('#tt').tree({ formatter:function(node){ return node.text; }}); | false |
| loader | function(param,success,error) | 定義如何從遠程服務器加載數據。返回false可以忽略本操作。該函數具備以下參數：param：發送到遠程服務器的參數對象。success(data)：當檢索數據成功的時候調用的回調函數。error()：當檢索數據失敗的時候調用的回調函數。 | json loader |
| loadFilter | function(data,parent) | 返回過濾過的數據進行展示。返回數據是標準樹格式。該函數具備以下參數：data：加載的原始數據。parent: DOM對象，代表父節點。 |
很多事件的回調函數都包含'node'參數，其具備如下屬性：
id：綁定節點的標識值。text：顯示的節點文本。iconCls：顯示的節點圖標CSS類ID。checked：該節點是否被選中。state：節點狀態，'open' 或 'closed'。attributes：綁定該節點的自定義屬性。target：目標DOM對象。| 事件名 | 事件參數 | 描述 | |
|---|---|---|---|
| onClick | node | 在用戶點擊一個節點的時候觸發。 代碼示例： $('#tt').tree({ onClick: function(node){ alert(node.text); // 在用戶點擊的時候提示 }}); | |
| onDblClick | node | 在用戶雙擊一個節點的時候觸發。 | |
| onBeforeLoad | node, param | 在請求加載遠程數據之前觸發，返回false可以取消加載操作。 | |
| onLoadSuccess | node, data | 在數據加載成功以后觸發。 | |
| onLoadError | arguments | 在數據加載失敗的時候觸發，arguments參數和jQuery的$.Ajax()函數里面的'error'回調函數的參數相同。 | |
| onBeforeExpand | node | 在節點展開之前觸發，返回false可以取消展開操作。 | |
| onExpand | node | 在節點展開的時候觸發。 | |
| onBeforeCollapse | node | 在節點折疊之前觸發，返回false可以取消折疊操作。 | |
| onCollapse | node | 在節點折疊的時候觸發。 | |
| onBeforeCheck | node, checked | 在用戶點擊勾選復選框之前觸發，返回false可以取消選擇動作。（該事件自1.3.1版開始可用） | |
| onCheck | node, checked | 在用戶點擊勾選復選框的時候觸發。 | |
| 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'">追加</div> <div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div></div> | |
| onBeforeDrag | node | 在開始拖動節點之前觸發，返回false可以拒絕拖動。（該事件自1.3.2版開始可用） | |
| onStartDrag | node | 在開始拖動節點的時候觸發。（該事件自1.3.2版開始可用） | |
| onStopDrag | node | 在停止拖動節點的時候觸發。（該事件自1.3.2版開始可用） | |
| onDragEnter | target, source | 在拖動一個節點進入到某個目標節點并釋放的時候觸發，返回false可以拒絕拖動。target：釋放的目標節點元素。source：開始拖動的源節點。（該事件自1.3.2版開始可用） | |
| onDragOver | target, source | 在拖動一個節點經過某個目標節點并釋放的時候觸發，返回false可以拒絕拖動。target：釋放的目標節點元素。source：開始拖動的源節點。（該事件自1.3.2版開始可用） | |
| onDragLeave | target, source | 在拖動一個節點離開某個目標節點并釋放的時候觸發，返回false可以拒絕拖動。target：釋放的目標節點元素。source：開始拖動的源節點。（該事件自1.3.2版開始可用） | |
| onBeforeDrop | target, source, point | 在拖動一個節點之前觸發，返回false可以拒絕拖動。target：釋放的目標節點元素。source：開始拖動的源節點。point：表示哪一種拖動操作，可用值有：'append','top' 或 'bottom'。（該事件自1.3.3版開始可用） | |
| onDrop | target, source, point | 當節點位置被拖動時觸發。target：DOM對象，需要被拖動動的目標節點。source：源節點。point：表示哪一種拖動操作，可用值有：'append','top' 或 'bottom'。 | |
| onBeforeEdit | node | 在編輯節點之前觸發。 | |
| onAfterEdit | node | 在編輯節點之后觸發。 | |
| onCancelEdit | node | 在取消編輯操作的時候觸發。 |
| 方法名 | 方法參數 | 描述 |
|---|---|---|
| options | none | 返回樹控件屬性。 |
| loadData | data | 讀取樹控件數據。 |
| getNode | target | 獲取指定節點對象。 |
| getData | target | 獲取指定節點數據，包含它的子節點。 |
| reload | target | 重新載入樹控件數據。 |
| getRoot | none | 獲取根節點，返回節點對象。 |
| getRoots | none | 獲取所有根節點，返回節點數組。 |
| getParent | target | 獲取父節點，'target'參數代表節點的DOM對象。 |
| getChildren | target | 獲取所有子節點，'target'參數代表節點的DOM對象。 |
| getChecked | state | 獲取所有選中的節點。'state'可用值有：'checked','unchecked','indeterminate'。如果'state'未指定，將返回'checked'節點。 代碼示例： var nodes = $('#tt').tree('getChecked'); // get checked nodesvar nodes = $('#tt').tree('getChecked', 'unchecked'); // 獲取未選擇節點var nodes = $('#tt').tree('getChecked', 'indeterminate'); // 獲取不確定的節點 |
| 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對象。在節點關閉或沒有子節點的時候，節點ID的值(名為'id'的參數)將會發送給服務器請求子節點的數據。 |
| collapseAll | target | 折疊所有節點。 |
| expandAll | target | 展開所有節點。 |
| expandTo | target | 打開從根節點到指定節點之間的所有節點。 |
| scrollTo | target | 滾動到指定節點。（該方法自1.3.4版開始可用） |
| append | param | 追加若干子節點到一個父節點，param參數有2個屬性：parent：DOM對象，將要被追加子節點的父節點，如果未指定，子節點將被追加至根節點。data：數組，節點數據。 代碼示例： // 追加若干個節點并選中他們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 | 打開或關閉節點的觸發器，target參數是一個節點DOM對象。 |
| insert | param | 在一個指定節點之前或之后插入節點，'param'參數包含如下屬性：before：DOM對象，在某個節點之前插入。after：DOM對象，在某個節點之后插入。data：對象，節點數據。 下面的代碼展示了如何將一個新節點插入到選擇的節點之前： 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 | 啟用拖拽功能。 |
| disableDnd | none | 禁用拖拽功能。 |
| beginEdit | target | 開始編輯一個節點。 |
| endEdit | target | 結束編輯一個節點。 |
| cancelEdit | target | 取消編輯一個節點。 |
新聞熱點
疑難解答
