layui.table动态添加子级

易_帆

已于 2024-07-26 11:25:00 修改

阅读量885

点赞数 23

文章标签： layui layui.js javascript html5

于 2024-04-09 21:13:17 首次发布

本文链接：https://blog.csdn.net/qq_41887282/article/details/137567307

版权

本文介绍了如何使用layui的table组件在HTML中实现动态添加和展开子级功能，通过JavaScript控制表格数据的渲染和层级结构的显示与隐藏。

摘要由CSDN通过智能技术生成

layui.table动态添加子级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.8/css/layui.min.css" rel="stylesheet">
<body>
<div id="test"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.8/layui.min.js"></script>
<script>
    layui.use(['table'], function () {
        var $ = layui.jquery,
            table = layui.table;
        let data =  [
            {
                "id": 1,
                "name": "测试1",
                "pid": 0
            },
            {
                "id": 2,
                "name": "测试2",
                "pid": 0
            },
            {
                "id": 3,
                "name": "测试3",
                "pid": 0
            },
            {
                "id": 4,
                "name": "测试4",
                "pid": 0
            }
        ]
        table.render({
            elem: '#test',
            id: 'test',
            // url: './demo.json',
            data: data,
            cols: [[
                {
                    width: 50,
                    style: 'cursor: pointer;',
                    event: 'expand',
                    templet: function (d) {
                        if (d.pid === 0) {
                            if (d.expand) {
                                return `<div style="width: 100%;text-align: center"><i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe625;</i></div>`
                            } else {
                                return `<div style="width: 100%;text-align: center"><i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe623;</i></div>`
                            }
                        } else {
                            return `<div style="width: 100%;text-align: center"><i class="layui-icon" style="font-size: 20px; color: #c2c2c2">&#xe621;</i></div>`
                        }
                    }
                },
                {field: 'id', title: 'ID', templet: function (d) {
                        if (d.pid === 0) {
                           return d.id
                        } else {
                            return '子级'+d.id
                        }
                    }},
                {field: 'name', title: '名称'}
            ]],
            page: true,
            limit: 20,
            limits: [10, 15, 20, 25, 50, 100],
            height: '400px'
        })
        
        table.on('tool(test)', function (obj) {
            if (obj.event === 'expand'){
                let index = obj.index;
                let data = obj.data;
                if (data.pid !== 0){
                    return false;
                }
                let tableId = obj.config.id
                let tabEle = $(`[lay-id="${tableId}"] .layui-table-main`);
                let top = tabEle.scrollTop()
                
                if (table.cache[tableId][index]['expand']){
                    table.cache[tableId][index]['expand'] = false
                    let list = [];
                    //移除追加的子元素
                    table.cache[tableId].forEach((item) => {
                        if (item.pid === 0 || item.pid !== data.id){
                            list.push(item)
                        }
                    })
                    table.cache[tableId] = list
                    table.renderData(tableId);
                    tabEle.scrollTop(top);
                }else{
                    //模拟子数据
                    let child = [];
                    for (let i = 1; i < 100; i++) {
                        child.push({
                            id: data.id + '-' + i,
                            name: '测试'+ data.id + '-' + i,
                            pid: data.id
                        })
                    }
                 
                    table.cache[tableId][index]['expand'] = true
                    table.cache[tableId].splice(index+1, 0, ...child)
                    table.renderData(tableId);
                    tabEle.scrollTop(top);
                }
            }
        })
    });
</script>
</body>
</html>