layui table动态生成表格及筛选列后打印

        <table id="tbList" lay-filter="tbList"></table>
<script>
    layui.config({
        base: '/lib/layui/',   // 模块所在目录
    }).extend({
        soulTable: 'soulTable'  // 模块别名
    });

    layui.use(['table', 'form', "soulTable", "laydate", "layer"], function () {

        var table = layui.table;
    var soulTable = layui.soulTable;
        var form = layui.form;
        // 动态生成表头
        var columnArr = [[]]; 
        var id = getQueryString("id");
        var type = getQueryString("type");
        var funName = "GetPlanOrderDetail";
        if (type == "read") {
            $("#inStock").css("display", "none");
            funName = "GetInStockDetail";
        }
        //form.on('submit(searchBtn)', function (data) { columnArr = [[]];
        //    // 动态加载列名
            $.ajax({
                url: '/MainIndex/' + funName+'?id=' + id ,
                type: 'get',
                async: false,
                success: function (res) {
                    if (!res) {
                        return
                    }
                    $("#orderCode").text("订单编码：" + res.orderCode);
                    $("#voucherdate").text("单据日期：" + res.voucherdate);
                    $("#clerkUser").text("经办人：" + res.clerkUser);
                    $("#settlecustomer").text("结算客户（开票全称）：" + res.settlecustomer);
                    $("#linkMan").text("联系人及电话：" + res.linkMan);
                    $("#address").text("送货详细地址： " + res.address);
                    $("#note").text("备注：  " + res.note);
                    $("#ksRemark").text("款式说明：" + res.ksRemark);
                    var tbData = JSON.parse(res.data);
                    if (!tbData) {
                        layer.msg('暂无数据！');
                        return;
                    }
                    var keys = Object.keys(tbData[0]);
                    console.log('keys', tbData.length);
                    columnArr = [[]];
                    //columnArr[0] = [];

                    for (var i = 0; i < keys.length; i++) {
                        if (keys[i] == "id") {
                            columnArr[0].push({ fixed: 'left', field: 'id', title: "序号", align: 'center' });
                        }
                        else if (keys[i] == "Department") {
                            columnArr[0].push({ fixed: 'left', field: 'Department', title: "部门", align: 'center' });
                        }
                        else if (keys[i] == "UserName") {
                            columnArr[0].push({ fixed: 'left', field: 'UserName', title: "姓名", align: 'center' });
                        }
                        else if (keys[i] == "sex") {
                            columnArr[0].push({ fixed: 'left', field: 'sex', title: "性别", align: 'center' });
                        }
                        else if (keys[i] == "ids" || keys[i] == "size" || keys[i] =="LAY_TABLE_INDEX") {
                            continue;
                        }
                        else if (keys[i].indexOf("00") > 0) {
                            var title = keys[i].split('00')[1];
                            if (title != "") {
                                columnArr[0].push({ fixed: 'left', field: `${keys[i]}`, title: `${title}`, align: 'center' });
                            }
                        }
                        else { columnArr[0].push({ fixed: 'left', field: `${keys[i]}`, title: `${keys[i]}`, align: 'center', edit: 'text'}); }
                    };
                    table.render({
                        elem: "#tbList"
                        //,autoColumnWidth: {
                        //    init: true
                        //}
                        , id: "tbListExport" 
                        , cellMinWidth: 100
                        , cols: columnArr
                        //, toolbar: true
                        , toolbar: `<div ><a class="layui-btn layui-btn-sm" id="tableexport"><i class="layui-icon layui-icon-print"></i>打印</a>
                            <a class= "layui-btn layui-btn-sm" id="inStock" > <i class="layui-icon layui-icon-home"></i>入库</a></div > `
                        , data: tbData
                        , page: false
                        , height: 'full-155'
                        , limit: 9999
                        ,done: function (res, curr, count) {
                            soulTable.render(this);
                        }
                    });
                }
                })
        //    });
        //})
        //入库
        $("#inStock").click(function () {
            var delindex = layer.confirm('确认将当前的数据进行入库吗?', function (index) {
            var tbData = table.cache['tbListExport']; // 获取当前表格的缓存数据
            $.ajax({
                url: '/MainIndex/InStockSave',
                type: 'post',
                data: { id: getQueryString("id"), data: JSON.stringify(tbData)},
                async: false,
                success: function (res) {
                    layer.msg(res);
                }
            })
            })
        });
        //打印
        $("#tableexport").click(function () {
            var cellHtml = '';
            var tdHtml = '';
            var v = document.createElement("div");
            var hts = document.getElementsByClassName('layui-table-box')[0];
            //var thead = hts.getElementsByTagName('thead')[0];
            var tr = hts.getElementsByTagName('tr')[0];
            var th = tr.getElementsByTagName('th');
            var columnNames = [];

            for (var i = 0; i < th.length; i++) {
                if (th[i].className != "layui-hide") {
                    columnNames.push(th[i].textContent);
                    cellHtml = cellHtml + `<th align="center" style="background-color: #d7d7d7;width: 50px;"  >` + th[i].textContent + `</th>`;
                }
            }
            var tbData = table.cache['tbListExport']; // 获取当前表格的缓存数据
            var rowhtml = '';
            tbData.forEach(item => {
                var it = item[columnNames[0]];
                rowhtml = '';
                rowhtml = `<tr style="background-color:#E1E1E1;font-size: 16px;font-weight:bold;">`;
                for (var k = 0; k < columnNames.length; k++) {
                    tdHtml += ` <td align="center">${item[columnNames[k]]}</td>`
                }
                rowhtml += `</tr>`;
                tdHtml += rowhtml;
            });
            var baseInfohtml = document.getElementById("baseInfo").innerHTML;
            var f = //绘制表格
                ["<head>", ` <style> </style>
    `+ baseInfohtml + `
                             <div >
<table border="1" cellpadding="10" cellspacing="0"  >
                <THEAD style="display:table-header-group;"><!-- 打印的每一页都有的抬头 --> 
                                       <tr>
                                           `+ cellHtml + `</THEAD> <tbody>
                                       </tr> `+ tdHtml + `  </tbody></table>
                             </div>  `,
                    "</head>"
                ].join("");
            console.log(f);
            $(v).find("th.layui-table-patch").remove();
            $(v).find(".layui-table-col-special").remove();
            // var h = window.open("打印窗口", "_blank");

            var h = window.open("Print_window", "_blank");
            h.document.write(f + $(v).prop("outerHTML"));
            h.document.close();

            h.print();
            h.close();

        });
    })
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
</script>