EasyUi（一）

最新推荐文章于 2020-07-06 00:24:30 发布

CJQ余小C

最新推荐文章于 2020-07-06 00:24:30 发布

阅读量209

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/CJQYQX/article/details/97622220

一、什么是EasyUi？

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

2.EasyUi的特点：
（1）、基于jquery用户界面插件的集合
（2）、为一些当前用于交互的js应用提供必要的功能
（3）、EasyUI支持两种渲染方式分别为javascript方式（如：$(’#p’).panel({…})）和html标记方式（如：class=“easyui-panel”）
（4）、支持HTML5（通过data-options属性）
（5）、开发产品时可节省时间和资源
（6）、简单，但很强大
（7）、支持扩展，可根据自己的需求扩展控件
（8）、目前各项不足正以版本递增的方式不断完善
3.下载EasyUi软件
在这里插入图片描述
4.引入jar包
代码如下：

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

注意：用 ${pageContext.request.contextPath } 表示全路径名，以免路径出错
jquery.min.js必须必须用在jquery.easyui.min.js之前
在layout进行布局：

<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>

运行结果如下：
在这里插入图片描述

二.案例

1、通过layout布局
1.1 panel
1.2 layout
1.3 accordion
1.4 tabs

2. 窗口
2.1 window
2.2 dialog
2.3 messager

3. combox
tree
Datagrid
Treegrid

4. tree
根节点
父节点/子节点
枝节点/叶节点

 <iframe scrolling="no" frameborder="0" src="" width="99%" height="99%"></iframe>

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能
jsno内容：


[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{ 
   
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books", 
   
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{ 
   
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8, 
   
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{ 
   
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]

步骤：
创建实体类：TreeNode

package com.cjq.entity;
/**
 * 作用是通过TreeNode类转换成
 * tree_data1.json的字符串
 * @author cjq
 */
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.cjq.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import com.cjq.entity.TreeNode;
import com.cjq.util.JsonBaseDao;
import com.cjq.util.JsonUtils;
import com.cjq.util.PageBean;
import com.cjq.util.StringUtils;public class MenuDao extends JsonBaseDao {
/**
 * 给前台返回tree_data1.json的字符串
 * @param paMapv 从前台jsp传递过来的参数集合
 * @param pageBean
 * @return
 * @throws InstantiationException
 * @throws IllegalAccessException
 * @throws SQLException
 */
   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':001,'menuName':'后勤管理'}}]
  * @param paMap
  * @param pageBean
  * @return
  * @throws SQLException 
  * @throws IllegalAccessException 
  * @throws InstantiationException 
  */
 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 
  */
 public void mapToTreeNode(Map<String, Object>map,TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
  treeNode.setId(map.get("Menuid")+"");
  treeNode.setText(map.get("Manuname")+"");
  treeNode.setAttributes(map);
//  将子节点添加到父节点当中，建立数据之间的父子关系
//  treeNode.setChildren(children);
  
  Map<String, String[]> childrenMap=new HashMap<String, String[]>();
  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':001,'menuName':'后勤管理'}}]
 * @param listMap
 * @param listTreeNode
 * @throws InstantiationException
 * @throws IllegalAccessException
 * @throws SQLException
 */
 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);
  }
 }
}

MenuAction：

package com.cjq.web;
import java.util.List;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.databind.ObjectMapper;
import com.cjq.dao.MenuDao;
import com.cjq.entity.TreeNode;
import com.cjq.framework.ActionSupport;
import com.cjq.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:

<?xml version="1.0" encoding="UTF-8"?>
<config>
 <!-- <action path="/regAction" type="test.RegAction">
  <forward name="failed" path="/reg.jsp" redirect="false" />
  <forward name="success" path="/login.jsp" redirect="true" />
 </action> -->
 
 <action path="/menuAction" type="com.LHJ.web.MenuAction">
 </action>
</config>

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>

运行结果如下：
在这里插入图片描述
运用tabs控件：
index.js：

$(function(){
 $('#tt').tree({    
     url:'menuAction.action?methodName=menuTree',
     onClick: function(node){
   //alert(node.attributes.menuURL);  // 在用户点击的时候提示
      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  
    }); 
      }
  }
 }); 
})

运行结果如下：
在这里插入图片描述