jEasyUI 树形菜单添加节点学习笔记
简介
jEasyUI 是一款基于 jQuery 的开源 UI 库,其提供了大量的易于使用的 UI 组件,其中包括树形菜单组件。
在 jEasyUI 树形菜单中添加节点可以让菜单实现动态加载和数据更新,因此是非常重要的一个功能。
本文将介绍如何使用 jEasyUI 树形菜单组件添加节点。
步骤
1. 准备 HTML 文件
首先需要在 HTML 文件中引入必要的 CSS 和 JS 文件。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI 树形菜单添加节点学习笔记</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tree"></ul>
</body>
</html>
2. 初始化树形菜单
为了能够添加节点,首先需要初始化一个树形菜单组件。
javascriptCopy Code$(function(){
$('#tree').tree({
data: [{
text: 'Parent Node 1',
children: [{
text: 'Child Node 1',
children: [{
text: 'Grandchild Node 1'
},{
text: 'Grandchild Node 2'
}]
}]
},{
text: 'Parent Node 2'
}]
});
});
3. 添加节点
接下来就可以通过 easyui-tree 的 append 方法来添加节点。
javascriptCopy Code$(function(){
$('#tree').tree({
data: [{
text: 'Parent Node 1',
children: [{
text: 'Child Node 1',
children: [{
text: 'Grandchild Node 1'
},{
text: 'Grandchild Node 2'
}]
}]
},{
text: 'Parent Node 2'
}]
});
var node = $('#tree').tree('find', 'Child Node 1');
$('#tree').tree('append', {
parent: node.target,
data: [{
text: 'New Child Node'
}]
});
});
4. 运行代码
运行 HTML 文件,你会发现「Child Node 1」节点下面新增了一个「New Child Node」节点。
示例代码
完整的示例代码如下:
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI 树形菜单添加节点学习笔记</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tree"></ul>
<script type="text/javascript">
$(function(){
$('#tree').tree({
data: [{
text: 'Parent Node 1',
children: [{
text: 'Child Node 1',
children: [{
text: 'Grandchild Node 1'
},{
text: 'Grandchild Node 2'
}]
}]
},{
text: 'Parent Node 2'
}]
});
var node = $('#tree').tree('find', 'Child Node 1');
$('#tree').tree('append', {
parent: node.target,
data: [{
text: 'New Child Node'
}]
});
});
</script>
</body>
</html>