前言：在上一篇文章中我们通过EasyUI框架的树(tree)、选项卡(tabs)两个组件；做出页面中通过点击菜单，显示菜单对应的页面，但是数据来源并非是活数据，而是写死在JSON文件中的数据，在项目开发中数据都是来源于数据库所有写死在JSON文件中就存在着一定的弊端。现在我们通过读取数据库中的数据来实现前端效果。

EasyUI需求的JSON数据格式

1.实体类对象转换JSON对象

首先将数据库读取出来的数据转换成JSON数据。引入jar包

1.1创建实体类

package com.wyy.entity;public class menu {private String serialNo;//序列号private String  menuid; //节点idprivate String menuname;//节点名字private String menuURL;//当前节点对应的页面路径private  String parentid;//父节点IDpublic String getSerialNo() {return serialNo;}public void setSerialNo(String serialNo) {this.serialNo = serialNo;}public String getMenuid() {return menuid;}public void setMenuid(String menuid) {this.menuid = menuid;}public String getMenuname() {return menuname;}public void setMenuname(String menuname) {this.menuname = menuname;}public String getMenuURL() {return menuURL;}public void setMenuURL(String menuURL) {this.menuURL = menuURL;}public String getParentid() {return parentid;}public void setParentid(String parentid) {this.parentid = parentid;}public menu(String serialNo, String menuid, String menuname, String menuURL, String parentid) {super();this.serialNo = serialNo;this.menuid = menuid;this.menuname = menuname;this.menuURL = menuURL;this.parentid = parentid;}public menu() {// TODO Auto-generated constructor stub}@Overridepublic String toString() {return "menu [serialNo=" + serialNo + ", menuid=" + menuid + ", menuname=" + menuname + ", menuURL="+ menuURL + ", parentid=" + parentid + "]";}}

1.2读取数据将数据转换成json

public static void main(String[] args) throws Exception {menudao d=new menudao();//读取数据库所有数据List<menu> list = d.list(null, null);//将读取出来的数据转换成JSON数据ObjectMapper  o=new ObjectMapper();String ss = o.writeValueAsString(list);//输出System.out.println(ss);}

成功读取所有数据

[{"serialNo":"059CB9B033C247A1AD4B3F0E78C0ED55","menuid":"004003003","menuname":"用户权限管理","menuURL":"jsp/userManage.jsp","parentid":"004003"},{"serialNo":"0AAADCF1F3884271A5C42EE845F47317","menuid":"003001002","menuname":"升学学费","menuURL":"jsp/finance/higherGrade","parentid":"003001"}

在后台输出的json对象中

json对象没有体现出父子层级关系，数据是平级关系
json串属性并不是easyui要求的属性

2创建符合EasyUI树形组件的属性对象

2.1参考EasyUI的API 建立符合EasyUI树形组件需求的属性对象

package com.wyy.entity;import java.util.ArrayList;
import java.util.List;
import java.util.Map;public class TreeVo<T> {/*** 节点ID*/private String id;/*** 显示节点文本*/private String text;/*** 节点状态，open closed*/private Map<String, Object> state;/***  节点是否被选中 true false*/private boolean checked = false;/*** 节点属性*/private Map<String, Object> attributes;/***  节点的子节点*/private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();/*** 父ID*/private String parentId;/*** 是否有父节点*/private boolean hasParent = false;/*** 是否有子节点*/private boolean hasChildren = false;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> getState() {return state;}public void setState(Map<String, Object> state) {this.state = state;}public boolean isChecked() {return checked;}public void setChecked(boolean checked) {this.checked = checked;}public Map<String, Object> getAttributes() {return attributes;}public void setAttributes(Map<String, Object> attributes) {this.attributes = attributes;}public List<TreeVo<T>> getChildren() {return children;}public void setChildren(List<TreeVo<T>> children) {this.children = children;}public boolean isHasParent() {return hasParent;}public void setHasParent(boolean isParent) {this.hasParent = isParent;}public boolean isHasChildren() {return hasChildren;}public void setChildren(boolean isChildren) {this.hasChildren = isChildren;}public String getParentId() {return parentId;}public void setParentId(String parentId) {this.parentId = parentId;}public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {super();this.id = id;this.text = text;this.state = state;this.checked = checked;this.attributes = attributes;this.children = children;this.hasParent = isParent;this.hasChildren = isChildren;this.parentId = parentID;}public TreeVo() {super();}}

2.2将读取出来的对象属性变成符合easyui属性需求的对象属性

   /*** 获取所有数据* @param m* @param p* @return* @throws Exception*/public List<TreeVo<menu>> tree(menu m,PageBean p) throws Exception{//获取所有数据List<menu> list = this.list(m, p);//List<menu>  --->>  List<Tree<menu>>List<TreeVo<menu>> tv=new ArrayList<TreeVo<menu>>();for (menu me : list) {//实例化对象TreeVo<menu>，将值赋值给TreeVo<menu> treevo=new TreeVo<menu>();treevo.setId(me.getMenuid());treevo.setText(me.getMenuname());treevo.setParentId(me.getParentid());Map<String, Object> map=new HashMap<>();map.put("s", me);treevo.setAttributes(map);tv.add(treevo);}return tv;}public static void main(String[] args) throws Exception {menudao d=new menudao();//读取数据库所有数据List<TreeVo<menu>> list = d.tree(null, null);//将读取出来的数据转换成JSON数据ObjectMapper  o=new ObjectMapper();String ss = o.writeValueAsString(list);System.out.println(ss);}

[{"id":"004003003","text":"用户权限管理","state":null,"checked":false,"attributes":{"s":{"serialNo":"059CB9B033C247A1AD4B3F0E78C0ED55","menuid":"004003003","menuname":"用户权限管理","menuURL":"jsp/userManage.jsp","parentid":"004003"}},"children":[],"parentId":"004003","hasParent":false,"hasChildren":false},{"id":"003001002","text":"升学学费","state":null,"checked":false,"attributes":{"s":{"serialNo":"0AAADCF1F3884271A5C42EE845F47317","menuid":"003001002","menuname":"升学学费","menuURL":"jsp/finance/higherGrade","parentid":"003001"}},"children":[],"parentId":"003001","hasParent":false,"hasChildren":false},{"id":"003003","text":"住宿费","state":null,"checked":false,"attributes":{"s":费","menuURL":null,"parentid":"003"}},"children":

对比两次输出结果可以看到属性名已经更改成了EasyUI树（tree）规范的属性；但是数据中依旧没有父子层级关系

2.3让List<Tree<menu>> 中的数据有父子层级关系

遍历List<Tree<menu>>集合，建立顶级节点，当外层循环节点id等于内层循环的父id，那么

就意味着内层循环中当前循环的节点是外层循环节点的子节点，就可以把内层循环的节点放到

外层循环节点的children属性中。

package com.zking.util;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import com.wyy.entity.TreeVo;public class BuildTree {/*** 默认-1为顶级节点* @param nodes* @param <T> easyui* @return*/public static <T> TreeVo<T> build(List<TreeVo<T>> nodes) {if (nodes == null) {return null;}List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();for (TreeVo<T> children : nodes) {//遍历平级数组String pid = children.getParentId();//获取当前父节点idif (pid == null || "-1".equals(pid)) {topNodes.add(children);continue;}for (TreeVo<T> parent : nodes) {String id = parent.getId();//子节点idif (id != null && id.equals(pid)) {//子节点ID等于父idparent.getChildren().add(children);children.setHasParent(true);parent.setChildren(true);continue;}}}TreeVo<T> root = new TreeVo<T>();if (topNodes.size() == 1) {root = topNodes.get(0);} else {root.setId("000");root.setParentId("-1");root.setHasParent(false);root.setChildren(true);root.setChecked(true);root.setChildren(topNodes);root.setText("顶级节点");Map<String, Object> state = new HashMap<>(16);state.put("opened", true);root.setState(state);}return root;}/*** 指定idparam为顶级节点* @param nodes* @param idParam* @param <T>* @return*/public static <T> List<TreeVo<T>> buildList(List<TreeVo<T>> nodes, String idParam) {if (nodes == null) {return null;}List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();for (TreeVo<T> children : nodes) {String pid = children.getParentId();if (pid == null || idParam.equals(pid)) {topNodes.add(children);continue;}for (TreeVo<T> parent : nodes) {String id = parent.getId();if (id != null && id.equals(pid)) {parent.getChildren().add(children);children.setHasParent(true);parent.setChildren(true);continue;}}}return topNodes;}}

输出、JSON转换封装类

package com.wyy.util;import java.io.PrintWriter;import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.databind.ObjectMapper;public class ResponseUtil {public static void write(HttpServletResponse response,Object o)throws Exception{response.setContentType("text/html;charset=utf-8");PrintWriter out=response.getWriter();out.println(o.toString());out.flush();out.close();}public static void writeJSON(HttpServletResponse response,Object o)throws Exception{ObjectMapper om=new ObjectMapper();write(response, om.writeValueAsString(o));}
}

调用对应方法处理结果数据，ajax请求没有返回值，输出即可

public String tree(HttpServletRequest req, HttpServletResponse resp) throws Exception {//获取EasyUI可以识别的对象集合List<TreeVo<menu>> tree = d.tree(null, null);//层级关系处理List<TreeVo<menu>> buildList = BuildTree.buildList(tree, "-1");//输出ResponseUtil.writeJSON(resp, buildList);return null;}

在界面定义隐藏的绝对路径

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css"href="easyUI/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"href="easyUI/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript"src="easyUI/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"src="easyUI/jquery-easyui-1.5.1/jquery.easyui.min.js"></script><!-- js文件 -->
<script type="text/javascript" src="easyUI/js/index.js"></script>
<body class="easyui-layout"><!-- 定义绝对路径 --><input type="hidden" value="${pageContext.request.contextPath}" id="hh"><div data-options="region:'north',title:'北部 ',split:true"style="height: 100px;"></div><div data-options="region:'south',title:'南部 ',split:true"style="height: 100px;"></div><div data-options="region:'east',title:'东部',split:false"style="width: 100px;"></div><div data-options="region:'west',title:'西部',split:true"style="width: 100px;"><ul id="stu"></ul></div><div data-options="region:'center',title:'中部'"style="padding: 5px; background: # eee;"><div id="tt" class="easyui-tabs" style="width: 100%; height: 100%"></div></div></body>
</html>

js文件中，更改数据源

$(function() {$('#stu').tree({url: $("#hh").val()+'/menu.action?methodName=tree',onClick: function(nodd) {var exists = $('#tt').tabs('exists', nodd.text);if (exists) {$('#tt').tabs('select', nodd.text);} else {$('#tt').tabs('add', {title: nodd.text,content: '<iframe src="' + nodd.attributes.url + '" style="width: 100%; height: 100%"></iframe>',closable: true,tools: [{iconCls: 'icon-mini-refresh',handler: function() {alert('refresh');}}]});}}});})

数据库数据源

最终效果

EasyUI树形菜单后端相关推荐

雷林鹏分享：jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
easyui树形菜单实现
需求:读取路径配置中的相对路径获取对应的子文件夹及其子文件并形成树形结构,加载xml文件,输入搜索关键字匹配xml里面的value节点的值对应的contact值的集合并进行搜索例如:输入b,找到xm ...
easyui树形菜单生成算法，及在关系型数据库中的存储方式（非递归，高效算法）
存储结构: 生成树算法: var zNodes = [];// jinja模板从后台取回每一级菜单的 list { % for node in result % }var obj = new Ob ...
MVC +easyui +json 前后端交互动态生成树形菜单
效果图: 1.view端代码实现,引入jquery.easyui 的js文件,创建树形菜单标签<ul>,如下所示: @{ViewBag.Title = "Home Page&qu ...
jQuery EasyUI使用教程之使用标记创建树形菜单
2019独角兽企业重金招聘Python工程师标准>>> jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建.easyui树形菜单也可以定义在 ...
easyUI前端框架的tree（树）前台展示（树形菜单二）——java
转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自不怕报错就怕不报错的小猿猿的博客 easyUI前端框架的t ...
php会计科目,ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
假设数据库中会计科目数据表的字段为:id,code,name,islast.分别为自增主键,科目编码,科目名称,是否为末级("1"表示末级科目). 这里在Thinkphp的模型层中 ...
zTree树形菜单交互选项卡效果实现
1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html><head><meta char ...
zTree树形菜单使用实例
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号第一步:在页面显示菜单位置,添加 ul设置 class="ztree" 第二步:开启简单数据格式 ...

EasyUI树形菜单后端

1.实体类对象转换JSON对象

2创建符合EasyUI树形组件的属性对象

EasyUI树形菜单后端相关推荐

最新文章

热门文章