[JavaScript知识库]点击input框弹出ztree页

效果图

引入的js与css

  <link rel="stylesheet" type="text/css" href="${ctx}/css/zTreeStyle/zTreeStyle.css">
  <script type="text/javascript" src="${ctx}/static/zTree/jquery.ztree.core-3.5.min.js"></script>
  <script type="text/javascript" src="${ctx}/static/zTree/jquery.ztree.excheck-3.5.min.js"></script>

HTML代码

<div class="col-md-5 col-md-offset-1 form-group">
                <label for="" class="col-md-3 text-left control-label lh34 font-normol" id="orgLabel">原属机构</label>
                <div class="col-md-9 text-left">
                    <input type="text" id="organization" name="organization" class="form-control" onclick="showMenu(); return false;"  autocomplete="off"  readonly="readonly" aria-label="...">
                </div>
                <div id="menuContent"  style="position: absolute; display: none;width:64%;height:auto; z-index: 10; background-color: #eee; overflow: auto">
                    　　<ul id="treeDemo" class="ztree"></ul>  //class必须为ztree
                </div>
            </div>

js代码

var setting = {
        view: {
            showIcon: false,//设置 zTree 是否显示节点的图标。默认值：true
            showLine: false//设置 zTree 是否显示节点之间的连线。默认值：true
        },
        data: {
            simpleData: {
                enable: true,//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)

                idKey: "id",//你后台返回的json的id字段（节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]）
                pIdKey: "pId",//你后台返回的json的父级id字段（节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]）
                rootPId: 0//（用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]）
    }
    },
    callback: {
        onClick: onClick//用于捕获节点被点击的事件回调函数
        //如果设置了 setting.callback.beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。

    }
    };

    var filename;
    var parentids;
    var parentId;


    function onClick(e, treeId, treeNode) {
        $('#organization').val(treeNode.name);//当前节点name赋值input框
        console.log('id:'+treeNode.id);//当前选中节点id，可用于向后台传值
        filename = getFilePath(treeNode);//获取所有父节点的名字
        parentids = getFileId(treeNode);//获取所有父节点的id
        parentId = treeNode.id;//获取点击节点的id
        hideMenu();
    }
    //获取所有父节点名字
    function getFilePath(treeObj){
        if(treeObj==null)return "";
        var filename = treeObj.name;
        var pNode = treeObj.getParentNode();
        if(pNode!=null){
            filename = getFilePath(pNode) +">"+ filename;
        }
        return filename;
    }
    //获取所有父节点id
    function getFileId(treeObj){
        if(treeObj==null)return "";
        var id = treeObj.id;
        var pNode = treeObj.getParentNode();
        if(pNode!=null){
            id = getFileId(pNode) +">"+ id;
        }
        return id;
    }

    function showMenu() {//输入框的点击事件
        var labObj = $('#orgLabel');
        var labObjOffset = labObj.offset();
        $("#menuContent").css({ left: labObjOffset.left - 15 + "px" , top:  labObj.outerHeight() + "px" }).slideDown("fast");//根据输入框的css格式设置offSet，否则会导致ztree与input不对称
        $("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();
        }
    }

$(document).ready(function(){
        var treeNodes = [
            {"id":1, "pId":0, "name":"test1"},
            {"id":11, "pId":1, "name":"test11"},
            {"id":12, "pId":1, "name":"test12"},
            {"id":111, "pId":11, "name":"test111"},
        ];

        $.fn.zTree.init($("#treeDemo"), setting, treeNodes);

		//此处treeNodes取值也可设置后台通过ajax传值，切记注意数据格式不正确引起的问题
		/*$.ajax({
            type:"post",
            url:'${ctx}${parentPath}/test/getdata',
            async:true,
            success:function(res){
				var treeNodes =res.getOrgList;
                $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
    });
    */