正文
JQuery树插件——ztree
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
API与Demo :http://www.treejs.cn/v3/api.php
使用插件，第一步依然是引入：
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.ztree.all.js"></script>
//详细的引入请参见API——如果有较多地方需要引入，请将引入部分抽取为专门的JSP页面，使用 <include />，例如，引入的页面：
<link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />
<script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>
如何引入：
<%@include file="/WEB-INF/views/include/treeview.jsp" %>
接下来看实例：
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
大致分析：
其中， $.fn.zTree.init为初始化树的方法，它接收三个参数，第一个为ztree的DOM容器，通常为 <ul> 或 <div>，例如：
<ul id="treeDemo" class="ztree"></ul>
<div id="ztree" class="ztree"></div>
//请务必设置class为 ztree，以指定为ztree的容器。
第二个参数为ztree的配置，用于显示树的显示样式，例如：
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {};
//详细配置后续补充
第三个参数为ztree的数据源，格式为JSON：
var zNodes = [
{name:"test1", open:true,"checked":"true", children:[
{name:"test1_1","checked":"true"}, {name:"test1_2"}]},
{name:"test2", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
];
这样，一个最简单的树便可以加载了：
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.all.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [
{name:"test1111", open:true,"checked":"true", children:[
{name:"test1_1","checked":"true"}, {name:"test1_2"}]},
{name:"test2222", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
]; $(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>
【使用开关函数隐藏与显示】：
$(".a").click(function(){
$("p").toggle()
})
引用网友的理解：zTree的实现就是用setting把树的模型结构定义好，然后用zNodes当数据源，把数据浇灌到这个树
settings实例：
var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},
callback:{onClick:function(event, treeId, treeNode){
var id = treeNode.pId == '0' ? '' :treeNode.pId;
$('#officeContent').attr("src","${ctx}/sys/office/list?id="+id+"&parentIds="+treeNode.pIds);
}
}
};
查阅API可以得知：（回调函数部分这里暂时不进行展开，可以参见官网API）
其中，simpleData的作用：不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式，这样，我们就可以使用简单的JSON格式，通过在JSON中指定id,pid来确定ztree的结构关系，而不用通过复杂的JSON嵌套来确定树的关系：
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];
效果如下：
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.all.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
]; $(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>
接下来看Web项目中实际使用的Demo:
后台：
/**
* 获取机构JSON数据。
* @param extId 排除的ID
* @param type 类型（1：公司；2：部门/小组/其它：3：用户）
* @param grade 显示级别
* @param response
* @return
*/
@RequiresPermissions("user")
@ResponseBody
@RequestMapping(value = "treeData")
public List<Map<String, Object>> treeData(@RequestParam(required=false) String extId, @RequestParam(required=false) String type,
@RequestParam(required=false) Long grade, @RequestParam(required=false) Boolean isAll, HttpServletResponse response) {
List<Map<String, Object>> mapList = Lists.newArrayList();
List<Office> list = officeService.findList(isAll);
for (int i=0; i<list.size(); i++){
Office e = list.get(i);
if ((StringUtils.isBlank(extId) || (extId!=null && !extId.equals(e.getId()) && e.getParentIds().indexOf(","+extId+",")==-1))
&& (type == null || (type != null && (type.equals("1") ? type.equals(e.getType()) : true)))
&& (grade == null || (grade != null && Integer.parseInt(e.getGrade()) <= grade.intValue()))
&& Global.YES.equals(e.getUseable())){
Map<String, Object> map = Maps.newHashMap();
map.put("id", e.getId());
map.put("pId", e.getParentId());
map.put("pIds", e.getParentIds());
map.put("name", e.getName());
if (type != null && "3".equals(type)){
map.put("isParent", true);
}
mapList.add(map);
}
}
return mapList;
}
后台返回的是一个mapList ，此Demo中返回的数据如下：
[{id=, pId=, name=江西省党总部, pIds=,},
{id=, pId=, name=公司领导, pIds=,,},
{id=, pId=, name=综合部, pIds=,,},
{id=, pId=, name=市场部, pIds=,,},
{id=, pId=, name=技术部, pIds=,,},
{id=, pId=, name=研发部, pIds=,,},
{id=, pId=, name=济南市分公司, pIds=,,},
{id=, pId=, name=公司领导, pIds=,,,},
{id=, pId=, name=综合部, pIds=,,,},
{id=, pId=, name=市场部, pIds=,,,},
{id=, pId=, name=技术部, pIds=,,,},
{id=, pId=, name=历城区分公司, pIds=,,,},
{id=, pId=, name=公司领导, pIds=,,,,},
{id=, pId=, name=综合部, pIds=,,,,},
{id=, pId=, name=市场部, pIds=,,,,},
{id=, pId=, name=技术部, pIds=,,,,},
{id=, pId=, name=历下区分公司, pIds=,,,},
{id=, pId=, name=高新区分公司, pIds=,,,},
{id=, pId=, name=公司领导, pIds=,,,,},
{id=, pId=, name=公司领导, pIds=,,,,},
{id=, pId=, name=综合部, pIds=,,,,},
{id=, pId=, name=综合部, pIds=,,,,},
{id=, pId=, name=市场部, pIds=,,,,},
{id=, pId=, name=市场部, pIds=,,,,},
{id=, pId=, name=技术部, pIds=,,,,},
{id=, pId=, name=技术部, pIds=,,,,}]
前台通过Ajax请求接收：更多Ajax操作请参见API或之前随笔：http://www.cnblogs.com/jiangbei/p/6880157.html
<script type="text/javascript">
var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},
callback:{onClick:function(event, treeId, treeNode){
var id = treeNode.pId == '0' ? '' :treeNode.pId;
$('#officeContent').attr("src","${ctx}/sys/office/list?id="+id+"&parentIds="+treeNode.pIds);
}
}
}; function refreshTree(){
$.getJSON("${ctx}/sys/office/treeData",function(data){
$.fn.zTree.init($("#ztree"), setting, data).expandAll(true);
});
}
refreshTree();
这样，一棵树就显示出来了！
获取树的节点数据请参见回调函数：
实例参见： http://blog.csdn.net/u013008179/article/details/47680951
简单实例，待更新：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ztree</title>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all.js"></script>
</head>
<body>
<input type="text" name="area" id="area" readonly="readonly">
<a id="loadztree" href="#">点击加载</a>
<ul id="treeDemo" class="ztree"></ul>
<script type="text/javascript">
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
callback: {
onClick: zTreeOnClick
}
};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [
{name:"test1111", open:true,"checked":"true", children:[
{name:"test1_1","checked":"true"}, {name:"test1_2"}]},
{name:"test2222", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
];
function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.name);
$("#area").val(treeNode.name);
};
$("#loadztree").click(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#treeDemo").slideToggle();
});
$(function(){
alert("页面加载完成！");
}); </script>
</body>
</html>
Jeetise实例：
<font size="5">Hello tree!</font>
<div id="ztree" class="ztree"></div>
<script type="text/javascript">
var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},}; function refreshTree(){
$.getJSON("${ctx}/po/partyOrganization/treeData",function(data){
$.fn.zTree.init($("#ztree"), setting, data);
});
}
refreshTree();
