zoukankan      html  css  js  c++  java
  • layui table 打印表格

    如题,layui 的表格打印的方式是将表格的数据重新组合成一个新页面,但是只能打印当前页面的内容,讲真不够用,找了一上午找了一些说是自己改的,但是都不满意,没什么用,还是只能打印当前页的内容,我的想法是写一个函数,传递显示的列和需要打印的数据,直接打印。就像某些同学要的那种打印全部数据吧。废话不多说了,直接上代码吧。

    var cols = [[
                        {type: 'checkbox'}
                        ,{field:'id', title:'ID'}
                        ,{field:'title', title:'标题'}
                        ,{field:'short_title', title:'短标题'}
                        ,{field:'keyword', title:'关键字'}
                        ,{field:'seo_title', title:'seo标题'}
                        ,{field:'seo_keyword', title:'seo关键字'}
                        ,{field:'thumbnail', title:'缩略图'}
                        ,{field:'date', title:'显示时间'}
                        ,{field:'views', title:'观看次数'}
                        ,{field: 'sort', title:'排序'}
                        ,{field: 'create_time', title:'创建时间'}
                        ,{field: 'lb', title:'类别'}
                        ,{field: 'zhiding', title:'置顶'}
                        ,{title:'操作', toolbar: '#barDemo'}
                    ]];
    table.on('toolbar(table)',function(obj){
                if(obj.event == 'LAYTABLE_TIPS')(obj.event == 'print2'){
                    $.ajax({
                        url:'/admin/articleAll',
                        type:'get',
                        success:res=>{
                            print(res,cols)
                        }
                    })
                }
            })
    function print (res,cols)
            {
                var v = document.createElement("div");
                var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}", "table{ 100%; border-collapse: collapse; border-spacing: 0;}", "th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}", "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", "</style>", "</head>"].join("");
                thead = `<h1 style="text-align: center;">这是标题</h1><table><thead><tr>`
                for(let v2 of cols[0]){
                    if((v2.type == 'checkbox') || v2.hasOwnProperty('toolbar')){
                        thead += `<th class="layui-table-col-special">空列</th>`
                    }else{
                        thead += `<th>${v2.title}</th>`
                    }
                }
                thead += `</tr></thead></table>`
                $(v).append(thead);
                var tr = `<tbody>`
                for(let v of res){
                    tr += '<tr>'
                    for(let v2 of cols[0]){
                        if((v2.type == 'checkbox') || v2.hasOwnProperty('toolbar')){
                            tr += `<td class="layui-table-col-special"></td>`
                        }else{
                            var field = v2.field ?? 'id'
                            tr += `<td>${v[field]}</td>`
                        }
                    }
                    tr += '</tr></tbody>'
                }
                $(v).find('tr').after(tr)
                $(v).find("th.layui-table-patch").remove();
                $(v).find(".layui-table-col-special").remove();
                var h = window.open("打印窗口", "_blank");
                h.document.write(f + $(v).prop("outerHTML"));
                h.document.close();
                h.print();
                h.close();
            }
  • 相关阅读:
    129. Sum Root to Leaf Numbers
    113. Path Sum II
    114. Flatten Binary Tree to Linked List
    112. Path Sum
    100. Same Tree
    300. Longest Increasing Subsequence
    72. Edit Distance
    自定义js标签库
    JS 实现Table相同行的单元格自动合并示例代码
    mysql 高版本only_full_group_by 错误
  • 原文地址:https://www.cnblogs.com/dayin1/p/14583119.html
Copyright © 2011-2022 走看看