废话不多说,直接贴核心代码:
<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;
}
</style>
<div>
<div>
<ul class="list">
<li class="title"> 道路: <input id="roadSel" type="text" readonly value="" style="width: 350px;" onclick="showRoad();" />
</ul>
</div>
<div id="roadTreeContent" class="menuContent" style="display: none; position: absolute;background: #f9f9f9;z-index: 10">
<ul id="roadTree" class="ztree" style="margin-top: 0; width: 300px; height: 300px;"></ul>
</div>
</div>
<script>
var setting = {
async: {
enable: true,
url: "${adminPath}/roadInfo/getRoadInfoList",
autoParam: ["id"],
type:"GET",
dataType: "JSON",
dataFilter : function(treeId, parentNode, childNodes) {
for (var i=0; i<childNodes.length; i++) {
if(childNodes[i].pId=="0" || childNodes[i].pId=="1"){
childNodes[i].isParent = true;
}else{
childNodes[i].isParent = false;
}
}
return childNodes;
}
},
check: {
enable: true,
chkboxType: { "Y" : "ps", "N" : "ps" }
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onCheck: onCheck
}
};
$(document).ready(function(){
$.fn.zTree.init($("#roadTree"), setting);
});
function beforeClick(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("roadTree");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("roadTree"),
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 = $("#roadSel");
cityObj.attr("value", v);
}
function showRoad() {
var cityOffset = $("#roadSel").offset();
$("#roadTreeContent").css({left:cityOffset.left/1.35 + "px", top:cityOffset.top/ + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideTree() {
$("#roadTreeContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "roadSel" || event.target.id == "roadTreeContent" || $(event.target).parents("#roadTreeContent").length>0)) {
hideTree();
}
}
</script>