下載ztree

http://www.treejs.cn/v3/main.php#_zTreeInfo
結構如下：

image.png

html頁面引入

<link rel="stylesheet" href="{{ asset('/ztree/css/zTreeStyle/zTreeStyle.css') }}">
<script src="/ztree/js/jquery.ztree.core.js"></script>
<script src="/ztree/js/jquery.ztree.excheck.js"></script>

jquery寫法

<script>
    $(function () {
        initZTree();
    });
    function initZTree() {
        $.ajax({
            url: "/admin/depart/get-depart/",
            type: "post",
            dataType: "json",
            async: false,
            success: function(data) {
                var setting = {
                    async: {
                        enable: true,
                        url: "/admin/depart/get-depart/",
                        autoParam: ["id", "pid", "name"],

                    },
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: 'id',
                            pIdKey: 'pid',
                            rootPId: 0
                        }
                    },
                    callback: {
                        onAsyncSuccess: function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
                            var menuIds = "{{ $ids }}".split(',');
                            for(var i = 0; i < treeNode.children.length; i++) {
                                for(var j = 0; j < menuIds.length; j++) {

                                    //第二種方法node.checked = true;
                                    //再更新節(jié)點zTree.updateNode(node);

                                    if(treeNode.children[i].id == menuIds[j])
                                        treeNode.children[i].checked = true
                                    zTree.updateNode(treeNode.children[i]);
                                }
                            }
                        },
                        //onCheck: click
                    },
                    check: {
                        enable: true,
                        chkboxType: { "Y": "ps", "N": "ps" }
                    },
                    view: {
                        //showIcon: false
                    }
                };
                var zTree = $.fn.zTree.init($("#zTree"), setting, data);
                var menuIds = "{{ $ids }}".split(','); //后端返回選中ids
                for(var i = 0; i < menuIds.length; i++) {

                    //zTree.checkNode(node, true, true);

                    var node = zTree.getNodeByParam("id", menuIds[i]);
                    if(node != null) {
                        zTree.checkNode(node, true)
                    }
                }
            }
        });
    }

</script>

HTML 頁面 寫法

        <div class="layui-form-item">
            <label class="layui-form-label">部門</label>
            <div class="layui-inline">
                <div id="content">
                    <ul id="zTree" class="zTree"></ul>
                </div>
{{--                <input type="text" name="dept" lay-verify="required" placeholder="請選擇部門" autocomplete="off" class="layui-input" readonly="true">--}}
{{--                <div id="treeid" class="demo-input-tree demo-tree-box"></div>--}}

            </div>
        </div>

頁面效果

image.png