jQuery.tree是一個非常實用的樹形結構插件,它可以方便地幫助我們展示復雜的層次結構內容,同時還支持一些常用的交互操作。本文將介紹如何在jQuery.tree中選中節點。
首先,我們需要在HTML頁面中引入jQuery庫和jquery.tree插件。代碼如下:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jquery.tree.js"></script>
然后,在HTML頁面中創建一個div元素用于展示樹形結構內容。代碼如下:
<div id="tree"></div>
接著,在JavaScript中初始化jQuery.tree插件,并設置一些參數。其中,onSelect參數表示當節點被選中時觸發的回調函數。代碼如下:
$('#tree').tree({
data: [{
id: 1,
text: '節點1',
children: [{
id: 11,
text: '子節點1'
}, {
id: 12,
text: '子節點2'
}]
}, {
id: 2,
text: '節點2'
}],
onSelect: function(node) {
console.log(node.id + '被選中了');
}
});
現在,我們已經實現了當節點被選中時輸出它的id的功能。但是,如何在程序中選中一個節點呢?可以通過調用select方法,并傳入節點id來實現。代碼如下:
$('#tree').tree('select', 11);
以上代碼表示選中id為11的節點。您可以替換這個id為任意一個節點的id。這樣,我們就實現了在jQuery.tree中選中節點的功能。