EasyUI树形表格显示Json数据 _JavaScript

利用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.效果图