1. 确保您已经引入了 jQuery 和 EasyUI 的相关文件。您可以从官方网站([EasyUI 官网](http://www.jeasyui.com/))下载并引入这些文件。
2. 在 HTML 中创建一个容器,用于显示树形菜单:
<div id="tree"></div>
<button id="addNodeBtn">添加节点</button>
3. 使用 jQuery EasyUI 的 tree 方法初始化树形菜单:
<script>
$(function(){
// 初始化树形菜单
$('#tree').tree({
data: [{
id: 1,
text: 'Node 1',
children: [{
id: 11,
text: 'Node 1.1'
}, {
id: 12,
text: 'Node 1.2'
}]
}, {
id: 2,
text: 'Node 2',
state: 'closed',
children: [{
id: 21,
text: 'Node 2.1'
}, {
id: 22,
text: 'Node 2.2'
}]
}]
});
// 绑定按钮点击事件
$('#addNodeBtn').click(function(){
// 获取选中的节点
var selectedNode = $('#tree').tree('getSelected');
// 如果没有选中的节点,默认在根节点下添加
var parentNode = selectedNode ? selectedNode.target : null;
// 添加节点
$('#tree').tree('append', {
parent: parentNode,
data: [{
id: 100, // 新节点的唯一标识
text: 'New Node'
}]
});
});
});
</script>
在这个例子中,我们使用 tree 方法初始化了一个树形菜单,并通过 data 选项定义了树形结构。按钮点击事件中,我们使用 tree 的 getSelected 方法获取当前选中的节点,然后使用 append 方法向树形菜单中添加新的节点。
您可以根据实际需求调整节点的属性和内容。
转载请注明出处:http://www.zyzy.cn/article/detail/13135/jQuery EasyUI