ztree簡單用法
阿新 • • 發佈:2018-11-13
初始化資料
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);
}
}
}