zTree的调用设使用
1、从zTree官网上下载zTree的包，zTree的官方网址是：http://www.ztree.me/v3/main.php#_zTreeInfo
2、引入zTree所需的依赖，例如(jQuery的js自己引入)：
| <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ include file="common/common.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'tree.jsp' starting page</title> <link rel="stylesheet" type="text/css" href="${scriptsPath}/zTree/css/zTreeStyle/zTreeStyle.css"/> <script type="text/javascript" src="${scriptsPath}/jQuery/jquery-1.11.3.min.js" charset="utf-8"></script> <script type="text/javascript" src="${scriptsPath}/zTree/js/jquery.ztree.all-3.5.min.js"></script> </head>
<body> <%--<div style="background:url('${imagesPath}/tree-icon/web.jpg') 0 0 no-repeat; width:100px; height:100px;"></div>--%>
<input id="citySel" type="text" readonly value="" style="width:300px;" onclick="$.websiteChannel.showMenu(); return false;"/> <div id="menuContent" class="menuContent" style="width:300px; height:500px; display:none; background:#EFEFEF;"> <div id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></div> </div>
<div id="chnlcode"></div> <div id="sitecode"></div> <div id="chnlid"></div> <div id="nodePath"></div>
<!-- 站点栏目树对应的js --> <script type="text/javascript" src="${scriptsPath}/tpl/common/tree.js" charset="utf-8"></script> </body> </html> |
3、树的tree.js。调用如下：
| /* * name :Zuoquan Tu * mail :tuzq@XXX * date :2015/11/25 * version :1.0 * description:XXX * CopyRight (C) 2015-11 */ (function($){ /** * 添加一个站点栏目树js对应的命名空间，避免污染其它地方的js */ $.websiteChannel = { showMenu:function() { var cityObj = $("#citySel"); var cityOffset = $("#citySel").offset(); $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", $.websiteChannel.onBodyDown);
/**避免js内存溢出*/ cityObj = null; cityOffset = null; }, hideMenu:function() { $("#menuContent").fadeOut("fast"); $("body").unbind("mousedown", $.websiteChannel.onBodyDown); }, onBodyDown:function(event) { if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) { $.websiteChannel.hideMenu(); } }, /** * 树被点击的时候执行的动作 */ onClick:function(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.checkNode(treeNode, !treeNode.checked, null, true); return false; }, /** * 树被选中时执行的事件 */ onCheck:function(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getCheckedNodes(true), chnlcodeValue = ""; sitecodeValue = ""; chnlidValue = ""; nodePath = ""; //显示建的专题位置,从"站点"-->"最后一个栏目"的路径 for (var i=0, length=nodes.length; i<length; i++) { chnlcodeValue += nodes[i].chnlcode + ","; sitecodeValue += nodes[i].sitecode + ","; chnlidValue += nodes[i].id + ","; } if (chnlcodeValue.length > 0 ) chnlcodeValue = chnlcodeValue.substring(0, chnlcodeValue.length-1); if (sitecodeValue.length > 0 ) sitecodeValue = sitecodeValue.substring(0, sitecodeValue.length-1); if (chnlidValue.length > 0 ) chnlidValue = chnlidValue.substring(0, chnlidValue.length-1);
var pathNodes = treeNode.getPath(); for(var i = 0; i < pathNodes.length; i++) { nodePath += pathNodes[i].name + "/"; }
$("#chnlcode").text(chnlcodeValue); $("#sitecode").text(sitecodeValue); $("#chnlid").text(chnlidValue); $("#nodePath").text(nodePath);
chnlcodeValue = null; sitecodeValue = null; chnlidValue = null; nodePath = null; }, /** * 树被展开时执行的事件 */ //onExpand(event,treeId,treeNode) { // alert(treeNode.tId + "," + treeNode.level + "," + treeNode.name); //} };
/** * 站点栏目树 */ var setting = {// 栏目树的配置 async : { treeId:"website-channel-tree",//zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id属性值 enable : true,//设置zTree是否开启异步加载模式 //autoParam:["id","isSite"], url : '/website-webapp/birt/getWebsiteAndChannelTreeInterface_birt.action', // 提交的参数 autoParam: ["id","name"],//异步加载时需要自动提交父节点属性的参数 dataFilter: function(treeId, parentNode, childNodes) { if (!childNodes) return null; for ( var i = 0, l = childNodes.length; i < l; i++) { if (childNodes[i].isSite == 1) { childNodes[i].icon = "/app-tpl-webapp/images/tree-icon/web.jpg"; childNodes[i].iconOpen = "/app-tpl-webapp/images/tree-icon/web.jpg"; childNodes[i].iconClose = "/app-tpl-webapp/images/tree-icon/web.jpg"; } else { childNodes[i].icon = "/app-tpl-webapp/images/tree-icon/channel.jpg"; childNodes[i].iconOpen = "/app-tpl-webapp/images/tree-icon/channel.jpg"; childNodes[i].iconClose = "/app-tpl-webapp/images/tree-icon/channel.jpg"; } } return childNodes; } }, callback: { onCheck: $.websiteChannel.onCheck, //当树被选中后执行的事件 onClick: $.websiteChannel.onClick, //当树被点击后执行的事件 onExpand:$.websiteChannel.onExpand //当树被展开后执行的事件 }, check: { enable: true, chkStyle: "radio", radioType: "all" }, data: { simpleData: { enable: true, idKey: "id", pIdKey: "pid", //在第一版中只有上面三个 rootPid: "rid", chnlcode: "chnlcode", sitecode: "sitecode", rootPId: 0 } }, view:{ showIcon:true //让图标显示 } }; $.fn.zTree.init($("#treeDemo"), setting);
//避免js内存溢出 setting = null; })(jQuery); |
4、使用到的json如下：
