ztree下拉树

点击只读文本框弹出树

<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>