easyui (entry)

Goals:
1, by layout layout
2, by loading menu tree
3, through the menu to open a different tab page

ui frame:
easyui jQuery + = HTML4 (used for background management interface) 
on Bootstrap + = jQuery HTML5 
layui

 

Guide package:

Import tools required:

 

Download the library and import EasyUI CSS and Javascript files to your page.

Must be in strict accordance with the order

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

 

Once you import EasyUI necessary documents, you can define a EasyUI components by marking or Javascript. For example: the definition of a panel with foldable function, you need to write HTML code as follows:

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

 

Entity classes:

TreeNode.java

 It is converted by the action of TreeNode class 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

com.huang.dao Package; 

Import java.sql.SQLException; 
Import of java.util.ArrayList; 
Import the java.util.HashMap; 
Import java.util.List; 
Import a 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 the extends JsonBaseDao { 

    / ** 
     * returns to the front tree_data1_json character set 
     * set of parameters from the front desk jsp passed over 
     * @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 ':' Student Management '} 
     *
     * {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);
         
// add a child node to a parent node among the established parent-child relationships between data 
        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 (respectively, 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'   
    });
})