layui +ztree实现下拉分类树完整实例
效果图 
html：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!--<head th:include="layout :: htmlhead" th:with="title='管理'">-->
<head th:with="title='管理'">
<link rel="stylesheet" th:href="@{/zTree/layui/css/layui.css}"></link>
<link rel="stylesheet" th:href="@{/zTree/metroStyle/metroStyle.css}"></link>
<link rel="stylesheet" th:href="@{/zTree/css/index.css}"></link>
<script th:src="@{/zTree/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/zTree/jquery-1.4.4.min.js}"></script>
<script type="text/javascript" th:src="@{/zTree/jquery.ztree.all.js}"></script>
<script type="text/javascript" th:src="@{/zTree/selectTree.js}"></script>
</head>
<body class="bg">
<div class="layui-layout layui-layout-admin">
<div class="content-body">
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<div id="demo" class="layui-form-select select-tree">
</div>
</div>
</div>
<div class="layui-input-inline">
<div id="demo2" class="select-tree layui-form-select">
</div>
</div>
</div>
</div>
<!--底部-->
<div class="layui-footer">
</div>
<script src="/js/goods/goodsBatchAdd.js"></script>
</body>
</html>
goodsBatchAdd.js 文件如下：
layui.use(['form', 'element'], function () {
});
//本地测试数据
var zNodes = [
{id: 1, pId: 0, name: "北京"},
{id: 2, pId: 0, name: "天津"},
{id: 3, pId: 0, name: "上海"},
{id: 6, pId: 0, name: "重庆"},
{id: 4, pId: 0, name: "河北省", open: true, "chkDisabled": true},
{id: 41, pId: 4, name: "石家庄"},
{id: 42, pId: 4, name: "保定"},
{id: 43, pId: 4, name: "邯郸"},
{id: 44, pId: 4, name: "承德"},
{id: 5, pId: 0, name: "广东省", open: 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},
{id: 61, pId: 6, name: "福州"},
{id: 62, pId: 6, name: "厦门"},
{id: 63, pId: 6, name: "泉州"},
{id: 64, pId: 6, name: "三明"}
];
//后台ajax加载数据
function getCategoryTreeData() {
var data = [];
$.ajax({
url: '/goods/findCategoryTreeNode', //后台数据请求地址
type: "post",
async:false,
success: function(res){
console.log("getData==res.data======")
console.log(res.data)
data = res.data;
}
});
return data;
}
$(function () {
initSelectTree("demo", true, {"Y": "ps", "N": "s"}) //多选
initSelectTree("demo2", false);//单选
});
function initSelectTree(id, isMultiple, chkboxType) {
var setting = {
view: {
dblClickExpand: false,
showLine: false
},
data: {
simpleData: {
enable: true
}
},
check: {
enable: false,
chkboxType: {"Y": "ps", "N": "s"}
},
callback: {
onClick: onClick,
onCheck: onCheck
}
};
if (isMultiple) {
setting.check.enable = isMultiple;
}
if (chkboxType !== undefined && chkboxType != null) {
setting.check.chkboxType = chkboxType;
}
var html = '' +
'+ id + 'Show"' + 'type = "text" placeholder = "请选择" value = "" class = "layui-input" readonly>' +
'' +
'';
$("#" + id).append(html);
$("#" + id).parent().append('');
$("#" + id).bind("click", function () {
if ($(this).parent().find(".tree-content").css("display") !== "none") {
hideMenu()
} else {
$(this).addClass("layui-form-selected");
var Offset = $(this).offset();
var width = $(this).width() - 2;
$(this).parent().find(".tree-content").css({
left: Offset.left + "px",
top: Offset.top + $(this).height() + "px"
}).slideDown("fast");
$(this).parent().find(".tree-content").css({
width: width
});
$("body").bind("mousedown", onBodyDown);
}
});
//$.fn.zTree.init($("#" + id + "Tree"), setting, getCategoryTreeData());//1.加载后台json数据
$.fn.zTree.init($("#" + id + "Tree"), setting, zNodes ); //2.本地测试数据
}
function beforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
if (!check) alert("只能选择城市...");
return check;
}
function onClick(event, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
if (zTree.setting.check.enable == true) {
zTree.checkNode(treeNode, !treeNode.checked, false)
assignment(treeId, zTree.getCheckedNodes());
} else {
assignment(treeId, zTree.getSelectedNodes());
hideMenu();
}
}
function onCheck(event, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
assignment(treeId, zTree.getCheckedNodes());
}
function hideMenu() {
$(".select-tree").removeClass("layui-form-selected");
$(".tree-content").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function assignment(treeId, nodes) {
var names = "";
var ids = "";
for (var i = 0, l = nodes.length; i < l; i++) {
names += nodes[i].name + ",";
ids += nodes[i].id + ",";
}
if (names.length > 0) {
names = names.substring(0, names.length - 1);
ids = ids.substring(0, ids.length - 1);
}
treeId = treeId.substring(0, treeId.length - 4);
$("#" + treeId + "Show").attr("value", names);
$("#" + treeId + "Show").attr("title", names);
$("#" + treeId + "Hide").attr("value", ids);
}
function onBodyDown(event) {
if ($(event.target).parents(".tree-content").html() == null) {
hideMenu();
}
}
完整代码链接（对应的layui.js,layui.css,selectTree.js）