easyui简介

最新推荐文章于 2024-05-27 12:07:42 发布

霸气文.

最新推荐文章于 2024-05-27 12:07:42 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/weixin_45355397/article/details/97620061

版权

什么是easyui?

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签

外文名

jQueryEasyUI

定义

基于jQuery的UI插件集合体

功能

打造出功能丰富并且美观的UI界面

应用对象

web开发者

首先导jar包：

jQuery EasyUI 入门指南：

下载程序库并导入EasyUI的CSS和Javascript文件到您的页面

（可以在jquery.easyui.min.js之前之前加上${pageContext.request.contextPath } 表示全路径名，以免路径出错）

如下:

API部分资料：

代码演示：index.jsp

<%@ 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>
<link rel="stylesheet" type="text/css"
   href="${pageContext.request.contextPath }/static/js/easyui5/themes/black/easyui.css">
<link rel="stylesheet" type="text/css"
   href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">
<script type="text/javascript"
   src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>
<script type="text/javascript"
   src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后台管理系统</title>
</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; padding: 10px;">west content</div>
   <div
       data-options="region:'east',split:true,collapsed:true,title:'East'"
       style="width: 100px; padding: 10px;">east region</div>
   <div data-options="region:'south',border:false"
       style="height: 50px; background: #A9FACD; padding: 10px;">south
       region</div>
   <div data-options="region:'center',title:'Center'"></div>
</body>

</html>

效果如下:

tree菜单:(TreeNode)

package com.lww.entity;
/**
* 作用是通过TreeNode类转换成
* tree_data1.json的字符串
* @author 2018101801
*
*/

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class TreeNode {
   private String id;
   private String text;
   private List<TreeNode> children = new ArrayList<>();
   private Map<String, Object> attributes = new HashMap<>();
   public TreeNode() {
   }
   public TreeNode(String id, String text, List<TreeNode> children, Map<String, Object> attributes) {
       this.id = id;
       this.text = text;
       this.children = children;
       this.attributes = attributes;
   }
   public String getId() {
       return id;
   }
   public void setId(String id) {
       this.id = id;
   }
   public String getText() {
       return text;
   }
   public void setText(String text) {
       this.text = text;
   }
   public List<TreeNode> getChildren() {
       return children;
   }
   public void setChildren(List<TreeNode> children) {
       this.children = children;
   }
   public Map<String, Object> getAttributes() {
       return attributes;
   }
   public void setAttributes(Map<String, Object> attributes) {
       this.attributes = attributes;
   }
   @Override
   public String toString() {
       return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + ", attributes=" + attributes + "]";
   }

}

MenuDao（访问数据库）

package com.lww.dao;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.lww.entity.TreeNode;
import com.lww.util.JsonBaseDao;
import com.lww.util.JsonUtils;
import com.lww.util.PageBean;
import com.lww.util.StringUtils;

public class MenuDao extends JsonBaseDao{
   /**
   * 给前台返回tree_data1.json的字符串
   *    从前台jsp传递过来的参数集合
   */
   public List<TreeNode> listTreeNode(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
       List<Map<String, Object>> listMap = this.listMap(paMap, pageBean);
       List<TreeNode> listTreeNode = new ArrayList<>();
       this.listMapToListTreeNode(listMap, listTreeNode);
       return listTreeNode;
   }

   /**
   * [{'Menuid':001},{'Menuname':'学生管理'},{{'Menuid':002},{'Menuname':'后勤管理'}}]
   * @param paMap
   * @param pageBean
   * @return
   * @throws InstantiationException
   * @throws IllegalAccessException
   * @throws SQLException
   */
   public List<Map<String, Object>> listMap(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
       String sql = "select * from t_easyui_menu where true";
       String menuId = JsonUtils.getParamVal(paMap, "Menuid");
       if(StringUtils.isNotBlank(menuId)) {
           sql += " and parentid=" + menuId;
       }else {
           sql += " and parentid=-1";
       }

//       这里面存放的是数据库中菜单信息
       List<Map<String, Object>> listMap = super.executeQuery(sql, pageBean);
       return listMap;
   }

   /**
   * {'Menuid':001},{'Menuname':'学生管理'}
   * -->
   * {id:...,text:...}
   * @param map
   * @param treeNode
   * @throws SQLException
   * @throws IllegalAccessException
   * @throws InstantiationException
   */
   private void mapToTreeNode(Map<String, Object> map,TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
       treeNode.setId(map.get("Menuid")+"");
       treeNode.setText(map.get("Menuname")+"");
       treeNode.setAttributes(map);

//       将子节点添加到父节点当中，建立数据之间的父子关系
//       treeNode.setChildren(children);
       Map<String, String[]> childrenMap = new HashMap<>();
       childrenMap.put("Menuid", new String[] {treeNode.getId()});
       List<Map<String, Object>> listMap = this.listMap(childrenMap, null);
       List<TreeNode> listTreeNode = new ArrayList<>();
       this.listMapToListTreeNode(listMap, listTreeNode);
       treeNode.setChildren(listTreeNode);
   }

   /**
   * [{'Menuid':001},{'Menuname':'学生管理'},{{'Menuid':002},{'Menuname':'后勤管理'}}]
   * -->
   * tree_data1.json
   * @param listMap
   * @param listTreeNode
   * @throws SQLException
   * @throws IllegalAccessException
   * @throws InstantiationException
   */
   private void listMapToListTreeNode(List<Map<String, Object>> listMap,List<TreeNode> listTreeNode) throws InstantiationException, IllegalAccessException, SQLException {
       TreeNode treeNode = null;
       for (Map<String, Object> map : listMap) {
           treeNode = new TreeNode();
           mapToTreeNode(map, treeNode);
           listTreeNode.add(treeNode);
       }
   }

}

（将list集合转换成json串）MenuAction

package com.lww.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.lww.dao.MenuDao;
import com.lww.entity.TreeNode;
import com.lww.framework.ActionSupport;
import com.lww.util.ResponseUtil;

public class MenuAction extends ActionSupport {
   private MenuDao menuDao = new MenuDao();

   public String menuTree(HttpServletRequest req,HttpServletResponse resp) {
       ObjectMapper om = new ObjectMapper();
       try {
//           获取到easyui框架所识别的json格式
           List<TreeNode> listTreeNode = this.menuDao.listTreeNode(req.getParameterMap(), null);
           ResponseUtil.write(resp, om.writeValueAsString(listTreeNode));
       } catch (Exception e) {
           e.printStackTrace();
       }
       return null;
   }
}

配置mvc.xml

</action>

写index.js

$(function(){
   $('#tt').tree({
   url:'menuAction.action?methodName=menuTree',
   });
})

index.jsp页面

<%@ 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="text/css" href="${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>
<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;padding:10px;">
       菜单管理
       <ul id="tt"></ul>
   </div>
   <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
   <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
   <div data-options="region:'center',title:'Center'">
   </div>
</body>
</html>

效果展示：

3、tabs布局

index.js(有改动)

$(function(){
   $('#tt').tree({
   url:'menuAction.action?methodName=menuTree',
   onClick: function(node){
//           alert(node.text); 在用户点击的时候提示
           // add a new tab panel
           var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
           if($('#menuTab').tabs('exists',node.text)){
//               存在，执行选项卡选中已有选项卡的操作
               $('#menuTab').tabs('select',node.text);
           }else{
//               不存在，执行新增的操作
               $('#menuTab').tabs('add',{
               title:node.text,
               content:content,
               closable:true
               });
           }

       }

});

})

index.jsp(有改动)

效果展示：

霸气文.

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
easyui简介

什么是easyui? jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签外文名jQueryEasyUI定义基于jQuery的UI插件...
复制链接

扫一扫