EasyUI树形表格显示Json数据

    利用EasyUI的TreeGrid组件格式化显示Json数据,首先读入Json文件,转成Map对象,循环递归每一个Map,判断它的值是基本类型还是Map。如果基本类型,则是属性节点。如果Map,则是对象,需要再遍历。

1.Map解析Tree对象

     Tree对象

public class DisplayFieldTest {
	
   private Integer id; // 字段键值
   private String name; // 字段代码名称 
   private String expectValue; // 值 
   private Integer _parentId;//父级节点ID
   private String  state;//状态  默认为open 可closed
   private String  iconCls;//图标
   private String  checked;//是否选中 
    //省略 set  get
}

 工具方法

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonParseException;
import com.fasterxml.jackson.databind.JsonMappingException;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * Json对象转成树形结构对象的工具类 
 */
public class JsonConverTreeTest { 
	
	/**
	 * 解析Map格式的json,返回集合
	 * 
	 * @param mapObj   对象节点
	 * @param name   本级节点
	 * @param fatherMap   父级名称与ID
	 * @param displays   树集合
	 * @param type 处理类型  1 是正常树 2以某个分对象作为树
	 * @return
	 */
	public List<DisplayFieldTest> parse(Object mapObj, String name,Map<String, Integer> fatherMap, List<DisplayFieldTest> displays,String type) {
		 if (mapObj instanceof Map) {
			Map map = (Map) mapObj;
			for (Object key : map.keySet()) {
				//属性节点
				if (!(map.get(key) instanceof Map)) { 
					Integer fatherId = (Integer) fatherMap.get(name);
					if (fatherId == null) {
						if(!"".equals(name)){ 
						   fatherId = displays.size();// 目前个数值作为ID,以0开始
						   fatherMap.put(name, fatherId); 
						} 
					}
					DisplayFieldTest disField = new DisplayFieldTest();
					disField.set_parentId(fatherId);
					disField.setId(displays.size() + 1);
					disField.setName((String) key);   
				    disField.setExpectValue(map.get(key).toString()); 
					displays.add(disField); 
				} else {//对象节点
					Integer fatherId = (Integer) fatherMap.get(name);
					if (fatherId == null) {
						if (!"".equals(name)) {
							fatherId = displays.size();// 目前个数值作为ID,以0开始
							fatherMap.put(name, fatherId);
						}

					}
					DisplayFieldTest disField = new DisplayFieldTest();
					disField.set_parentId(fatherId);
					disField.setId(displays.size() + 1);
					disField.setState("closed");
					disField.setName((String) key);
					displays.add(disField);
					parse(map.get(key), name + "." + (String) key, fatherMap,
							displays,"");
				}
			}
		}
		return displays;
	}

	public static void main(String[] args) throws JsonParseException,
			JsonMappingException, IOException {
		ObjectMapper objMapper = new ObjectMapper();
		Map<String, Integer> mapFatherMap = new HashMap<String, Integer>();
		List<DisplayFieldTest> fields = new ArrayList<DisplayFieldTest>();
		String strText = "d:/hardware.json";
		Map map = objMapper.readValue(new File(strText), Map.class);
		JsonConverTreeTest conv = new JsonConverTreeTest();
		List<DisplayFieldTest> DisplayFieldTests = conv.parse(map, "", mapFatherMap,
				fields,"1");
		System.out.println("fields :" + DisplayFieldTests.toString());
	}

}

2.视图层请求与EasyUI显示

   Controller调用

@ResponseBody
@RequestMapping("getLogTree.do")
public  Map<String, Object> getTreeById() throws Exception{ 
		Map<String, Object> treeMap = new HashMap<String, Object>(); 
		ObjectMapper objMapper = new ObjectMapper();
		Map<String, Integer> mapFatherMap = new HashMap<String, Integer>();
		List<DisplayFieldTest> fields = new ArrayList<DisplayFieldTest>();
		String strText = "d:/hardware.json";
		Map map = objMapper.readValue(new File(strText), Map.class);
		JsonConverTreeTest conv = new JsonConverTreeTest();
		List<DisplayFieldTest> displayFields = conv.parse(map, "", mapFatherMap,
				fields,"1");  
	    treeMap.put("total", displayFields.size() + "");
	    treeMap.put("rows", displayFields); 
		return treeMap; 
	} 

 EasyUI的TreeGrid组件加载后台数据

function viewWindowTree() {
	$("#viewCycleTree").dialog({
		buttons : [ {
			text : '关闭',
			iconCls : 'icon-cancel',
			handler : function() {
				$('#viewCycleTree').window('close');
			}
		} ]
	});
	$("#viewCycleTree").dialog("open").dialog('setTitle', '查看');
	$('#treetb').treegrid({
		width : 850,
		height : 400,
		url : getRootPath() + "/choose/getLogTree.do",
		method : 'post', // 请求方式
		idField : 'id', // 定义标识树节点的键名字段
		treeField : 'name', // 定义树节点的字段
		fit : true, // 网格自动撑满
		rownumbers : true,// 行号
		fitColumns : true, // 自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动
		columns : [ [{
			field : 'name',
			title : '名称',
			width : 150
		}, {
			field : 'expectValue',
			title : '内容',
			width : 550,
			align : 'center'
		} ] ]
	}); 
}

 2.效果图

                                

                                                  图.json数据

                           

                                                 图.树形表格

posted @ 2020-03-22 11:44  彩虹消失了  阅读(1198)  评论(0编辑  收藏  举报