Java将数据库数据转换为JSON并显示在EasyUI前端-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60390944/article/details/120334713

作用：主要把后端数据库数据显示到前端中来；而easyui只能去识别josn数据

所以我们要先把数据库的数据先转化成josn数据而后被easyui识别；

一：将字符串或对象转化成josn数据

1、将list对象转化成josn数据

JsonObject obj1=new JsonObject("1", "张三", null);
		JsonObject obj2=new JsonObject("2", "李四", null);
		List<JsonObject> list=new ArrayList<JsonObject>();
		list.add(obj1);
		list.add(obj2);
		ObjectMapper om=new ObjectMapper();
		System.out.println("方式一："+om.writeValueAsString(list));

2、将map集合转化成josn数据

Map< String, Object> map=new HashMap<String, Object>();
		map.put("id", "1");
		map.put("name", "张三");
		map.put("price", null);
		Map< String, Object> map2=new HashMap<String, Object>();
		map2.put("id", "2");
		map2.put("name", "李四");
		map2.put("price", null);
		List<Map<String, Object>> listMap=new ArrayList<>();
		listMap.add(map);
		listMap.add(map2);
        ObjectMapper om=new ObjectMapper();
		System.out.println("方式二："+om.writeValueAsString(listMap));

二：让josn书局有父子层级关系

主界面代码

<%@ 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.xly.dao.Menudao;
import com.xly.entity.Menu;
import com.xly.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.xly.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;
	}

}

运行结果

后端数据库数据就显示到前端页面上了