本人使用示例（下載資源地址）：
效果圖：![]()
引入的js,css文件：
jquery-1.8.3.min.js
zTree_v3/css/demo.css
zTree_v3/css/zTreeStyle/zTreeStyle.css
zTree_v3/js/jquery.ztree.core.js
Html：
<table class="ul-form">
<tr><td class="searchInput" width="80px;" align="right">機構：</td>
<td class="searchInput" width="130px;">
<input id="officeID" type="hidden" />
<input class="searchInput" id="citySel" type="text" readonly value="請選擇" style="width:140px;height:30px;" onclick="showMenu();" />
<div id="menuContent" class="menuContent" style="top:100px;display:none; position: absolute;z-index:8888;">
<ul id="treeDemo" class="ztree" style="margin-top:0; width:130px; height: 300px;"></ul>
</div>
</td>
</tr>
</table>
Javascript:
<SCRIPT type="text/javascript">
//<!--
var zNodes ;
var setting = {
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
/* beforeClick: beforeClick, */
onClick: onClick
}
};
/* 原示例：
var zNodes =[
{id:42, pId:4, name:"保定"},
{id:"1d", pId:"0", name:"北京"},
{id:"4d", pId:"0", name:"河北省", open:true, nocheck:true},
{id:"41d", pId:"4d", name:"石家莊"}
{id:43, pId:4, name:"邯鄲"},
{id:44, pId:4, name:"承德"},
{id:5, pId:0, name:"廣東省", open:true, nocheck:true},
{id:51, pId:5, name:"廣州"},
{id:52, pId:5, name:"深圳"},
{id:53, pId:5, name:"東莞"},
{id:54, pId:5, name:"佛山"},
{id:6, pId:0, name:"福建省", open:true, nocheck:true},
{id:61, pId:6, name:"福州"},
{id:62, pId:6, name:"廈門"},
{id:63, pId:6, name:"泉州"},
{id:64, pId:6, name:"三明"}
];
*/
/* function beforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
//if (!check) alert("只能選擇城市...");
return check;
} */
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
v = "";
var ids="";
nodes.sort(function compare(a,b){return a.id-b.id;});
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
ids += nodes[i].id + ",";
}
if (ids.length > 0 ) ids = ids.substring(0, ids.length-1);
$("#officeID").attr("value", ids);
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
hideMenu();
}
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getCheckedNodes(true),
v = "";
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
}
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({left:"95px", top:"40px"}).slideDown("fast");
/* $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast"); */
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
$(document).ready(function(){
$.ajax({//後臺獲取數據請求
type : "POST",
url : webapp + "/panelinfo/panelInfo/findOffice",
dataType : "json",
async:false,
cache:false,
data : {},
error : function(data) {
},
success : function(data) {
zNodes=data;
}
});
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
重要介紹後臺返回數據部分代碼:
/**
* 方法：findOffice
* 方法說明： 查詢所有機構
*/
@RequiresPermissions("panelinfo:panelInfo:view")
@RequestMapping(value = "findOffice")
@ResponseBody
public List<Map<String, Object>> findOffice() {
List<Map<String, Object>> mapList = Lists.newArrayList();
OfficeBean o = new OfficeBean();
o.setParentId("id");
List<Office> list = panelInfoService.findOfficeList(o);
for (int i = 0; i < list.size(); i++) {
Office e = list.get(i);
appendOffices(mapList, e);
}
return mapList;
}
/**
* 方法：appendOffices
* 方法說明： 循環所有的機構
* @param mapList
* @param oj
*/
private void appendOffices(List<Map<String, Object>> mapList, Office oj) {
OfficeBean bj = new OfficeBean();
bj.setParentId(oj.getId());
List<Office> plists = panelInfoService.findOfficeList(bj);
Map<String, Object> maps = Maps.newHashMap();
maps.put("id", oj.getId());
maps.put("pId", oj.getParent().getId());
maps.put("name", oj.getName());
if (!plists.isEmpty()) {
maps.put("open",true);
mapList.add(maps);
for (int i = 0; i < plists.size(); i++) {
Office office = plists.get(i);
appendOffices(mapList, office);
}
}else{
mapList.add(maps);
}
}