ztree簡單的使用
阿新 • • 發佈：2019-02-18
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">jsp頁面</span>java程式碼<!DOCTYPE HTML> <html> <head><link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree3.5/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree3.5/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree3.5/js/jquery.ztree.all-3.5.js"></script> <script type="text/javascript"> var zNodes = ${tree};//前臺頁面傳來的簡單資料 var setting = { view: { //dblClickExpand: false, expandSpeed: 100 //設定樹展開的動畫速度 }, //獲取json資料 async : { enable : true, url : "${pageContext.request.contextPath}/getTreeUsers.action", // Ajax 獲取資料的 URL 地址 autoParam : [ "id", "name","classType" ], //ajax提交的時候，傳的是id值，<span style="font-family: Arial, Helvetica, sans-serif;">classType：自定義的一個引數，在封裝資料的時候加入的，判斷點選父選單的時候，根據型別傳值</span> }, data:{ // 必須使用data simpleData : { enable : true, idKey : "id", // id編號命名 pIdKey : "pId", // 父id編號命名 rootPId : 0 } }, // 回撥函式 //?????treeId callback : { onClick : function(event, treeId, treeNode, clickFlag) { if(true) { // alert(" 節點id是：" + treeNode.id + ", 節點文字是：" + treeNode.name); } }, //捕獲非同步加載出現異常錯誤的事件回撥函式 和 成功的回撥函式 onAsyncSuccess : function(event, treeId, treeNode, msg){ } } }; // 過濾函式 function filter(treeId, parentNode, childNodes) { if (!childNodes) return null; for ( var i = 0, l = childNodes.length; i < l; i++) { childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); } return childNodes; } $(document).ready(function() { $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script> <style type="text/css"> ul.ztree { margin-top: 0px; border: 1px solid #617775; background: #FFF none repeat scroll 0% 0%; width: 208px; height: 730px; overflow-x: hidden; } </style> </head> <body> <div style="margin: 0;padding: 0;"> <ul id="treeDemo" class="ztree"></ul> </div> </body> </html>
第一次開啟頁面的時候，獲取${tree}
每次點選的開啟時候非同步載入的java程式碼public String getUserGroup() throws IOException { DbsUser user = (DbsUser) session.get("dbsUser"); UserGroupService uservice = new UserGroupServiceImpl(); UnderUsersService uService = new UnderUsersImpl(); dbsUsergroups = uservice.findByUser(user);// 我的下屬使用者組 List<Map<String, Object>> pMaps = new ArrayList<Map<String, Object>>(); List<Map<String, Object>> maps = new ArrayList<Map<String, Object>>(); Map<String, Object> map = new HashMap<String, Object>(); map.put("id", 0); map.put("name", "西安鐵路局"); map.put("isParent", true); map.put("open", true); map.put("iconOpen", "js/ztree3.5/css/zTreeStyle/img/diy/1_open.png"); map.put("iconClose", "js/ztree3.5/css/zTreeStyle/img/diy/1_close.png"); for (DbsUsergroup g : dbsUsergroups) { Map<String, Object> map1 = new HashMap<String, Object>(); map1.put("id", g.getDbsGroup().getId()); // map1.put("pid", 1); map1.put("name", g.getDbsGroup().getGroupName()); map1.put("isParent", true); map1.put("classType", "group"); maps.add(map1); } map.put("children", maps); pMaps.add(map); JSONArray json = JSONArray.fromObject(pMaps); System.out.println(json.toString()); tree = json.toString();//此處獲取tree return SUCCESS; }
public void getTreeUsers() throws IOException { DbsUserService userService = new DbsUserServiceImpl(); DbsGroupDAO groupDao = new DbsGroupDAO(); UnderUsersService uService = new UnderUsersImpl(); List<Map<String, Object>> userMaps = new ArrayList<Map<String, Object>>(); //二級選單，根據使用者組檢視使用者 if ("group".equals(classType)) { DbsGroup g = groupDao.findById(id); DbsUser user = (DbsUser) session.get("dbsUser"); dbsUnderusers = uService.findByUser(user);// 我的下屬使用者 for (DbsUnderusers under : dbsUnderusers) { DbsUser u = under.getDbsUnderUser(); Set<DbsGroupofuser> gou = u.getDbsGroupofusers(); Iterator it = gou.iterator(); while (it.hasNext()) { DbsGroupofuser gos = (DbsGroupofuser) it.next(); DbsGroup group = gos.getDbsGroup(); if (g.getId().equals(group.getId())) { Map<String, Object> userMap = new HashMap<String, Object>(); userMap.put("id", u.getId()); userMap.put("name", u.getRealName()); userMap.put("url", "querySendMission.action?page=1&id=" + u.getId()); userMap.put("target", "save"); userMap.put("classType", "user");//此處封裝自定義型別，是為groupId 還是使用者id List<DbsUnderusers> unders = uService.findByUser(u); if (unders.size() > 0) { userMap.put("isParent", true); } else { userMap.put("isParent", false); } // userMap.put("icon", "js/ztree3.5/css/zTreeStyle/img/diy/2.png"); userMaps.add(userMap); } } } //三級以後選單，根據使用者id檢視下屬使用者 } else { DbsUser u = userService.findById(id); dbsUnderusers = uService.findByUser(u);// 我的下屬使用者 for (DbsUnderusers under : dbsUnderusers) { DbsUser underUser = under.getDbsUnderUser(); Map<String, Object> userMap = new HashMap<String, Object>(); userMap.put("id", underUser.getId()); userMap.put("name", underUser.getRealName()); userMap.put("url", "querySendMission.action?page=1&id=" + underUser.getId()); userMap.put("target", "save"); userMap.put("classType", "user"); List<DbsUnderusers> unders = uService.findByUser(underUser); if (unders.size() > 0) { userMap.put("isParent", true); } else { userMap.put("isParent", false); } // userMap.put("icon", "js/ztree3.5/css/zTreeStyle/img/diy/2.png"); userMaps.add(userMap); } } JSONArray json = JSONArray.fromObject(userMaps); System.out.println(json.toString()); tree = json.toString(); response.getWriter().print(tree); }