引入类库：
<script type="text/javascript" src="<%=path%>/js/jquery-ztree/jquery.ztree.core-3.5.js"></script><link rel="stylesheet" type="text/css" href="<%=path%>/js/jquery-ztree/zTreeStyle3.5/zTreeStyle.css" />
html代码：
<div style="width: 200px; height: 550px; float: left; overflow-y: auto; background: #b3d0db;">
<ul id="brandProductValueTree" class="ztree"></ul></div>
js代码：
$(document).ready(function(){
initBrandProductValueTree();
});
function initBrandProductValueTree() {
$.fn.zTree.init($("#brandProductValueTree"), { async : { enable : true, url : path + "/brandCustomerOrder/brandCustomerOrder_searchBrandProductValueBeanForZtree",//后台返回相应数据 autoParam : [ "_tid" ], dataType : "json", dataFilter : function(treeId, parentNode, responseData) { var result = responseData.data; if (parentNode == null) { result.unshift({_tid : 0, name : "产品值树", isParent : true, open : true}); } for(var i = 0; i < result.length;i ++){ if(result[i]._tpid == 0 || result[i].listFlag) { result[i].isParent = true; } if(result[i].name) { result[i]._name = result[i].name; }else { if(result[i].listFlag == 1){ result[i]._name = "列表" + result[i].idx; }else{ result[i]._name = "文章" + result[i].idx; } } } return result; }, otherParam : ["templateId", templateId, "productId", productId] }, data : { key : { name : "_name" }, simpleData : { enable : true, idKey : "_tid",//本级id pIdKey : "_tpid",//父亲id rootPId : 0//根id } }, view : { selectedMulti : false }, callback : { beforeCollapse : function(treeId, treeNode) { return treeNode._tid != 0; }, onAsyncSuccess : function(event, treeId, treeNode, msg) { ajaxResponseValidate(msg); }, onAsyncError : function() { alert("Ajax访问异常"); }, onClick : function(event, treeId, treeNode, clickFlag) {//点击菜单出现，以下表示相关div的显示和隐藏 if(treeNode._tid == 0){ $("#brandProductValueRootHint").show(); $("#brandProductValueEditDiv").hide(); $("#brandProductValueAddDiv").hide(); }else { $("#brandProductValueRootHint").hide(); if (treeNode._tid < 0 || treeNode.listFlag) { if (treeNode.listFlag) { $("#brandProductValueAddDiv").hide(); showBrandProductValueEditDiv(treeNode); } else { $("#brandProductValueEditDiv").hide(); showBrandProductValueAddDiv(treeNode); } } else { $("#brandProductValueAddDiv").hide(); showBrandProductValueEditDiv(treeNode); } } } } }); }