1. 程式人生 > >ztree簡單用法

ztree簡單用法

初始化資料


var settingCatalog = {
//通過ajax進行資料載入
		async: {
			enable: true,
			contentType: "application/json",
			url: "",
			autoParam: ["id","name"],
		},
//格式化資料格式
		data: {
            simpleData: {                
                enable: true,            // 簡單資料模式
                idKey: "id",    
                name:"name",
                pIdKey: "pId",    
                rootPId: null              
            }
        },
//回撥函式雙擊        
        callback:{
        	onDblClick:loadItemList
        }
};
//ztree初始化操作
$.fn.zTree.init($("#departmentTree1"), settingCatalog);

後臺資料格式為json

  List<Map<String,Object>> list = new ArrayList<>();
        Map<String,Object> map = null;
        map = new HashMap<>();
        map.put("id", area.getKeyid());
        map.put("pId", -1);
        map.put("name", area.getName());
        map.put("isParent", true);
        map.put("rootPid", "null");
        list.add(map);
        for(Structure i : structrueList){
        	Map<String,Object>map1 = new HashMap<String, Object>();
        	map1.put("id", i.getKeyid());
        	map1.put("icon", "plugins/zTree_v3/css/zTreeStyle/img/diy/7.png");//修改某個圖示,相對路徑
        	map1.put("iconOpen","url");//展開節點圖片
        	map1.put("iconClose","url");//合上時圖片
        	map1.put("pId", area.getKeyid());
        	map1.put("name", i.getName());
        	map1.put("rootPid", "null");
        	list.add(map1);
        }
   return list;  //這裡框架為封裝json,轉換為json返回給前臺   

回撥函式取節點資料

function loadItemList(event,parentNode,treeNode){
//	 alert(treeNode.id);
//	 回撥函式取節點資料
	 var departmentId = treeNode.id;
	 var deprtmentName = treeNode.name;
	 var matter = {
			 query:{
				 "departmentId":departmentId,
			 }
	 }
//bootstrapTable  進行重新整理操作	 
	 $('#matterLsit').bootstrapTable("refresh",matter);
 }

樹select勾選回寫

//  獲取ztree初始化資料
zTree = $.fn.zTree.init($("#runNameTree"), setting);
// 去id集合
var name = $("id").val();
	if(name != ''){
		var names = JSON.parse(name);
		for(var j=0;j<names.length;j++){
			var node = zTree.getNodeByParam("id",names[j].staffid,null);
			if(node != null){
				//  設定id相等的節點為選中狀態
				zTree.checkNode(node,true);
			}
		}
	}