多级ztree

最新推荐文章于 2024-04-26 15:21:07 发布

zxpo3838438

最新推荐文章于 2024-04-26 15:21:07 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签：异步 json ztree

本文链接：https://blog.youkuaiyun.com/zxpo3838438/article/details/44081497

本文提供了一个关于Ztree的多级示例代码，包括初始化、异步加载及参数传递等关键步骤，帮助开发者理解和实现复杂层级的树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的写了个多级的ztree的demo,由于没怎么接触过，所以凑合吧，下面是大概的代码：

<SCRIPT type="text/javascript">
  var zTree;
 
  var setting = {
   async: {
    enable: true,//启用异步加载
    url:"demo.do?asy", //异步请求地址
    autoParam:["id","pId","name"] //需要传递的参数,为你在ztree中定义的参数名称
   },
   view: {
    dblClickExpand: false,
    showLine: true,
    selectedMulti: false,
    expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
   },
   data: {
	   isSimpleData: true,
       treeNodeKey: "id",         //设置节点唯一标识属性名称
       treeNodeParentKey: "pId",  //设置节点的父节点唯一标识属性名称
       nameCol: "name"
   }
  };
 
  function onAsyncSuccess(event, treeId, treeNode, msg) {
   cancelHalf(treeNode);
  }
  function cancelHalf(treeNode) {
   var zTree = $.fn.zTree.getZTreeObj("ztree");
   treeNode.halfCheck = false;
   zTree.updateNode(treeNode);   //异步加载成功后刷新树节点
  }

  function showTree(){
   $(document).ready(function(){
	   var lever_one = encodeURI(encodeURI($("#lever_one").val()));
	   var lever_two = encodeURI(encodeURI($("#lever_two").val()));
	   var lever_three = encodeURI(encodeURI($("#lever_three").val()));
	   var lever_four = encodeURI(encodeURI($("#lever_four").val()));
	  	var  url="demo.do?async";  	
	   url+="&lever_one="+lever_one;
	   url+="&lever_two="+lever_two;
	   url+="&lever_three="+lever_three;
	   url+="&lever_four="+lever_four;
    //以下为第一次要加载的一级节点
    $.post(url,function(result){
        var result_1 = eval('('+result+')');
        $.fn.zTree.init($("#treeDemo"), setting, result_1);
         
    });
     });
  }
 
	</SCRIPT>

</HEAD>

<BODY>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
     			<div class="datas">
					<table style="margin-top: 10px;" cellpadding="0" cellspacing="0" class="table w100">
						<tr>
							<td class="tdright">一级：</td>
           					<td class="tdleft">
           						<select name="lever_one" id="lever_one" class="select">
									<option value="">...</option>
									<c:forEach items="${areaList}" var="area">
										<option value="${area.areaName }" >${area.areaName }</option>
									</c:forEach>
								</select>
           					</td>
						</tr>
						<tr>
							<td class="tdright">二级：</td>
           					<td class="tdleft">
           						<input type="text" maxlength="50" id="lever_two" name="lever_two" value="${lever_two}" size="25" class="input" />
           					</td>
						</tr>
						<tr>
							<td class="tdright">三级：</td>
           					<td class="tdleft">
           						<input type="text" maxlength="50" id="lever_three" name="lever_three" value="${lever_three}" size="25" class="input" />
           					</td>
						</tr>
						<tr>
							<td class="tdright">四级：</td>
           					<td class="tdleft">
           						<input type="text" maxlength="50" id="lever_four" name="lever_four" value="${lever_four}" size="25" class="input" />
           					</td>
						</tr>
						<tr>	
							<td></td>
           					<td class="tdcenter">
           						<span class="tdright">
           							<input type="submit" name="button" id="button" value="查询" class="btn" onclick="showTree()"/>
       							</span>
       						</td>
						</tr>
					</table>     
				</div>    
			
	</div>
	<div class="zTreeDemoBackground right">
		<ul id="treeDemo" class="ztree"></ul>
	</div>

	@RequestMapping(params = "async")
	public void async(HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		String treeStr = "";
		String area = request.getParameter("lever_one");
		// 将查询条件放入缓存
		two = URLDecoder.decode(request.getParameter("lever_two"),
				"utf-8");
		four = URLDecoder
				.decode(request.getParameter("lever_four"), "utf-8");
		three = URLDecoder.decode(request.getParameter("lever_three"), "utf-8");

		// 树节点第一层区域 ztree显示格式json{id:第几层,pId:标识,name:显示内容}
		List treeList = new ArrayList();
		List<Area> areaList = demoService.getAll(URLDecoder.decode(area,
				"utf-8"));
		if (null != areaList && areaList.size() > 0) {
			for (int i = 0; i < areaList.size(); i++) {
				treeList.add("{id:0,pId:" + areaList.get(i).getId() + ",name:'"
						+ areaList.get(i).getAreaName()
						+ "',icon:'images/icons/chart_16.png',isParent:true}");
			}
		}
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println(treeList);
	}

	@RequestMapping(params = "asy")
	public void asy(HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		String name = request.getParameter("name");
		String id = request.getParameter("id");
		String pId = request.getParameter("pId");
		List treeList = new ArrayList();
		//当不填时强制设为空减少判断
		if( null==four || four.equals("") ){
			four=null;
		}else{
			four=four.toLowerCase();
		}
		if( null==three || three.equals("") ){
			three=null;
		}
		if( null==two || two.equals("") ){
		// 判断局端ip和mac地址是否为空，以获取上一级展示的光节点内容，免得展示的太多
			two = demoService.getOpticalId(four, three);
		}
		if (null != id) {
			// 判断ztree是第几层，0为区域1为光节点2为局端3为用户4为用户的设备
			if (id.equals("0")) {
				List<OpticalNode> opticalList = demoService.getbyArea(pId);
				if (null != opticalList && opticalList.size() > 0) {
					for (int i = 0; i < opticalList.size(); i++) {
						OpticalNode node = opticalList.get(i);
						// 过滤光节点，如果用户未输入则显示全部
						if (null == two 
								|| node.getOpticalId().equals(two))
							treeList
									.add("{id:1,pId:"
											+ node.getId()
											+ ",name:'二级"
											+ node.hashCode()
											+ "',icon:'images/icons/optical.png',isParent:true}");
					}
				}
			} else if (id.equals("1")) {
				List<HsOptical> hsList = demoService
						.getHsOpticalById(demoService.getOpticalNode(pId)
								.getOpticalId());
				if (null != hsList && hsList.size() > 0) {
					for (int i = 0; i < hsList.size(); i++) {
						HsOptical hs = hsList.get(i);
						// 过滤查询条件局端的ip和mac,如果为空则查询全部
						if ((null == three && null == four)
								|| (hs.getHsIpaddress().equals(three)
								|| hs.getHsMAc().equals(four))) {
							treeList
									.add("{id:2,pId:"
											+ hs.getId()
											+ ",name:'三级"
											+ hs.hashCode()
											+ "',icon:'images/icons/hs.png',isParent:true}");
						}
					}
				}
			} else if (id.equals("2")) {
				List<HsHmd> hmdList = demoService.getExpfileByHsMac(demoService
						.getHsOptical(pId).getHsMAc());
				if (null != hmdList && hmdList.size() > 0) {
					for (int i = 0; i < hmdList.size(); i++) {
						List<UserDetail> userList = demoService
								.getUserByHmdMac(hmdList.get(i).getHmdMac());
						if (null != userList && userList.size() > 0) {
							for (int j = 0; j < userList.size(); j++) {
								treeList
										.add("{id:3,pId:"
												+ userList.get(j).getId()
												+ ",name:'"
												+ userList.get(j).getUserId()
												+ ""
												+ userList.get(j).hashCode()
												+ "',icon:'images/icons/device_16.png',isParent:true}");
							}
						}
					}
				}
			} else if (id.equals("3")) {
				List<UserEquipment> equipmentList = demoService
						.getUserEqupmentByUserId(demoService.getUserDetail(pId)
								.getUserId());
				if (null != equipmentList && equipmentList.size() > 0) {
					for (int i = 0; i < equipmentList.size(); i++) {
						UserEquipment equipment = equipmentList.get(i);
							treeList.add("{id:4,pId:"
									+ equipmentList.get(i).getId()
									+ ",name:'四级" + equipment.hashCode()
									+ "',icon:'images/icons/hmd.png'}");
						
					}
				}
			}
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().println(treeList);
		}
	}

下面运行结果：