Easyui 搭建后台管理界面

最新推荐文章于 2024-08-08 07:08:13 发布

黄宝康

最新推荐文章于 2024-08-08 07:08:13 发布

阅读量4.8k

点赞数 4

分类专栏： easyui-api 文章标签： easyui 后台管理

本文链接：https://blog.csdn.net/huangbaokang/article/details/78224549

版权

本文介绍了使用Easyui框架搭建后台管理界面的过程，包括main.jsp的布局设计，使用jquery-easyui-1.5.3版本，以及include.jsp中引入的公共样式和脚本。通过main.css定制简单logo样式，main.js控制tab显示、导航树加载，利用本地json数据实现功能。最终展示了项目运行效果。

摘要由CSDN通过智能技术生成

Easyui是目前后台管理界面使用比较流行的框架。
以下是我个人初学Easyui api后搭建的后台管理界面。

框架使用jquery-easyui-1.5.3

首页main.jsp代码，主要使用easyui-layout布局，和一个tabs支持的导航工具menu。

main.jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<jsp:include page="/views/basic/include.jsp"></jsp:include>

<!-- 自定义css js -->
<link rel="stylesheet" type="text/css" href="<%=path%>/css/main.css" />
<script type="text/javascript" src="<%=path%>/js/main.js"></script>
</head>
<body class="easyui-layout">
    <!-- 头部开始-->
    <div data-options="region:'north',title:'头部',split:true,noheader:true" style="height: 60px; background: #666">
        <div class="logo">后台管理</div>
        <div class="logout">
            您好，administrator|<a href="">退出</a>
        </div>
    </div>
    <!-- End头部 -->

    <!-- 底部开始 -->
    <div data-options="region:'south',title:'底部',split:true,noheader:true" style="height: 35px; line-height: 30px; text-align: center;">黄宝康版权所有!TEL:18679758769</div>
    <!-- End底部 -->

    <!-- 导航开始 -->
    <div data-options="region:'west',title:'导航',split:true,iconCls:'icon-large-shapes'"