点击只读文本框弹出树
<input id="sname" type="text" readonly value="" class="form-control" style="height:28px;cursor:default" onclick="showMenu();" />
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top:0; width:400px; height: 300px; background-color:white;border: 1px solid #617775">
</ul>
</div>
<script>
$(function () {
var setting = {
check: {
enable: false,//不显示复选单选框
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: onClick,
}
};
var zNodes = [
{ id: 1, pId: 0, name: "工商库", open: true },
{ id: 11, pId: 1, name: "企业信息库", open: true },
{ id: 12, pId: 1, name: "行政处罚信息库" },
{ id: 13, pId: 1, name: "企业年报库" },
{ id: 14, pId: 1, name: "公示信息库" },
{ id: 111, pId: 11, name: "表格1",}
];
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
function onClick(e, treeId, treeNode) {
var cityObj = $("#sname");
cityObj.val(treeNode.name);
hideMenu();
};
function showMenu() {
var cityObj = $("#sname");
var cityOffset = $("#sname").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.name == "SPAN") {
hideMenu();//隐藏树
}
};
</script>