EasyUI树形表格显示Json数据
程序员文章站
2022-03-26 14:35:30
利用EasyUI的TreeGrid组件格式化显示Json数据,首先读入Json文件,转成Map对象,循环递归每一个Map,判断它的值是基本类型还是Map。如果基本类型,则是属性节点。如果Map,则是对象,需要再遍历。 1.Map解析Tree对象 Tree对象 public class Display ......
利用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数据
图.树形表格