在layui表格默认合计行下方增加自定义合计行（统计复选框选中数据合计）

在layui表格默认合计行下方增加自定义合计行（统计复选框选中数据合计）

需求：原表格基础上加一行选中数据后的数据统计

思路：在默认合计下方同级标签下加一个选中同级标签，并动态增加dom和数据，难点是如何让选中合计行可以随表格默认页面滚动轮进行滚动

/**************** css ****************/
.layui-table-total-sel {
    position: relative;
    overflow: hidden;
    background-color: #fafafa;
    border-top: 1px solid #eee;
}

.custom-total-container {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    scrollbar-width: none; /* 隐藏滚动条 - Firefox */
    -ms-overflow-style: none; /* 隐藏滚动条 - IE/Edge */
}

.custom-total-container::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 - Chrome/Safari */
}

.layui-table-total-sel table {
    table-layout: fixed;
    margin-bottom: 0;
    background-color: #fafafa;
    width: auto;
}

.layui-table-total-sel table tr td {
    height: 39.5px;
    border-right: 1px solid #eee;
    text-align: center;
}

.layui-table-total-sel table tr td.selTdName {
    color: #89A28C;
}
    
    
/**************** html ****************/
 <div class="layui-form-item sub-right"
    id="day_table_di">
      <table class="layui-hide" id="day_table" lay-filter="day_table"></table>
  </div>


/**************** js ****************/
// 创建渲染实例
table.render({
    elem: '#day_table'
    , data: res.data.data
    , title: 'xxx表'
    , totalRow: true
    , cols: [fiels]
    , id: tabid + '_table'
    , toolbar: '#toolbarDemo'
    // , defaultToolbar: ['filter', 'exports', 'print']
    , defaultToolbar: ['filter', {
        title: '导出',
        layEvent: 'MY_EXPORT',
        icon: 'layui-icon-export'
    }, 'print']
    ,limit:limit
    ,done: function (res, curr, count) {
        //加一行合计列表
        hejiRow()
    }
});




// 增加合计行
function hejiRow(){
    // 获取相关元素
    const $tableContainer = $(".sub-right").find(".layui-form.layui-table-view");
    const $tableBox = $tableContainer.find(".layui-table-box");
    const $main = $tableBox.find('.layui-table-main');
    const $totalRow = $tableContainer.find(".layui-table-total");

    // 创建自定义合计行容器
    let selTableDom = `
        <div class="layui-table-total layui-table-total-sel">
            <div class="custom-total-container">
                <table class="layui-table" >
                    <tr>
                    <td><div style="width:48px">&nbsp;</div></td>
                    <td class="selTdName"><div style="width:150px">所选合计</div></td>
        `;

    // 动态生成列（使用表头作为参考）
    let tdlenth= $totalRow.find('.layui-table tr td').length;
    $totalRow.find('.layui-table tr td').each(function(index) {
        if(index>1 && index<tdlenth-1){
            // 数据列
            selTableDom += `<td><div class="tdDivVal" style="width:130px">0</div></td>`;
        } else if(tdlenth==index+1){
            // 数据列(最后一列)
            selTableDom += `<td><div class="tdDivVal" style="width:131px">0</div></td>`;
        }
    });

    selTableDom += '</tr></table></div></div>';

    // 插入到默认合计行下方
    $totalRow.after(selTableDom);

    // 获取表头宽度（包含滚动条区域）
    const headerWidth = $tableBox.find('.layui-table-header').width();
    // 设置自定义行容器宽度与表头一致
    $('.layui-table-total-sel .custom-total-container').width(headerWidth);
    const $totalContainer = $('.layui-table-total-sel .custom-total-container');
    // 确保元素存在
    if ($main.length && $totalContainer.length) {
        $main.on('scroll', function() {
            const scrollLeft = this.scrollLeft; // 或 $(this).scrollLeft()
            $totalContainer.scrollLeft(scrollLeft); // jQuery 设置 scrollLeft
        });
    } else {
        console.error("未找到所需元素");
    }
}

// 复选框变化时获取 所选数据集合,数据处理及渲染
table.on('checkbox(day_table)', function(){
    let tableStatus = table.checkStatus(tabid + '_table').data;
    let result=[]

    if(tabid=='month' || tabid=='year'){
        allTime=[]
        for (var i = day1; i <= day2; i++) {
            allTime.push(('0' + i).slice(-2))
        }
    }

    // 列计算
    result = allTime.map(time => {
        let sum = 0;
        tableStatus.forEach(device => {
            // 检查当前时间点是否存在于设备对象中
            // if (device.hasOwnProperty(time) && typeof device[time] === 'number') {
            if (device.hasOwnProperty(time)) {
                sum += Number(device[time]);
            }
        });
        return sum.toFixed(2);
    });

    // 合计计算
    let sum1 = 0;
    tableStatus.forEach(device => {
        // 检查当前时间点是否存在于设备对象中
        if (device.hasOwnProperty('total') && typeof device['total'] === 'number') {
            sum1 += device['total'];
        }
    });
    result.push(sum1.toFixed(2))

    // 获取相关元素
    $(".sub-right .custom-total-container .tdDivVal").each(function(index) {
        $(this).text(result[index]);
    });
});