ZTree+JAVA写一棵同步树

最新推荐文章于 2022-08-23 17:18:17 发布

yasashii

最新推荐文章于 2022-08-23 17:18:17 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/yasashii/article/details/75118319

版权

ZTree在项目中可能经常会用到，通常会用来加载区域树形列表。我们平时用的时候通常会根据效率问题来选择是用同步加载树还是异步加载树，下面我就写一个简单的小例子来展示如何写一个同步树。

前端页面的代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/XHTML11/DTD/XHTML.DTD">

<head>

<title>同步树形列表</title>

.title{

position:absolute;

font-family:'微软雅黑';

color:#ffffff;

font-size:12px;

left:0px;

top:6px;

width:90px;

height:24px;

text-align:center;

line-height:24px;

}

</style>

var ctx="${ctx}";

</script>

</head>
<body>

</div>

</div>

</body>

</html>

前端页面需要引入ZTree的JS文件和Css样式等。getTree.js文件的内容如下:

var zTree;

var setting={

data:{

simpleData:{

enable:true,

idKey:'id',

pIdKey:'pId',

}

view:{

dblClickExpand:true,

showLine:true

callback:{

onClick:dpttree_onClick

check:{

chkboxType:{'Y':'p','N':'p'},

chkStyle:'checkbox',

enable:true

}

};

function dpttree_onClick(event,treeId,treeNode,clickFlag){

alert(treeNode.id);

}

function createTree(){

$.ajax({

url:ctx+"/Tree/testTree",

type:'POST',

dataType:'text',

ContentType:'application/json;charset=utf-8',

success:function(data){

var ztreeNodes=eval('('+data+')');

zTree=$.fn.zTree.init(('#departmentTree').setting,ztreeNodes);

zTree=expandAll(true);

error:function(data){

alert("树加载失败");

}

});

}

$(document).ready(function(){

createTree();

});

后台的写法基本上利用JSONArray将所需要的数据加入到JSONArray当中，形成树所需要的结构，一般应包括isParent(是否有子节点)，id，pId。

也可以附加其他的属性值传到前台如name等，类似的代码如下:

@RequestMapping(value="testTree")

@ResponseBody

public Object testTree(HttpServletRequest request){

JSONArray arr=new JSONArray();

JSONObject tempObj5=new JSONObject();

tempObj5.put("id","0");

tempObj5.put("isParent",true);

tempObj5.put("name","test000001");

arr.add(tempObj5);

JSONObject tempObj=new JSONObject();

tempObj.put("id","1");

tempObj.put("isParent",true);

tempObj.put("name","001");

tempObj.put("pId","0");

arr.add(tempObj);

JSONObject tempObj1=new JSONObject();

tempObj1.put("id","2");

tempObj.put("isParent",true);

tempObj,put("name","002");

tempObj.put("pId","0");

arr.add(tempObj1);

JSONObject tempObj2=new JSONObject();

tempObj2.put("id","3");

tempObj2.put("isParent",false);

tempObj2.put("name","0011");

tempObj2.put("pId","1");

arr.add(tempObj2);

JSONObject tempObj3=new JSONObject();

tempObj3.put("id","4");

tempObj3.put("isParent",false);

tempObj3.put("name","0021");

tempObj3.put("pId","2");

arr.add(tempObj3);

String TreeJson=JSONUtil.toJSON(arr);

return TreeJson;

}

运行后效果如下：

纯手工打字，如有哪里不对，请大神帮忙指正！

yasashii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ZTree+JAVA写一棵同步树

ZTree在项目中可能经常会用到，通常会用来加载区域树形列表。我们平时用的时候通常会根据效率问题来选择是用同步加载树还是异步加载树，下面我就写一个简单的小例子来展示如何写一个同步树。前端页面的代码如下:区域树型列表 .title{ position: absolute; font-family: "微软雅黑"; color: #ffff
复制链接

扫一扫