easyui（入门）

Posted 2022-02-23 bf6rc9qu

目标：
1、通过layout布局
2、通过tree加载菜单
3、通过菜单去打开不同的tab页

ui框架：
easyui=jquery+html4（用来做后台的管理界面） 
bootstrap=jquery+html5 
layui

 

导包：

导入需要的工具类：

 

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

一定要严格按照顺序

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">   
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 

 

一旦你导入了EasyUI必须的文件，你就可以通过标记或Javascript定义一个EasyUI组件。例如：定义一个带可折叠功能的面板，你需要写的HTML代码如下：

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

 

实体类：

TreeNode.java

 作用是通过TreeNode类转换成 tree_data1.json
 

package com.huang.entity;

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 Map<String, Object> attributes = new HashMap<>();
    private List<TreeNode> children = new ArrayList<>();

    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 Map<String, Object> getAttributes() 
        return attributes;
    

    public void setAttributes(Map<String, Object> attributes) 
        this.attributes = attributes;
    

    public List<TreeNode> getChildren() 
        return children;
    

    public void setChildren(List<TreeNode> children) 
        this.children = children;
    

    public TreeNode(String id, String text, Map<String, Object> attributes, List<TreeNode> children) 
        super();
        this.id = id;
        this.text = text;
        this.attributes = attributes;
        this.children = children;
    

    public TreeNode() 
        super();
    

    @Override
    public String toString() 
        return "TreeNode [id=" + id + ", text=" + text + ", attributes=" + attributes + ", children=" + children + "]";
    

 

tree_data1.json

[
    "id":1,
    "text":"菜单管理",
    "children":[
        "id":11,
        "text":"财务",
        "state":"closed",
        "children":[
            "id":111,
            "text":"联系我们"
        ,
            "id":112,
            "text":"Wife"
        ,
            "id":113,
            "text":"Company"
        ]
    ,
        "id":12,
        "text":"后勤 ",
        "children":[
            "id":121,
            "text":"Intel"
        ,
            "id":122,
            "text":"Java",
            "attributes":
                "p1":"Custom Attribute1",
                "p2":"Custom Attribute2"
            
        ,
            "id":123,
            "text":" 费用缴纳"
        ,
            "id":124,
            "text":"Games",
            "checked":true
        ]
    ,
        "id":13,
        "text":"index.html"
    ,
        "id":14,
        "text":"about.html"
    ,
        "id":15,
        "text":"welcome.html"
    ]
]

MenuDao.java

package com.huang.dao;

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

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

public class MenuDao extends JsonBaseDao

    /**
     * 给前台返回tree_data1_json的字符集
     * 从前台jsp传递过来的参数集合
     * @param paMap
     * @param pageBean
     * @return
     * @throws SQLException 
     * @throws IllegalAccessException 
     * @throws InstantiationException 
     */
    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 null;
        
    
    /**
     * [‘Menuid‘:001,‘Menuname‘:‘学生管理‘,‘Menuid‘:001,‘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("Menuid")+"");
        
        treeNode.setAttributes(map);
        
//        将子节点添加到父节点当中，建立数据之间的父子关系
        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‘:001,‘Menuname‘:‘后勤管理‘]
     * @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);
        
    

MenuAction.java

package com.huang.web;

import java.util.List;

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

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

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;
    

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

index.js

$(function()
    $(‘#tt‘).tree(    
        url:‘/menuAction.action?methodName=menuTree‘   
    );
)