前言
主要是讲数据库的数据后端数据显示到前端中来
之前我们讲了在easyui中怎么使用tree和tabs两个控件
今天我们就来讲如何把后端数据显示到前端
思路：
一：
首先我们要知道easyui中的tree控件，只能识别josn数据文件所以首先我们要将数据库得到的数据转化为josn
1.将字符串或对象转化为josn文件
二：转化为josn文件后接着我们发现ezsyui提供的josn文件中是有父子级关系的
例：
高三
221班
222班
高二
220班
219班
班就是年级的子级关系
2.我们要将文件通过一些方法让他有父子级关系
具体实现
1.将字符串或对象转化为josn文件
①、实体类对象换成Json串->Json数组->方式一
JsonObject1 obj1=new JsonObject1("14", "about.html", null);
JsonObject1 obj2=new JsonObject1("15", "welcome.html", null);
List<JsonObject1> list=new ArrayList<JsonObject1>();
list.add(obj1);
list.add(obj2);
ObjectMapper om=new ObjectMapper();
System.out.println("第一种："+om.writeValueAsString(list));
②、Map集合换成Json串->Json数组->方式二
Map< String, Object> map=new HashMap<String, Object>();
map.put("id", "14");
map.put("text", "about.html");
map.put("state", null);
Map< String, Object> map2=new HashMap<String, Object>();
map2.put("id", "15");
map2.put("text", "welcome.html");
map2.put("state", null);
List<Map<String, Object>> listMap=new ArrayList<>();
listMap.add(map);
listMap.add(map2);
System.out.println("第二种："+om.writeValueAsString(listMap));
个人建议第一种将对象转化为josn不易出错
二：让数据具有父子级关系
具体代码
主界面html代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台界面</title>
<link rel="stylesheet" type="text/css"
href="static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript"
src="static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"
src="static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/js/index.js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
<div id="cc" class="easyui-layout" style="width: 100%; height: 1000px;">
<div data-options="region:'north',title:'North Title',split:true"
style="height: 100px;"></div>
<div data-options="region:'south',title:'South Title',split:true"
style="height: 100px;"></div>
<div data-options="region:'west',title:'West',split:true"
style="width: 300px;">
<ul id="tt" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center',title:'center title'"
style="padding: 5px; background: #eee;">
<div id="ttt" class="easyui-tabs"
style="width: 100%; height: 100%;">
</div>
</div>
</div>
</body>
</html>
js界面
$(function() {
$('#tt').tree({
url:$("#ctx").val()+"/menu.action?methodName=tree",
onClick : function(node) {
var exists = $('#ttt').tabs('exists', node.text);
if (exists) {
$('#ttt').tabs('select', node.text);
} else {
$('#ttt')
.tabs(
'add',
{
title : node.text,
content : '<iframe width=100% height=100% src='
+ node.attributes.self.menuURL
+ '><iframe>',
closable : true,
tools : [ {
iconCls : 'icon-mini-refresh',
handler : function() {
alert('refresh');
}
} ]
});
}
}
});
})
mvc配置文件
<action path="/menu" type="com.zking.util.Menuaction">
</action>
这里是子控制器
package com.zking.util;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.mjx.dao.Menudao;
import com.mjx.entity.Menu;
import com.mjx.entity.TreeVo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
public class Menuaction extends ActionSupport implements ModelDriver<Menu> {
private Menu m = new Menu();
private Menudao mdao = new Menudao();
@Override
public Menu getModel() {
// TODO Auto-generated method stub
return m;
}
public String tree(HttpServletRequest req, HttpServletResponse resp) throws Exception {
///这个list是我自己写的dao包方法获取数据库的数据并转化为了具有父子级关系的数据
List<TreeVo<Menu>> tree = mdao.tree(null, null);
这里是把数据转化为josn数据方法被我封装后面给你们看
ResponseUtil.writem(resp, tree);
return null;
}
}
ResponseUtil类
package com.zking.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 writem(HttpServletResponse response,Object o)throws Exception{
ObjectMapper om=new ObjectMapper();
write(response, om.writeValueAsString(o));
}
}
将数据转化为具有父子级关系的类
package com.zking.util;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.mjx.entity.TreeVo;
public class BuildTree {
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();
if (pid == null || "-1".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;
}
}
}
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;
}
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;
}
}
结果：
左边数据就变成了数据库的数据
1773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
