hg-layui-admin-ui
/
Tree1.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="hg-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./lib/admin/admin.css" media="all">
    <link rel="stylesheet" href="./lib/Scrollbar/jquery.scrollbar.css">
    <script type="text/javascript" src="./lib/admin/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./lib/Scrollbar/jquery.scrollBar.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js"></script>
    <script type="text/javascript" src="./lib/admin/admin.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    <style>
        .demo-tree{
            width: 500px; height: 500px;
            padding-top: 15px;
        }
        .demo-tree-box{
            width: 500px; height: 400px;border: 1px #eee solid;overflow-y: auto;
        }
        .demo-input-tree{
            height: auto;
            width: 100%;
            display: none;
            position: absolute;
            top: 100%;
            background-color: #fff;
            z-index: 100;
            max-height: 500px;
        }
        .layui-input{
            width: 500px;
            cursor: pointer;
        }
    </style>
</head>

<body class="layui-body-content">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="iconfont">&#xe6ac;</i>树形组件
                <span class="layui-layout-right">
                    <a href="javascript:;" hg-event="fullscreen">
                        <i class="layui-icon layui-icon-screen-full"></i>
                    </a>
                </span>
            </div>
            <div class="layui-card-body">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">部门：</label>
                        <div class="layui-inline">
                            <input type="text" name="dept" lay-verify="required" placeholder="请选择部门" autocomplete="off" class="layui-input" readonly="true">
                            <div id="treeinputid" class="demo-input-tree demo-tree-box"></div>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-lg layui-btn-normal" lay-submit lay-filter="sreach"><i
                                    class="layui-icon layui-icon-lg">&#xe615;</i></button>
                        </div>
                    </div>
                </div>
                <div class="">
                    <button class="layui-btn layui-btn-lg layui-btn-normal"
                        onclick="getChecked()"><i
                            class="layui-icon">&#xe654;</i>获取选中</button>
                    <button class="layui-btn layui-btn-lg layui-btn-warm" onclick="setChecked()"><i
                            class="layui-icon">&#xe642;</i>设置节点勾选</button>
                    <button class="layui-btn layui-btn-lg layui-btn-danger" onclick="reload()"><i
                            class="layui-icon">&#xe640;</i>实例重载</button>
                </div>
                <div class="demo-tree">
                    <div id="treeid" class="demo-tree demo-tree-box"></div>
                </div>
            </div>
        </div>
        <div class="layui-floor">
            <blockquote class="layui-elem-quote layui-quote-nm">Copyright©2019-2020, 本系统由@一如既往，提供技术支持！
            </blockquote>
        </div>
    </div>
</body>
<script>
    var data = [{
        id: 'hg-100',
        field: '1',
        level: '1',
        title: '父节点100',
        spread: true,
        children: [{
            id: 'hg-100101',
            field: '3',
            level: '2',
            title: '子节点100101',
            children: [{
                id: 'hg-100101101',
                field: '4',
                level: '3',
                title: '子节点100101101'
            }, {
                id: 'hg-100101102',
                field: '5',
                level: '3',
                title: '子节点100101102'
            }, {
                id: 'hg-100101103',
                field: '6',
                level: '3',
                title: '子节点100101103'
            }]
        }]
    }, {
        id: 'hg-200',
        field: '2',
        level: '1',
        title: '父节点200',
        lazy: true
    }];
    //treeid
    var tree = hg.tree.datatree('treeid', data, true);
    tree.onspread = function() {
        var obj = this;
        //模拟post后台数据，延迟2秒
        setTimeout(() => {
            var data = getTreeJson(obj.data.id); //异步获取数据
            obj.lazytree(data);
        }, 2000);
    }
    tree.onclick = function() {
        var obj = this;
        console.log(obj.data); //得到当前点击的节点数据
        console.log(obj.state); //得到当前节点的展开状态：open、close、normal
        console.log(obj.elem); //得到当前节点元素
        console.log(obj.data.children); //当前节点下是否有子节点
    }
    tree.oncheck = function() {
        var obj = this;
        console.log(obj.data); //得到当前点击的节点数据
        console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
        console.log(obj.elem); //得到当前节点元素
    }

    // 模拟后台返回数据
    function getTreeJson(id) {
        if (id === 'hg-200') {
            return [{
                id: 'hg-200101',
                level: '2',
                title: '子节点200101'
            }, {
                id: 'hg-200102',
                level: '2',
                title: '子节点200102',
                lazy: true
            }];
        }
        if (id === 'hg-200102') {
            return [{
                id: 'hg-200102101',
                level: '3',
                title: '子节点200102101'
            }, {
                id: 'hg-200102102',
                level: '3',
                title: '子节点200102102',
                lazy: true
            }];
        }
        if (id === 'hg-200102102') {
            return [{
                id: 'hg-200102102101',
                level: '4',
                title: '子节点200102102101'
            }, {
                id: 'hg-200102102102',
                level: '4',
                title: '子节点200102102102',
            }];
        }
    }
    //获得选中的节点
    function getChecked(){
        var checkData = tree.getChecked();
        hg.msg(JSON.stringify(checkData));
    }
    //设置节点勾选
    function setChecked(){
        tree.setChecked(['hg-100101101','hg-100101102']);
    }
    //实例重载
    function reload(){
        tree.reload();
        hg.msg('重载成功！')
    }


    //treeinput
    var treeinput;
    $("[name='dept']").on("click",function (e) {
        e.stopPropagation();
        const deprt = this;
        if(!treeinput) {
            treeinput = hg.tree.datatree('treeinputid', data, true);
            treeinput.onspread = function() {
                var obj = this;
                //模拟post后台数据，延迟2秒
                setTimeout(() => {
                    var data = getTreeJson(obj.data.id); //异步获取数据
                    obj.lazytree(data);
                }, 2000);
            }
            treeinput.onclick = function() {
                var obj = this;
                console.log(obj.data); //得到当前点击的节点数据
                console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                console.log(obj.elem); //得到当前节点元素
                console.log(obj.data.children); //当前节点下是否有子节点
            }
            treeinput.oncheck = function() {
                var obj = this;
                var checkData = treeinput.getChecked();
                var map = getmap(checkData);
                $(deprt).val(map.value.join(','));
            }
        }
        $("#treeinputid").toggle();
    })

    //监听表单提交事件
    hg.form.onsubmit('sreach', function (data) {
        $("#treeinputid").hide();
        var checkData = treeinput.getChecked();
        var map = getmap(checkData);
        var init = map.result;
        hg.msg(JSON.stringify(init));
    });

    const getmap = (target, result = []) => {
        layui.each(target,(i,e)=>{
            e.id && result.push({id:e.id,title:e.title});
            e.children && getmap(e.children, result);
        });
        let titles = result.map(e=>{return e.title});
        return {value:titles,result:result};
    };
</script>

</html>