多级ztree
2015-03-05 13:39
676 查看
简单的写了个多级的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);
4000
}
@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);
}
}下面运行结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 解决ztree搜索中多级菜单展示不全问题
- 用fastjson为Ztree生成多级树形菜单JSON数据源
- 解决ztree搜索中多级菜单展示不全问题
- zTree下拉菜单多级菜单多选实现
- 从多级延迟触发器到边沿检测
- 基于jquery实现多级菜单效果
- zTree模糊搜索
- Ajax-ajax实例4-多级联动菜单
- Jquery-zTree的基本用法
- Java 创建多级目录和文件
- (转载)ztree 添加节点的图标无法正常显示解决方法
- html/css 纯css向右展开多级导航菜单代码
- ListView/RecycleView与树结构实现多级目录
- ztree一级一级加载数据
- ztree使用
- vue with zTree
- 两张表用UNION关键字组合，用zTree显示树
- jQuery+zTree加载树形结构菜单
- ztree入门应用（二）
- 多级编号