完整代码下载
JS 代码
//id div 的id,isMultiple 是否多选,chkboxType 多选框类型{"Y": "ps", "N": "s"} 详细请看ztree官网
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 = '<div class = "layui-select-title" >' +
'<input id="' + id + 'Show"' + 'type = "text" placeholder = "请选择" value = "" class = "layui-input" readonly>' +
'<i class= "layui-edge" ></i>' +
'</div>';
$("#" + id).append(html);
$("#" + id).parent().append('<div class="tree-content scrollbar">' +
'<input hidden id="' + id + 'Hide" ' +
'name="' + $(".select-tree").attr("id") + '">' +
'<ul id="' + id + 'Tree" class="ztree scrollbar" style="margin-top:0;"></ul>' +
'</div>');
$("#" + 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, zNodes);
}
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();
}
}
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="../static/ztree/css/metroStyle/metroStyle.css">
<link rel="stylesheet" type="text/css" href="../static/plugin/css/index.css">
<script type="text/javascript" src="../static/layui/layui.js"></script>
<script type="text/javascript" src="../static/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../static/ztree/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="../static/plugin/js/selectTree.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="javascript:;">列表三</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;" lay-filter="test">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">发布商品</a></li>
</ul>
</div>
</div>
<div class="layui-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 class="layui-footer" style="text-align: center">
© layui.com - 底部固定区域
</div>
</div>
<script>
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: "三明"}
];
$(document).ready(function () {
initSelectTree("demo", true, {"Y": "ps", "N": "s"})
initSelectTree("demo2", false);
})
});
</script>
</body>
</html>