jQuery EasyUI 树形菜单 - 创建基础树形网格
概述
jQuery EasyUI 是一款流行的开源前端框架，提供了丰富的 UI 组件，其中包括树形菜单。本文将介绍如何使用 EasyUI 创建基础树形菜单。
准备工作
创建 EasyUI 树形菜单需要 jQuery 和 EasyUI 的支持，因此，需先引入 jQuery 和 EasyUI 的资源文件。
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/dist/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/dist/themes/icon.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui/dist/jquery.easyui.min.js"></script>
创建基础树形网格
在 HTML 中定义一个 div 作为容器，写入如下代码即可创建一个基础的树形菜单：
<div class="easyui-tree" data-options="url:'tree_data.json',method:'get',lines:true"></div>
其中，tree_data.json 是存储树形菜单数据的 .json 文件。通过 URL 获取数据，tree_data.json 文件中编写所有节点的文本和节点的子节点的 json 数据，举个例子：
[{
"text": "Node1",
"children": [{
"text": "Child1",
"checked": true
},{
"text": "Child2"
}]
},{
"text": "Node2"
}]
首先声明了两个节点，第一个节点包含一个名为 Child1 和一个名为 Child2 的子节点，第二个节点没有子节点。"checked"是该节点是否被默认选中，这是给节点添加 checkbox 的方法。由于上述 json 数据编写格式不好阅读和修改，在实际工作中多会用异步数据请求回调函数的方式添加效果更好的 checkbox，以及自定义 icon，style 等属性来增强可读性和美观度。
自定义其它属性：
我们可以添加节点 checkbox 或添加 icon 等效果，下面是自定义效果的代码片段：
<div class="easyui-tree" data-options="
url:'tree_data.json',
method:'get',
lines:true,
onBeforeExpand:function(node, param){
if (node.iconCls == 'icon-man'){
$('#tt').tree('update', {
target: node.target,
iconCls: 'icon-woman'
});
}
}
">
<div>
<span>Root</span>
</div>
</div>
其中 code=“icon-man” 是前面几种图标。（EasyUI官方文档：Tree）这是Javascript函数下的对 checkboxes,和icon的自定义方式，熟悉jquery选择器设计理念的人基本上理解起来不是很难。
最后附上一个完整的基础树形菜单代码片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI Tree Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/dist/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/dist/themes/icon.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui/dist/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-tree" data-options="url:'tree_data.json',method:'get',lines:true"></div>
<div id="alert"></div>
<script type="text/javascript">
$(function(){
$('#tt').tree({
onContextMenu: function(e, node){
e.preventDefault();
$(this).tree('select', node.target);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
});
</script>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()">添加子节点</div>
<div onclick="remove()">删除节点</div>
</div>
</body>
</html>
其中包括了一些实用的事件绑定。更多高级功能请查阅 jQuery EasyUI 官方文档。