You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
4.1 KiB
113 lines
4.1 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="../../static/css/font.css">
|
|
<link rel="stylesheet" href="../../static/css/weadmin.css">
|
|
<link rel="stylesheet" href="../../lib/ztree/zTreeStyle.css">
|
|
<script src="../../lib/jquery-3.6.0.min.js"></script>
|
|
<script src="../../lib/ztree/jquery.ztree.core-3.5.min.js"></script>
|
|
<script>
|
|
var setting = {
|
|
view: {
|
|
dblClickExpand: false
|
|
},
|
|
data: {
|
|
simpleData: {
|
|
idKey: "id",
|
|
pIdKey: "parent_id",
|
|
enable: true
|
|
},
|
|
key: {
|
|
name: "area_name"
|
|
}
|
|
},
|
|
callback: {
|
|
onClick: onClick
|
|
}
|
|
};
|
|
|
|
function onClick(e, treeId, treeNode) {
|
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
|
|
nodes = zTree.getSelectedNodes(),
|
|
v = "";
|
|
nodes.sort(function compare(a, b) {
|
|
return a.id - b.id;
|
|
});
|
|
for (var i = 0, l = nodes.length; i < l; i++) {
|
|
v += nodes[i].area_name + ",";
|
|
}
|
|
if (v.length > 0) v = v.substring(0, v.length - 1);
|
|
var cityObj = $("#area");
|
|
cityObj.attr("value", v);
|
|
hideMenu();
|
|
}
|
|
|
|
function showMenu() {
|
|
var cityObj = $("#area");
|
|
var cityOffset = $("#area").offset();
|
|
$("#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 == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
|
|
hideMenu();
|
|
}
|
|
}
|
|
|
|
$(function() {
|
|
$.ajax({
|
|
type : "GET",
|
|
dataType : "json",
|
|
async : false,
|
|
url : "/FengHuang/dm/getArea",
|
|
data : {
|
|
"parent_id" : "064BB3C9-E8DB-45ED-B0C1-6ABC5EA3B667",
|
|
"need_root" : "1"
|
|
},
|
|
success : function(result) {
|
|
$.fn.zTree.init($("#treeDemo"), setting, result.data);
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
<style type="text/css">
|
|
ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
|
|
ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;}
|
|
ul.log.small {height:45px;}
|
|
ul.log li {color: #666666;list-style: none;padding-left: 10px;}
|
|
ul.log li.dark {background-color: #E3E3E3;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>下拉菜单</h1>
|
|
<h6>[ 文件路径: super/select_menu.html ]</h6>
|
|
<div class="content_wrap">
|
|
<div class="zTreeDemoBackground left">
|
|
<ul class="list">
|
|
<li class="title"> <span class="highlight_red">选择城市时，按下 Ctrl 或 Cmd 键可以进行多选</span></li>
|
|
<li class="title"> 城市：<input id="area" onclick="showMenu();" type="text" readonly value="" style="width:120px;" class="layui-input" />
|
|
<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
|
|
<ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |