Easyui(一)

最新推荐文章于 2024-06-21 23:54:00 发布

Mentality。

最新推荐文章于 2024-06-21 23:54:00 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/chenkang_ck/article/details/94055029

版权

本文介绍了前端框架Easyui，它基于jquery，适用于后台管理界面。文章详细讲解了Easyui的layout布局，强调了导入jar包和正确引用的重要性，并展示了index界面的layout布局示例。接着，文章探讨了Easyui的tree菜单实现，包括数据转换、实体类、 Dao和Action的使用，以及配置和js编写。最后，文章讨论了Easyui的tabs功能，解释了如何处理重复点击和页面显示的问题。

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

1、Easyui介绍

Easyui是前端框架的一种
Easyui=jquery+html4(用来做后台的管理界面)
但是Easyui出现的比较久相对来说很少用了但是它相对的功能还是比较完善的；
想学好Easyui就必须先学好jquery！！

2、Easyui的layout布局

首先我们要知道它需要用到的jar包
在这里插入图片描述
里面包括mvc自定义分页以及自定义标签以及xml建模；
接下来就是导入Easyui，css样式以及javascript文件

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="${pageContext.request.contextPath}/static/js/public/easyui5/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/public/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/public/easyui5/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>

记住前面一定要用全路径名避免出错！！
接下来看一下index界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/public/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="${pageContext.request.contextPath}/static/js/public/easyui5/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/public/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/public/easyui5/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>  

</head>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;pa