zoukankan      html  css  js  c++  java
  • jquery 表格自动拆分(方便打印)插件-printTable

    /**
    * jquery 表格打印插件
    *
    * 作者: LiuJunGuang
    * 日期:2013年6月4日
    * 分页样式(需要自定义):
    * @media print {
    * .pageBreak { page-break-after:always; }
    * }
    * 使用例子:
    * $(function(){
    * $("#tabContent").printTable({
    * mode : "rowNumber",
    * header : "#headerInfo",
    * footer : "#footerInfo",
    * pageNumStyle : "第#p页/共#P页",
    * pageNumClass : ".pageNum",
    * pageSize : 10
    * });
    * });
    * 注意事项:
    * 使用时注意表格中要使用 thead 和 tbody区分出标题头与表格内容,否则可能出现错误
    *
    * 参数说明:
    * options are passed as json (json example: { rowHeight : "rowHeight", header : ".tableHeader",})
    *
    * {OPTIONS} | [type] | (default), values | Explanation
    * ---------------- | --------- | -----------------------------| -----------
    * @mode | [string] | ("rowHeight"),rowNumber | 分页模式,按行高分页或按行数分页
    * @header | [string] | (".tableHeader") | 页面开始处要添加的内同
    * @footer | [string] | (".tableFooter") | 页面结束要添加的内容
    * @pageSize | [number] | (30) | 自动分页行数,按行高分页时改参数无效
    * @breakClass | [string] | ("pageBreak") | 分页插入符class,需要定义分页样式
    * @pageNumStyle | [string] | "#p/#P" | 页码显示样式,#p当前页,#P总页数
    * @pageNumClass | [string] | ".pageNumClass" | 页码class样式,用于设值(使用text方法设置)
    * @startPage | [number] | (1) | 第一页起始页码
    * @pageHeight | [number] | (297) | 页面高度,单位像素
    * @topMargin | [number] | (15) | 上边距高度,单位像素
    * @bottomMargin | [number] | (15) | 低边距高度,单位像素
    */
    (function($) {
    var modes = { rowHeight : "rowHeight", rowNumber : "rowNumber" };
    //默认参数
    var defaults = {
    mode : modes.rowHeight,
    header : ".tableHeader",
    footer : ".tableFooter",
    pageSize : 30,
    breakClass : "pageBreak",
    pageNumStyle : "#p/#P",
    pageNumClass : ".pageNumClass",
    startPage : 1,
    pageHeight : 1230,
    topMargin : 50,
    bottomMargin : 50
    };
    var settings = {};//global settings
    var rowCount = 0;//行总数
    var pageCount = 0;//页总数
    var currentPage = 0;//当前页
    var $header = null;//表格头
    var $content = null;//表格内容
    var $footer = null;//表格尾
    var $table = null;
    var $tbodyTr = null;
    $.fn.printTable = function( options ) {
    $.extend( settings, defaults, options );
    $table = $(this);
    $tbodyTr = $table.find("tbody tr");
    switch ( settings.mode ){
    case modes.rowHeight :
    rowHeightPage();//行高分页
    break;
    case modes.rowNumber :
    rowNumberPage();//行数分页
    }
    };
    //获取页总数
    $.fn.printTable.getStartPage = function(startPage) {
    return getPageStyle(startPage , pageCount);
    };
    //行高分页
    function rowHeightPage(){
    var contentHeight = initHeightPage();
    getContentColne();
    beginPageByHeight(contentHeight);
    hidenContent();
    }


    //行数分页
    function rowNumberPage(){
    initNumberPage();
    getContentColne();
    beginPageByNumber();
    hidenContent();
    }

    //按行高分页
    function beginPageByHeight(contentHeight){
    var totalHeight = 0;
    var startLine = 0;
    $tbodyTr.each(function(i){
    var cHeight = $(this).outerHeight(true);
    $(this).height(cHeight);
    if((totalHeight + cHeight ) < contentHeight){
    totalHeight += cHeight;
    if(i == $tbodyTr.length -1){
    newPage(i + 1);
    }
    }else{
    newPage(i);
    }
    });
    function newPage(index){
    createPage(startLine,index);
    currentPage ++;
    startLine = index;
    totalHeight = 0;
    }
    }

    //初始化高度分页信息
    function initHeightPage(contentHeight){
    var contentHeight = initContentHeight();
    currentPage = 0 + settings.startPage;
    pageCount = Math.ceil($table.find("tbody").outerHeight(true)/contentHeight) + settings.startPage - 1;//初始化总页数
    rowCount = $tbodyTr.length;//初始化总记录数
    return contentHeight;
    }


    //初始化内容高度
    function initContentHeight(){
    var headerHeight = $(settings.header).outerHeight(true);
    var footerHeight = $(settings.footer).outerHeight(true);
    var theadHeight = $table.find("thead").outerHeight(true);
    var tableHeight = settings.pageHeight - settings.topMargin - settings.bottomMargin ;
    var tbodyHeight = tableHeight - theadHeight- headerHeight - footerHeight;
    return tbodyHeight;
    }
    //初始化分页基本信息
    function initNumberPage(){
    rowCount = $tbodyTr.length;//初始化总记录数
    pageCount = Math.ceil(rowCount/settings.pageSize) + settings.startPage - 1;//初始化总页数
    currentPage = 0 + settings.startPage;
    }

    //开始分页
    function beginPageByNumber(){
    var startLine = 1;//开始行号
    var offsetLine = 0;//偏移行号
    for(var i = settings.startPage; i <= pageCount ;i++ ){
    currentPage = i;
    startLine = settings.pageSize* (currentPage - settings.startPage);
    offsetLine = (startLine + settings.pageSize) > rowCount ? rowCount : startLine + settings.pageSize;
    createPage(startLine,offsetLine);
    };
    }
    //创建新的一页
    function createPage(startLine,offsetLine){
    var $pageHeader = $header.clone();
    var $pageContent = $content.clone().append(getTrRecord(startLine,offsetLine));
    var $pageFooter = $footer.clone();
    $pageFooter.find(settings.pageNumClass).text(getPageStyle(currentPage , pageCount));//页码显示格式
    if(offsetLine == rowCount){
    $table.before($pageHeader).before($pageContent).before($pageFooter);
    }else{
    $table.before($pageHeader).before($pageContent).before($pageFooter).before(addPageBreak());
    }
    }

    //添加分页符
    function addPageBreak(){
    return "<div class='"+settings.breakClass+"'></div>";
    }

    //获取分页样式
    function getPageStyle(currentPage , pageCount){
    var numStr = settings.pageNumStyle;
    numStr = numStr.replace(/#p/g,currentPage);
    numStr = numStr.replace(/#P/g,pageCount);
    return numStr;
    }

    //获取记录
    function getTrRecord(startLine,offsetLine){
    return $tbodyTr.clone().slice(startLine,offsetLine);
    }
    //获取内容
    function getContentColne(){
    $header = $(settings.header).clone().removeAttr("id");
    $content = $table.clone().find("tbody").remove().end().removeAttr("id");
    $footer = $(settings.footer).clone().removeAttr("id");
    }
    //隐藏原来的数据
    function hidenContent(){
    $(settings.header).hide();
    $table.hide();
    $(settings.footer).hide();
    }
    })(jQuery);

  • 相关阅读:
    六、Redis主从复制 
    五、AOF持久化
    四、RDB持久化
    三、数据类型
    二、redis的配置文件介绍
    第八章、堆
    九、补充
    八、Filter
    七、监听器和国际化
    六、JDBC
  • 原文地址:https://www.cnblogs.com/lenther2002/p/5088938.html
Copyright © 2011-2022 走看看