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資料

                                                 圖.樹形表格

標籤：JavaScript

上一篇：JS--排序演算法之計數和基數排序

下一篇：創建 VuePress + GithubPages + TravisCI 在線檔案