jQuery EasyUI使用教程之添加節點到樹形菜單

本教程爲你們介紹如何添加節點到樹形菜單。咱們將建立一個包含水果和蔬菜節點的食品樹，而後添加一些其餘水果到已存在的水果節點中。

jQuery EasyUI最新試用版下載請猛戳>>

建立食品樹

首先，咱們建立食品樹，代碼以下所示：

<div style="width:200px;height:auto;border:1px solid #ccc;">

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

</div>

請注意，樹組件是定義在「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-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的教程>>