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();
            }
  • 相关阅读:
    [转] Vue + Webpack 组件式开发(练习环境)
    [转] 从零构建 vue2 + vue-router + vuex 开发环境到入门,实现基本的登录退出功能
    [转] Redux入门教程(快速上手)
    [转] 前端数据驱动的价值
    [转] React风格的企业前端技术
    [转] 对Array.prototype.slice.call()方法的理解
    [转] webpack之plugin内部运行机制
    [转] 静态资源的分布对网站加载速度的影响/浏览器对同一域名下并发加载资源数量
    Mysql 版本号、存储引擎、索引查询
    linux 查看CPU、内存、磁盘信息命令
  • 原文地址:https://www.cnblogs.com/dayin1/p/14583119.html
Copyright © 2011-2022 走看看