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数据
图.树形表格