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=1, pId=0, name=江西省党总部, pIds=0,},
{id=2, pId=1, name=公司领导, pIds=0,1,},
{id=3, pId=1, name=综合部, pIds=0,1,},
{id=4, pId=1, name=市场部, pIds=0,1,},
{id=5, pId=1, name=技术部, pIds=0,1,},
{id=6, pId=1, name=研发部, pIds=0,1,},
{id=7, pId=1, name=济南市分公司, pIds=0,1,},
{id=8, pId=7, name=公司领导, pIds=0,1,7,},
{id=9, pId=7, name=综合部, pIds=0,1,7,},
{id=10, pId=7, name=市场部, pIds=0,1,7,},
{id=11, pId=7, name=技术部, pIds=0,1,7,},
{id=12, pId=7, name=历城区分公司, pIds=0,1,7,},
{id=13, pId=12, name=公司领导, pIds=0,1,7,12,},
{id=14, pId=12, name=综合部, pIds=0,1,7,12,},
{id=15, pId=12, name=市场部, pIds=0,1,7,12,},
{id=16, pId=12, name=技术部, pIds=0,1,7,12,},
{id=17, pId=7, name=历下区分公司, pIds=0,1,7,},
{id=22, pId=7, name=高新区分公司, pIds=0,1,7,},
{id=18, pId=17, name=公司领导, pIds=0,1,7,17,},
{id=23, pId=22, name=公司领导, pIds=0,1,7,22,},
{id=19, pId=17, name=综合部, pIds=0,1,7,17,},
{id=24, pId=22, name=综合部, pIds=0,1,7,22,},
{id=20, pId=17, name=市场部, pIds=0,1,7,17,},
{id=25, pId=22, name=市场部, pIds=0,1,7,22,},
{id=21, pId=17, name=技术部, pIds=0,1,7,17,},
{id=26, pId=22, name=技术部, pIds=0,1,7,22,}]
前台通过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();
