easyui

easyui又叫Jquery EasyUI，是基于Jquery的界面框架插件，提供了丰富的界面功能，方便快速开发Web界面程序

目前easyui的官方网站已经下架，但是大家想使用easyui的话可以去搜官方文档之类的关键字

本期文章所使用的的框架是在**【jQuery EasyUI 1.5API 中文版】**中找到的
在这里插入图片描述

easyui和前前几期文章中的bootstrap，以及Ant Design、Vue都是比较常用的前端UI(界面)

bootstrap排出来的一般用于用户观看使用，而easyui则是给后台开发人员观看使用

因为管理员界面以简洁、方便操作为主，而easyui提供的一个Layout布局刚好能用来快速搭建管理员界面

编写代码之前需要将easyui导入到项目当中
在这里插入图片描述

导入语句：

<!-- min:压缩版,导入js,css $代表jquery -->
<script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/icon.css">

主页：index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head lang="zh"><title>Title</title><script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script><script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css"><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/icon.css">
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'网站信息',collapsible:false" style="height:100px;"></div>
<div data-options="region:'south',title:'赞助链接',collapsible:false" style="height:100px;"></div>
<div data-options="region:'west',title:'菜单',split:true" style="width:20%;"><ul id="sidebarTree"></ul>
</div>
<div data-options="region:'center',title:'主体部分'" style="padding:5px;background:#eee;"></div>
<script>$("#sidebarTree").tree({url: "${pageContext.request.contextPath}/sidebarTree.json",lines: true,})
</script>
</body>
</html>

sidebarTree.json：左侧菜单内容

[{"id": 1,"text": "商品管理","attributes": {"pid": 0},"children": [{"id": 2,"text": "商品管理01","attributes": {"pid": 1}},{"id": 3,"text": "商品管理02","attributes": {"pid": 1}}]},{"id": 10,"text": "类别管理","attributes": {"pid": 0},"children": [{"id": 11,"text": "类别管理01","attributes": {"pid": 10}},{"id": 12,"text": "类别管理02","attributes": {"pid": 10}}]}
]