下拉框展示ztree

前段html页面`

 <div style="position: relative;margin:90px;">
            <input id="orgName" class="org-select" onclick="showTree()"  readonly >
            <!-- 模拟select点击框 以及option的text值显示-->
            <i class="trg"style="position: absolute;"></i>
            <!-- 模拟select右侧倒三角 -->
            <input id="orgCode" type="hidden" name="orgCode" />
            <!-- 存储 模拟select的value值 -->

            <!-- zTree树状图 相对定位在其下方 -->
            <div class="ztree"  style="display:none; position: absolute;border:1px solid #4aa5ff;width:200px;">
                <ul id="treeDemo"></ul>
            </div>
        </div>

后端方法，我这边是写死的几个数据，可以动态从数据库获取数据，替换掉我写死的。子节点的pId对应父节点的id

@PostMapping("/list/ztree")
    @ResponseBody
    public List toRoleListZtree(){
        List list=new ArrayList();
        ZTree zTree1=new ZTree(1,0,"父节点1");
        ZTree zTree2=new ZTree(2,0,"父节点2");
        ZTree zTree3=new ZTree(11,1,"子节点11");
        ZTree zTree4=new ZTree(12,1,"子节点12");
        ZTree zTree5=new ZTree(21,2,"子节点21");
        ZTree zTree6=new ZTree(22,2,"子节点22");
        list.add(zTree1);
        list.add(zTree2);
        list.add(zTree3);
        list.add(zTree4);
        list.add(zTree5);
        list.add(zTree6);
        return list;
    }

js部分

  //树状图展示
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            //回调
            callback: {
                onClick: zTreeOnClick
            },
            view: {
                fontCss: { fontSize: "14px" }
            }
        };
        //节点点击事件
        function zTreeOnClick(event, treeId, treeNode) {
            $('#orgName').val(treeNode.name);
            $('#orgCode').val(treeNode.Id)
            hideTree();
        };
        $(document).ready(function () {
            //初始组织树状图
            ztreeFz()
        });
        //动态从后台获取值
        function ztreeFz() {
            //这边由于我的页面使用freemarker魔板所以ajax写法不一样，html页面职业写ajax就行，function就是ajax的success
            $.post(
                "/jwUser/list/ztree",
                {},
                function(result) {
                    $.fn.zTree.init($("#treeDemo"), setting, result);
                },
                "json");
        }
        //下拉框显示 隐藏
        function showTree(){
            if($('.ztree').css('display') == 'none'){
                $('.ztree').css('display','block');
            } else{
                $('.ztree').css('display','none');
            }
            $("body").bind("mousedown", onBodyDownByActionType);
        }
        function hideTree() {
            $('.ztree').css('display','none');
            $("body").unbind("mousedown", onBodyDownByActionType);
            return false;
        }

        //区域外点击事件
        function onBodyDownByActionType(event) {
            if (event.target.id.indexOf('treeDemo') == -1){
                if(event.target.id != 'selectDevType'){
                    hideTree();
                }
            }
        }

效果展示