SOURCE

layui.use(['jquery','element','tree','layer','table', 'form', 'upload'],function(){
    var time = new Date().getTime();
    var $ = layui.jquery;
    var data = [
        {
            id: 'root1'
            ,title: '国际新闻'
            ,spread: true
            ,field: [ 'node' ]
            ,children: [
                {
                    title: '亚太地区'
                    ,id: '111'
                    ,spread: true
                    ,children: [
                        {
                            title: '正文'
                            ,id: '1112'
                            ,spread: true
                        }
                    ]
                }
            ]
        }
        ,{
            id: 'root2'
            ,title: 'title2'
            ,field: [ 'node' ]
            ,children: [
                {
                    title: '子节点1'
                    ,id: '1111'
                    ,children: [
                        {
                            title: '子节点2'
                            ,id: '1112'
                            ,children: [
                                {
                                    id: 'title3'
                                    ,title: 'title3'
                                    ,field: [ 'node' ]
                                    ,children: [
                                        {
                                            title: '子节点13'
                                            ,id: '1113'
                                            ,children: [
                                                {
                                                    title: '子节点23'
                                                    ,id: '11123'
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ];
    layui.tree.render({
        elem: '#test1'
        ,data: data
        ,showLine: true
        ,click: function(obj){
            console.log(obj.data); //得到当前点击的节点数据
            console.log(obj.state); //得到当前节点的展开状态：open、close、normal
            console.log(obj.elem); //得到当前节点元素
            
            console.log(obj.data.children); //当前节点下是否有子节点

            //获得选中的节点
            //var checkData = layui.tree.getChecked('#test1');
            //console.log(checkData);
        }
    });
    var tableData = [
        {
            id: 1
            ,name: '我的文件夹'
            ,type: '文件夹'
            ,count: 10
            ,size: '10MB'
            ,create_date: '2020-12-4 14:21:32'
            ,update_date: '2020-12-4 14:21:51'
        }
        ,{
            id: 10
            ,name: 'Bin'
            ,type: '文件夹'
            ,count: 100
            ,size: '10MB'
            ,create_date: '2020-12-4 14:21:32'
            ,update_date: '2020-12-4 14:21:51'
        }
        ,{
            id: 11
            ,name: 'FileNames'
            ,type: '文件夹'
            ,count: 1
            ,size: '10MB'
            ,create_date: '2020-12-4 14:21:32'
            ,update_date: '2020-12-4 14:21:51'
        }
        ,{
            id: 2
            ,name: 'text.txt'
            ,type: '文本'
            ,count: 1
            ,size: '100KB'
            ,create_date: '2020-12-4 14:21:32'
            ,update_date: '2020-12-4 14:21:51'
        }
        ,{
            id: 3
            ,name: 'mybag.zip'
            ,type: '压缩文件'
            ,count: 1
            ,size: '100MB'
            ,create_date: '2020-12-4 14:21:32'
            ,update_date: '2020-12-4 14:21:51'
        }
        ,{
            id: 4
            ,name: 'config.ini'
            ,type: '配置文件'
            ,count: 1
            ,size: '100KB'
            ,create_date: '2020-12-4 14:21:32'
            ,update_date: '2020-12-4 14:21:51'
        }
        ,{
            id: 5
            ,name: 'data.json'
            ,type: '数据文件'
            ,count: 1
            ,size: '100KB'
            ,create_date: '2020-12-4 14:21:32'
            ,update_date: '2020-12-4 14:21:51'
        }
    ];
    
    layui.table.render({
        elem: '#fileList'
        ,id: 'fileslist'
        ,height: $('.layui-body').height()-50
        ,page: true
        ,toolbar: $('#tempToolbar').html()
        ,defaultToolbar: [
            'filter'
            ,{
                title: '创建压缩包'
                ,layEvent: 'zip'
                ,icon: 'layui-icon-component'
            }
            ,{
                title: '批量重命名'
                ,layEvent: 'update'
                ,icon: 'layui-icon-edit'
            }
            ,{
                title: '批量删除'
                ,layEvent: 'delete'
                ,icon: 'layui-icon-delete'
            }
            ,{
                title: '复制'
                ,layEvent: 'copy'
                ,icon: 'layui-icon-template-1'
            }
            ,{
                title: '移动'
                ,layEvent: 'move'
                ,icon: 'layui-icon-template'
            }
        ]
        ,cols: [[
            {
                checkbox: true
            }
            ,{
                field: 'name'
                ,title: '名称'
                ,edit: 'text'
            }
            ,{
                field: 'type'
                ,title: '类型'
                ,sort: true
            }
            ,{
                field: 'count'
                ,title: '数量'
            }
            ,{
                field: 'size'
                ,title: '大小'
                ,sort: true
            }
            ,{
                field: 'create_date'
                ,title: '创建日期'
                ,sort: true
            }
            ,{
                field: 'update_date'
                ,title: '修改日期'
                ,sort: true
            }
            ,{
                flexd: 'right'
                ,width: 160
                ,title: '操作'
                ,templet: '#tempOptItem'
            }
        ]]
        ,data: tableData
    });
    //监听事件
    $('form input[lay-filter=inputKey]').bind('input porpertychange', function(obj){
        var val = $(obj.currentTarget).val();
        console.log('查找当前目录下的 '+val);
    });
    layui.form.on('submit(formSearch)', function(obj){
        console.log(obj.field);
        var val = obj.field.keyword;
        console.log('查找当前目录下的所有 '+val);
        return false;
    });
    layui.form.on('submit(formNew)', function(obj){
        console.log(obj.field);
        switch (obj.field.new){
            case 'file':
                var filename = obj.field.keyword;
                if (filename.lastIndexOf('.')==-1){
                    layui.layer.msg('文件名必须有后缀', {icon: 5});
                    break;
                }
                console.log('新建文件 '+filename);
                break;
            default:
                console.log('新建文件夹 '+obj.field.keyword);
        }
        return false;
    });
    layui.upload.render({
        elem: '#uploadFile'
        ,url: '/upload'
        ,accept: 'file' //允许上传的文件类型
        ,size: 50 //最大允许上传的文件大小
        ,done: function(res, index, upload){ //上传后的回调
            console.log(res);
            debugger;
        }
        ,error: function(res) {
            console.log(res);
            layui.layer.msg('上传出错', {icon: 5});
            debugger;
        }
    });
    //监听工具条 
    layui.table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        console.log(obj);
    });
    layui.table.on('toolbar(test)', function(obj){
        var layer = layui.layer;
        var checkeItems = function() {
            //获取到表格所有的选中行相关数据
            var checkStatus = layui.table.checkStatus(obj.config.id);
            if (checkStatus.data.length <= 0) {
                layer.msg('请先选中项', {icon: 5});
                return true;
            }
            console.log(checkStatus);
            return false;
        };
        switch(obj.event){
            case 'delete':
                if (checkeItems()) break;
                layer.msg('批量删除');
                break;
            case 'copy':
                if (checkeItems()) break;
                layer.msg('复制');
                break;
            case 'move':
                if (checkeItems()) break;
                layer.msg('移动');
                break;
            case 'zip':
                if (checkeItems()) break;
                layer.msg('创建压缩包');
                break;
            case 'update':
                if (checkeItems()) break;
                layui.layer.open({
                    title: '批量重命名文件'
                    ,content: $('#tempUpdateFile').html()
                    ,success: function(layero,index) {
                        layui.form.on('submit(formUpdateBox)', function(res){
                            console.log(res);
                            return false;
                        });
                    },
                    yes: function(index, layero){
                        //do something
                        layero.find('[type=submit]').click();
                        layui.layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
                break;
            default:
            console.log('toolbar obj');
            console.log(obj);
        };
    });
    layui.table.on('checkbox(test)', function(obj){
        console.log(obj.checked); //当前是否选中状态
        console.log(obj.data); //选中行的相关数据
        console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    });
    layui.table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
        console.log(obj.value); //得到修改后的值
        console.log(obj.field); //当前编辑的字段名
        console.log(obj.data); //所在行的所有相关数据  
    });
    //layui.element.render('(toolbar)');
    var h = new Date().getTime() - time;
    //time
    layui.layer.msg('ready:' + h + 'ms');
})

<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo"><i class="layui-icon layui-icon-export"></i>&nbsp;&nbsp;文件管理&nbsp;v0.1 beta</div>
                <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                    <img src="//cdn.jsrun.top/avatar/26322_1582213521787.png" class="layui-nav-img">
                    TA远方
                    </a>
                    <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">退了</a></li>
                </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <div id="test1"></div>
            </div>
        </div>
        <div class="layui-body">
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <div class="layui-fluid">
                <span class="layui-breadcrumb">
                    <a href="">.</a>
                    <a href="">国际新闻</a>
                    <a href="">亚太地区</a>
                    <a><cite>正文</cite></a>
                </span>
                <hr/>
            </div>
            <!-- <div class="layui-fluid">
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-sm" title="列表模式">
                        <i class="layui-icon layui-icon-table"></i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" title="视图模式">
                        <i class="layui-icon layui-icon-app"></i>
                    </button>
                </div>
                <hr/>
            </div> -->
            <div class="layui-fluid">
                <div id="fileList" lay-filter="test"></div>
            </div>
        </div>
        <!-- footer -->
        <div class="layui-footer">
            <div class="layui-row">
                <div class="layui-col-xs4 layui-col-sm2">
            <span>存储空间总占用比: 130MB/1GB</span>
                </div>
                <div class="layui-col-xs8 layui-col-sm10">
            <div class="layui-progress layui-progress-big" lay-showPercent="true">
                <div class="layui-progress-bar layui-bg-blue" lay-percent="13%"></div>
            </div>
                </div>
            </div>
        </div>
        <!-- footer2 -->
    </div>
    <script type="text/html" id="tempToolbar">
        <div class="layui-fluid" lay-filter="toolbar">
            <form class="layui-form">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" id="uploadFile">
                        <i class="layui-icon layui-icon-upload-circle"></i> 上传
                    </button>
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="输入关键词搜索" value="" name="keyword" lay-filter="inputKey" lay-verify="required" required />
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="formSearch">
                        <i class="layui-icon layui-icon-search"></i> 查找
                    </button>
                </div>
                <div class="layui-input-inline" style="width: 90px;">
                    <select name="new">
                        <option value="fileder">文件夹</option>
                        <option value="file">文件</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="formNew">
                        <i class="layui-icon layui-icon-add-1"></i> 新建
                    </button>
                </div>
            </form>
        </div>
    </script>
    <script type="text/html" id="tempOptItem">
         <a href="#{{d.id}}" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
         {{# if (d.type == '压缩文件') { }}
            <a href="#{{d.id}}" class="layui-btn layui-btn-xs layui-btn-warm" lay-event="download">下载</a>
            <a href="#{{d.id}}" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="unzip">解压</a>
        {{# } else if (d.type == '文件夹') { }}
            <a href="#{{d.id}}" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="open">打开</a>
         {{# } else { }}
            <a href="#{{d.id}}" class="layui-btn layui-btn-xs layui-btn-warm" lay-event="download">下载</a>
            <a href="#{{d.id}}" class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
         {{# } }}
    </script>
    <script type="text/html" id="tempUpdateFile">
        <form class="layui-form">
            <div class="layui-form-item">
                
            </div>
            <div class="layui-form-item">
                <input type="text" class="layui-input" name="name" value="" />
            </div>
            <input type="submit" class="layui-hide" lay-filter="formUpdateBox" />
        </form>
    </script>
</body>

.layui-side-scroll{
    background-color: #ebebeb;
    overflow-x: auto;
}
.layui-body{
    padding-top: 8px;
}
.layui-footer .layui-progress{
    margin: 14px;
}