jQuery zTree动态加载实例
页面jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="${f:url('/static/css/zTreeStyle/zTreeStyle.css')}" type="text/css"/> <link rel="stylesheet" href="${f:url('/static/css/demo.css')}" type="text/css"/> <script type="text/javascript" src="${f:url('/static/js/jquery-1.4.4.min.js')}"></script> <script type="text/javascript" src="${f:url('/static/js/jquery.ztree.core-3.1.js')}"></script> <script type="text/javascript" src="${f:url('/static/js/jquery.ztree.excheck-3.1.js')}"></script> <script type="text/javascript" > var setting = { check: { enable: true, nocheckInherit: true }, async: { enable: true, autoParam: ["id","name"]//异步加载时需要提交的参数，多个用逗号分隔 }, data: { simpleData: { /** 如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId 并且让数据满足父子关系。*/ enable: true, idKey: "id", pIdKey: "pId", rootPId: 0 } }, view:{ showIcon: showIconForTree } }; function showIconForTree(treeId, treeNode) { return !treeNode; }; var zNodes; $(function() { $.ajax({ async : false, cache : false, type : 'POST', dataType : 'json', //contentType: "application/json", url: "${pageContext.request.contextPath}/group/edit/zTree",//获取json格式数据的路径 success : function(data) { //alert(data); zNodes = data;//把后台封装好的简单Json格式赋给treeNodes } }); }); $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script> </head> <body> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul>//放置树结构的容器 </div> </div> </body> </html>
后台action
@Execute(validator = false) public String zTree() { String jsonString; try { String groupId = (String)request.getSession().getAttribute("groupId"); if (StringUtil.isNotEmpty(groupId)) { groupService.selectGroupInfo(groupDto,groupId); } else { groupDto.reset(); } List<GroupDto> groupList = new ArrayList<GroupDto>(); groupList = groupService.selectGroupInfo(); groupDto.setGroupList(groupList); List<FloorInfoDto> floorInfoList = floorInfoService.selectFloorInfo(); List<GroupDetailDto> groupDetailList = groupDetailService.selectGroupDetail(); List<RoomInfoDto> roomInfoList = roomInfoService.selectRoomInfo(); List<Map<String,Object>> items = new ArrayList<Map<String,Object>>(); for(FloorInfoDto node: floorInfoList){//一级节点 Map<String,Object> item = new HashMap<String,Object>(); item.put("id", node.getFloorId()); item.put("name", node.getFloorName()); item.put("isParent", true);//设置是否为父节点 List<Map<String,Object>> subitems = new ArrayList<Map<String,Object>>(); for(RoomInfoDto node1: roomInfoList){//二级节点 Map<String,Object> subitem = new HashMap<String,Object>(); if(node.getFloorId()==node1.getFloorId()){ subitem.put("id", node1.getRoomNo()); subitem.put("name", node1.getRoomName()); subitem.put("isParent", false); for(GroupDetailDto node2: groupDetailList){//这里是本例中用到的判断，主要得到那些节点在树加载出来后被选中 if(node2.getGroupId()==groupDto.getGroupId()){ if(node1.getRoomNo().equals(node2.getRoomNo())){ subitem.put("checked", true);//树加载出来后节点被选中 item.put("checked", true);//树加载出来后节点被选中 item.put("open", true);//树加载出来父节点打开 } } } } if(subitem.size()!=0){//不做这个判断json对象会有空值，树加载不出来 subitem.put("chkDisabled",true);////树加载出来后节点不能对其进行操作 subitems.add(subitem); } } if(subitems.size()!=0){ item.put("children", subitems);//把子节点再到父节点上 item.put("chkDisabled",true); }else{ item.put("chkDisabled",true); } items.add(item); } JSONArray json = JSONArray.fromObject(items); jsonString = json.toString(); response.setCharacterEncoding("UTF-8"); response.getWriter().print(jsonString); //System.out.print(jsonString+"kkkkkkkkkkkkkkkkk"); } catch (SystemException e) { throw e; }catch (Exception e) { throw new SystemException(JcomConstants.LOG_ID_E_0022, e); } return null;//这里要return null 因为前面已经response.getWriter().print(jsonString); }
效果图
