layui通过下拉框动态渲染多级表头

我就是我 2021-09-30 04:48 518阅读 0赞

### layui通过下拉框动态渲染多级表头 ###

*  之前遇到的坑 直接上图
 *   *  解决方法

# 之前遇到的坑 直接上图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]

选择第二个下拉框时  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]  
选回第一个下拉框时 表头全乱了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]  
原本写法是 通过监听下拉框控制表格重载 报错

## 解决方法 ##

通过监听下拉框 然后每次都重新表格实例化覆盖掉

// 监听 开支项目下拉框
                form.on("select(select_kaizhi)",function(data){
                    switch(data.value){
                        case "个人办公用品":
                        renderCols(data.value)
                        break;
                        case "省内差旅费":
                        renderCols(data.value)
                        break;
                        case "招待费":
                        renderCols(data.value)
                        break;
                        case "宣传用品费":
                        renderCols(data.value)
                        break;
                        case "内部会议费":
                        renderCols(data.value)
                        break;
                        case "教育培训费":
                        renderCols(data.value)
                        break;
                    }
                })

function renderCols(name){ 
                    if(name=="个人办公用品" || name=="省内差旅费" || name=="宣传用品费"){
                        var arr=[[  // 个人办公用品  省内差旅费  宣传用品费
                                { field:"val01",title:"部门",rowspan:"2",align:'center' },
                                { field:"val02",title:name+"",colspan:"3",align:'center' }
                            ],[
                                { field: 'val02',title: '2019年预算',align: 'center'},
                                { field: 'val03',title: '实际执行数',align: 'center'},
                                { field: 'val04',title: '预算执行率%',align: 'center'}
                        ]]
                        TableReload(arr)
                    }
                    if(name=="招待费"){
                        var arr=[[
                            { field:"val01",title:"部门",rowspan:"3",align:'center' },
                            { title:"招待费",colspan:"6",align:'center' }
                        ],[
                            { title:"商务接待",colspan:"3",align:'center' },
                            { title:"公务接待",colspan:"3",align:'center' }
                        ],[
                            { field: 'val02',title: '2019年预算',align: 'center'},
                            { field: 'val03',title: '实际执行数',align: 'center'},
                            { field: 'val04',title: '预算执行率%',align: 'center'},
                            { field: 'val05',title: '2019年预算%',align: 'center'},
                            { field: 'val06',title: '实际执行数%',align: 'center'},
                            { field: 'val07',title: '预算执行率%',align: 'center'}
                        ]]
                        TableReload(arr)
                    }
                }

function TableReload(cols){
                    // 表格实例化
                    tableObj = table.render({
                        elem: '#data_table',
                        id:'data_table',
                        title: '部门费用预算表',
                        cols: cols,
                        cellMinWidth: 100,
                        toolbar: '#toolbar',
                        defaultToolbar: ['exports'],
                        totalRow: false ,
                        page: true ,
                        limit: 50 ,
                        limits: [50, 100, 200, 1000] ,
                        skin: 'line',
                        data: [],
                        even: true
                    });
                }

后面表头数据就完美解决了  
之前用表格重载的方法table.reload(); 解决不了  
后面用控制DOM 节点的方法 每次删除再添加 还是报错  
借鉴：[https://www.cnblogs.com/yysbolg/p/10654281.html][https_www.cnblogs.com_yysbolg_p_10654281.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190724160830902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190724160910333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]: /images/20210724/1df8b47699a34bfe999d1ba6b3f3a0ea.png
[https_www.cnblogs.com_yysbolg_p_10654281.html]: https://www.cnblogs.com/yysbolg/p/10654281.html