jEasyUI 使用标记创建树形菜单学习笔记
1. 前言
jEasyUI 是一套基于 jQuery 的 UI 组件库,提供了丰富的 UI 组件,包括表格、窗口、日期选择器、树形菜单等。在本篇学习笔记中,我们将重点讲解如何使用标记创建树形菜单。
2. 标记
在 jEasyUI 中,我们可以使用以下标记来创建树形菜单:
htmlCopy Code<ul id="tree">
<li>节点1</li>
<li>节点2</li>
<ul>
<li>节点2.1</li>
<li>节点2.2</li>
<ul>
<li>节点2.2.1</li>
<li>节点2.2.2</li>
</ul>
</ul>
<li>节点3</li>
</ul>
其中,每个 <li>
标记表示一个节点,可以包含子节点以构建树形结构。需要注意的是,根节点必须包含在一个 <ul>
标记中。
3. 实例
下面,我们将使用 jEasyUI 创建一个简单的树形菜单,并添加节点的点击事件:
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI 树形菜单</title>
<link rel="stylesheet" type="text/css" href="http://jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tree').tree({
onClick: function(node){
alert('您单击了节点:' + node.text);
},
data: [{
"id":1,
"text":"节点1"
},{
"id":2,
"text":"节点2",
"children":[{
"id":21,
"text":"节点2.1"
},{
"id":22,
"text":"节点2.2",
"children":[{
"id":221,
"text":"节点2.2.1"
},{
"id":222,
"text":"节点2.2.2"
}]
}]
},{
"id":3,
"text":"节点3"
}]
});
});
</script>
</head>
<body>
<ul id="tree"></ul>
</body>
</html>
在上面的代码中,我们首先引入了 jEasyUI 的样式表和 JavaScript 文件。接着,我们创建了一个 <ul>
标记作为树形菜单的容器,并将其 ID 设为 tree
。然后,我们使用 jQuery 的 $()
函数来查询 ID 为 tree
的元素,并调用 .tree()
方法将其转化为树形菜单。在 .tree()
方法中,我们通过 data
属性设置了树形菜单的节点数据,其中每个节点必须包含 id
和 text
属性。此外,我们还为树形菜单注册了 onClick
事件处理函数,在用户单击节点时弹出一个对话框显示节点文本。
至此,我们已经学习了如何使用 jEasyUI 创建树形菜单。希望这篇学习笔记对你有所帮助!