js灵活打印web页面区域内容的通用方法
我们做网站，经常需要打印页面指定区域的内容，而网上关于这块的说法很多，各种各样的打印控件也不少。但许多打印方案都不怎么好，至少我不喜欢，要么封装复杂，要么难以维护。正好现在的项目也需要用到页面打印，于是在网上找了一个最简洁的打印插件，在它的基础上自己写了一个通用的打印方法，可以直观的修改样式。现在把代码贴出来，留置后用，也可以给大家一些参考。
通过这次试水，才知道，原来html中，media元素大有用途，这里正好小用一把，去掉超链接的url显示
1.网上找的js打印插件
Version 2.4.0 Copyright (C) 2013
Tested in IE 11, FF 28.0 and Chrome 33.0.
No official support for other browsers, but will TRY to accommodate challenges in other browsers.
Print Button: &div id="print_button"&Print&/div&
Print Area
: &div class="PrintArea" id="MyId" class="MyClass"& ... html ... &/div&
Javascript
: &script&
$("div#print_button").click(function(){
$("div.PrintArea").printArea( [OPTIONS] );
options are passed as json (example: {mode: "popup", popClose: false})
| (default), values
| Explanation
| ---------
| ---------------------- | -----------
| [string]
| (iframe),popup
| printable window is either iframe or browser popup
| [number]
| popup window height
| [number]
| popup window width
| [number]
| popup window screen X position
| [number]
| popup window screen Y position
| [string]
| popup window title element
| [boolean]
| (false),true
| popup window close after printing
| [string]
| comma separated list of extra css to include
@retainAttr | [string[]] | ["id","class","style"] | string array of attributes to retain for the containment area. (ie: id, style, class)
| [string]
| strict, loose, (html5) | Only for popup. For html 4.01, strict or loose document standard, or html 5 standard
@extraHead
| [string]
| comma separated list of extra elements to be appended to the head tag
(function($) {
var counter = 0;
var modes = { iframe : "iframe", popup : "popup" };
var standards = { strict : "strict", loose : "loose", html5 : "html5" };
var defaults = {
: modes.iframe,
: standards.html5,
extraHead : '',
retainAttr: ["id", "class", "style"]
var settings = {};//global settings
$.fn.printArea = function( options )
$.extend( settings, defaults, options );
counter++;
var idPrefix = "printArea_";
$( "[id^=" + idPrefix + "]" ).remove();
settings.id = idPrefix +
var $printSource = $(this);
var PrintAreaWindow = PrintArea.getPrintWindow();
PrintArea.write( PrintAreaWindow.doc, $printSource );
setTimeout( function () { PrintArea.print( PrintAreaWindow ); }, 1000 );
var PrintArea = {
print : function( PAWindow ) {
var paWindow = PAWindow.
$(PAWindow.doc).ready(function(){
paWindow.focus();
paWindow.print();
if ( settings.mode == modes.popup && settings.popClose )
setTimeout(function() { paWindow.close(); }, 2000);
write : function ( PADocument, $ele ) {
PADocument.open();
PADocument.write( PrintArea.docType() + "&html&" + PrintArea.getHead() + PrintArea.getBody( $ele ) + "&/html&" );
PADocument.close();
docType : function() {
if ( settings.mode == modes.iframe ) return "";
if ( settings.standard == standards.html5 ) return "&!DOCTYPE html&";
var transitional = settings.standard == standards.loose ? " Transitional" : "";
var dtd = settings.standard == standards.loose ? "loose" : "strict";
return '&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01' + transitional + '//EN" "http://www.w3.org/TR/html4/' + dtd +
getHead : function() {
var extraHead = "";
var links = "";
var styles = '';
if ( settings.extraHead ) settings.extraHead.replace( /([^,]+)/g, function(m){ extraHead += m });
$(document).find("link")
.filter(function () { // Requirement: &link& element MUST have rel="stylesheet" to be considered in print document
var relAttr = $(this).attr("rel");
return ($.type(relAttr) === 'undefined') == false && relAttr.toLowerCase() == 'stylesheet';
.filter(function () { // Include if media is undefined, empty, print or all
var mediaAttr = $(this).attr("media");
return $.type(mediaAttr) === 'undefined' || mediaAttr == "" || mediaAttr.toLowerCase() == 'print' || mediaAttr.toLowerCase() == 'all'
.each(function () {
links += '&link type="text/css" rel="stylesheet" media="print" href="' + $(this).attr("href") + '" /&';
styles += '@import url("' + $(this).attr("href") + '")';
if ( settings.extraCss ) settings.extraCss.replace( /([^,\s]+)/g, function(m){ links += '&link type="text/css" rel="stylesheet" href="' + m + '"&' });
return '&head&&title&' + settings.popTitle + '&/title&' + extraHead + links + '&style type="text/css"& @media print{a:link:after {content: ""}}&/style&&/head&';
//return "&head&&title&" + settings.popTitle + "&/title&" + extraHead + links + "&/head&";
getBody : function ( elements ) {
var htm = "";
var attrs = settings.retainA
elements.each(function() {
var ele = PrintArea.getFormData( $(this) );
var attributes = ""
for ( var x = 0; x & attrs. x++ )
var eleAttr = $(ele).attr( attrs[x] );
if ( eleAttr ) attributes += (attributes.length & 0 ? " ":"") + attrs[x] + "='" + eleAttr + "'";
htm += '&div ' + attributes + '&' + $(ele).html() + '&/div&';
return "&body&" + htm + "&/body&";
getFormData : function ( ele ) {
var copy = ele.clone();
var copiedInputs = $("input,select,textarea", copy);
$("input,select,textarea", ele).each(function( i ){
var typeInput = $(this).attr("type");
if ($.type(typeInput) === 'undefined') typeInput = $(this).is("select") ? "select" : $(this).is("textarea") ? "textarea" : "";
var copiedInput = copiedInputs.eq( i );
if ( typeInput == "radio" || typeInput == "checkbox" ) copiedInput.attr( "checked", $(this).is(":checked") );
else if ( typeInput == "text" ) copiedInput.attr( "value", $(this).val() );
else if ( typeInput == "select" )
$(this).find( "option" ).each( function( i ) {
if ( $(this).is(":selected") ) $("option", copiedInput).eq( i ).attr( "selected", true );
else if ( typeInput == "textarea" ) copiedInput.text( $(this).val() );
getPrintWindow : function () {
switch ( settings.mode )
case modes.iframe :
var f = new PrintArea.Iframe();
return { win : f.contentWindow || f, doc : f.doc };
case modes.popup :
var p = new PrintArea.Popup();
return { win : p, doc : p.doc };
Iframe : function () {
var frameId = settings.
var iframeStyle = 'border:0;position:width:0height:0right:0top:0';
iframe = document.createElement('iframe');
document.body.appendChild(iframe);
$(iframe).attr({ style: iframeStyle, id: frameId, src: "#" + new Date().getTime() });
iframe.doc =
iframe.doc = iframe.contentDocument ? iframe.contentDocument : ( iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
catch( e ) { throw e + ". iframes may not be supported in this browser."; }
if ( iframe.doc == null ) throw "Cannot find document.";
Popup : function () {
var windowAttr = "location=yes,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no";
windowAttr += ",width=" + settings.popWd + ",height=" + settings.popHt;
windowAttr += ",resizable=yes,screenX=" + settings.popX + ",screenY=" + settings.popY + ",personalbar=no,scrollbars=yes";
var newWin = window.open( "", "_blank",
windowAttr );
newWin.doc = newWin.
return newW
})(jQuery);
2. 我的调用方法
function printArticle(areaId) {
var styles = ".PrintStyleBtn{border:width:100%;;height:40line-height:40background-color:#} .PrintStyleBtn input{ border-radius:5background-color:#999;color:#float:margin:8height:24line-height:16padding:0px 5}.selected{background-color:#} .PrintStyleBtn span{margin:3px 0display:inline-border-radius:3height:24line-height:20padding:2px 5}.PrintStyleBtn span:hover{background-color:#999;} .print_content{border:1px solid #width:800height:padding:20margin:50}";
insertStyleSheet(styles, "PrintStyle");
var printFrameHtml =
'&div id="PrintFrame" style="border:width:100%;height:100%;position:top:0;left:0;background-color:#"&'
+ '&div class="PrintStyleBtn" style=""&'
Font size:'
&span name="size"&Small&/span& |'
&span name="size" class="selected"&Medium&/span& |'
&span name="size"&Large&/span&
Line spacing:'
&span name="space"&Compact&/span& |'
&span name="space" class="selected"&Normal&/span&
&span name="image" class="selected"&Yes&/span& |'
&span name="image"&No&/span&
&input id="btnCancel" type="button" value="Cancel"/&'
&input id="btnPrint"
type="button" value="Print" /&'
+ '&/div&'
+ '&div class="print_content"&' + $('#' + areaId).html() + '&/div&&/div&';
$("body").append(printFrameHtml);
$('.print_content').find(".viva-content-edit").remove();
$('.PrintStyleBtn').find('span').on('click', function () {
var obj = $(this),
name = obj.attr('name'),
value = obj.html();
$('.PrintStyleBtn').find('span[name="' + name + '"]').removeClass('selected');
obj.addClass('selected');
if (name == 'size')
$('.print_content').css('font-size', value == 'Small' ? 'small' : value == 'Medium' ? 'medium' : 'large' );
if (name == 'space')
$('.print_content').css('line-height', value == 'Compact' ? '1' : 'normal');
if (name == 'image') {
if (value == "Yes") {
$('.print_content').find("img").show();
$('.print_content').find("img").hide();
$('.PrintStyleBtn').find('input').on('click', function () {
if (this.value == 'Print') {
$('.print_content').printArea();
$('#PrintFrame').remove();
3.附带页面sample
&input type="button" onclick="printArticle('articleRight');" value='Print' /&
&div id="articleRight"&
&div class="article-title"&Test Article Tilte&/div&
&div class="article-content"&Test Article Content&/div&
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！10个增强WEB字体排版的JQUERY插件_图文_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
10个增强WEB字体排版的JQUERY插件
AAA教育与中影强强联合，共同打造专业为中影...|
总评分0.0|
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩4页未读，
定制HR最喜欢的简历
你可能喜欢这次和大家分享的是自己写的一个table常用几种展示格式的js插件取名为()，样式使用的是bootstrap.min.css，还需要引用jquery.min.js包，这个插件由来的目的是项目中需要一个table格式的提交数据的页面，功能有合并单元格，只能提交选中行数据，全选功能，和一个下拉选功能；这几种功能感觉朋友们肯定都会遇到，所以干脆封装一个插件，发布出来说不定能帮到有些朋友快速完成任务哈哈，当然最主要的还是希望朋友们能相互交流里面的代码，逻辑，谢谢；中秋节就要到了，这里提前预祝大家节日快乐，吃月饼的时候不要忘记了点个赞。
以上是个人的看法，下面来正式分享今天的文章吧：
. 功能介绍与效果图(认可的点个赞)
. 需求分析
. 插件主要代码块的说明
. 获取table插件数据，并提交给后台
. 插件源码及帮助文档
下面一步一个脚印的来分享：
. 功能介绍与效果图(认可的点个赞)
1.普通效果
2.合并表格
4.合并+汇总
5.展示选中行明细
. 需求分析
首先，咋们来看张图：
如图所示，这里的乘客可能会选择不同的产品，同时选择的购买份数也可能改变，然后只能提交最后一列勾选上的数据这是上面的图展示出来的功能信息；为了更好的用户体验显然&乘客姓名&这一列需要吧相同名称的数据合并；价格一列通常在用户填写表单中不会有汇总的操作，但是数据统计报表中一般就需要；还有这个产品列只有名称，没有更详细描述信息，通常我们需要展示出来方便用户了解更多的信息，一般我们直接在产品名称对应的html元素使用title展示，这样不友好，所以又有了点击产品名称，查看明细的需求；下面我们来整合下需求：
1. table中每行需要checkbox选择框和对应的份数下拉框select及全选按钮
2. 重复数据合并单元格
3. 汇总金额数字列
4. 明细描述
5. 还需要一个能隐藏产品Id或者乘客Id的元素（插件这里定位一个隐藏列）
这个就是table列表需要满足的需求，也是大众化的需求吧
. 插件主要代码块的说明
首先，咋们来说下插件需要的固定格式的数据：列表头json数据，列表行json集合数据格式；
列表头json数据：
1 //测试用例-列表头
var header = [
"title": "产品名称",
"name": "product",
"type": "label"
"title": "销售价",
"name": "sale",
"type": "label",
"title": "份数",
"name": "num",
"type": "select",
//如果是下拉框，这里需要初始值val
"text": 1,
"text": 2,
"text": 3,
"title": "总额",
"name": "amount",
"type": "label"
"title": "&input type='checkbox'
name='cbAll' style='border: 0 width: 20 height: 20'/&",
//如果是全选选择框，这里直接写html元素
"name": "cb",
"type": "checkbox"
"title": "保险Id",
"name": "productid",
"type": "hidden"
列表头数据注意点在于：
1. 如果"type": "select"类型，需要初始值val属性的值，这样每一行中才会出现一个下拉框
2.&"type": "checkbox"，如果列是复选框，那么头部单元格一般是全选的复选框，我们直接在头部json定义
&input type='checkbox'
name='cbAll' style='border: 0 width: 20 height: 20'/&
就行了，如果不需要全选框，直接定义成文字就行
3. 插件列支持的type类型有type：有label(文本)，select（下拉框，如果是下拉框需要初始化下拉数据&val&），checkbox（选择框，如果需要全选框直接写html元素，默认自带），hidden（隐藏域，保存每行唯一的值）
列表行json集合数据格式：
1 //测试用例-没行数据
var data = [
{ "product": "神雕侠侣电影票", "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 2 },
{ "product": "摇摇乐门票", "sale": 30.00, "num": 2, "amount": 60.00, "cb": false, "productid": 1 },
{ "product": "神雕侠侣电影票", "sale": 30.00, "num": 1, "amount": 30.00, "cb": true, "productid": 2 },
{ "product": "摇摇乐门票", "sale": 30.00, "num": 3, "amount": 90.00, "cb": false, "productid": 1 }
{ "product": { "产品名称": "神雕侠侣电影票", "描述": "神雕侠侣电影票，中秋节大放送，情侣们快来啊，只需一块钱", "销售价
": 30.00 }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 1 },
{ "product": { "产品名称": "摇摇乐门票", "描述": "摇摇乐门票，中秋节大放送，情侣们快来啊，只需一块钱", "销售价
": 30.00 }, "sale": 30.00, "num": 2, "amount": 60.00, "cb": false, "productid": 2 },
{ "product": { "产品名称": "杨过和小龙女电影票", "描述": "杨过和小龙女电影票，中秋节大放送，情侣们快来啊，只需一块钱", "销售价
": 30.00 }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": true, "productid": 3 },
{ "product": { "产品名称": "四川一日行旅游券", "描述": "小编忙，没时间维护" }, "sale": 30.00, "num": 3, "amount": 90.00, "cb": false, "productid": 4 },
{ "product": { "产品名称": "四川一日行旅游券", "描述": "小编忙，没时间维护" }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 5 }
这里需要注意的是这两种数据结构，如果想要展示明细，那么没个单元格对应的值是一个{}对象，数据格式如：{"产品名称":"四川一日行旅游券","描述":"小编忙，没时间维护"},这里的&产品名称&将作为明细列名称；如果只需要展示名称不要明细，直接赋值成值就行了
其次，来看下可配置的参数说明，如下代码：
var defOption = {
//要显示插件内容的div的Id
header: header,
//json格式列表头
data: data,
//json格式数据
cbAllName: "cbAll",
//全选框Name
cbName: "cb",
//每行选框Name
tableId: "table" + new Date().getTime(),
默认时间格式
isTotal: false, //是否汇总
（默认不汇总）
outTotalCols: "",
//不汇总列
多个格式如：1,2
isCombine: false, //是否合并单元格
（默认不合并）
outCombineCols: "", //不合并单元格列
多个格式如：1,2
back: function () {
console.log("这里是回调");
//回调函数
然后，代码逻辑步奏为：初始化列表头-&初始化每行内容（每行加载的时候需要根据列表头部的type来判断应该加载什么html元素控件并且可以绑定初始化状态值）-&全选绑定事件-&绑定某个需要展示明细的单元格，动态加载明细内容数据-&执行汇总-&执行合并单元格（此处需要注意的是，不需要先汇总在合并单元格，如果顺序发生变化，汇总的格式将异常）-&执行回调响应函数；这个就是主要的代码逻辑；
. 获取table插件数据，并提交给后台
首先，table元素展示出来后，如果作为用户提交的界面，还需要能获取出用户选择的数据，并提交给后台，我这里列举一个简单的获取列子，咋们可以直接在回调函数back中写提交表单的代码如：
1 var tbChoice = new tb_choice({
id: "divShow",
data: data,
header: header,
outCols: "0,4,6",
isTotal: false,
back: function () {
$("#btnSave").click(function () {
var cbs = $("input[name='cb'][type='checkbox']:checked");
if (cbs.length &= 0) { alert("请选择保险"); }
var param = [];
$.each(cbs, function (index, item) {
var tr = $(this).parent().parent();
var id = $(tr).find("[name='id']").val();
var num = $(tr).find("[name='num'] option:selected").val();
var productId = $(tr).find("[name='productid']").val();
param.push({ id: id, num: num, productId: productId });
//请求后台
$.post("Add.aspx", { op: orderId, t: "save", param: JSON.stringify(param) }, function (result01) {
var resultJson = JSON.parse(result01);
console.log(resultJson);
alert(resultJson.msg);
if (resultJson.status) {
location.reload(true);
我这里直接在回调back函数里面写ajax提交给后台数据，这里使用遍历table的每行需要的数据组合成json格式发送给后台，用起来还是挺简单的呢，因为获取的使用通过name属性来获取元素的值，而name对应的都是最开始列表头json数据的name，大家可以对比下
. 插件源码及帮助文档
首先，插件的源码待会在结尾全部发布，里面分别有汇总方法，合并列方法，和一个String的扩展方法大家可以分开使用，朋友们有兴趣的也可以看帮助文档，根据文档上面的页面列子下载代码也行；更多的展示效果可以来这里看文档；源码如下：
1 /// &reference path="../jquery-1.10.2.min.js" /&
4 var tb_total = function () {
//tableId:table元素的Id
//outCols:排除不合并的列，多个使用&，&隔开
sumTab: function (tableId, outCols) {
if (!outCols) { outCols = ""; }
var rows = $("#" + tableId + " tr");
var colLen = $(rows).eq(1).find("td[class!='hide']").
var totalVal = [];
for (var i = 0; i & colL i++) {
totalVal.push("0");
$.each(rows, function (i, item) {
var tds = $(item).find("td[class!='hide']");
var crossVal = "";
$(tds).each(function (i_td, item_td) {
var hVal = $(item_td).html();
if (isNaN(hVal)) {
totalVal[i_td] = "";
if (totalVal[i_td].length & 0) {
totalVal[i_td] = (parseFloat(totalVal[i_td]) + parseFloat(hVal)).toFixed(2);
} else { crossVal = hV }
var totalHtml = [];
totalHtml.push("&tr style='");
for (var i in totalVal) {
totalHtml.push("&td align=\"center\"&");
if (i == 0) {
totalHtml.push("&font style='color:red'&合计&/font&");
totalHtml.push("&/td&");
} else if (outCols.length & 0) {
//表示存在排除列
if (("," + outCols + ",").indexOf("," + i + ",") & -1) {
totalHtml.push("");
totalHtml.push("&/td&");
totalHtml.push(totalVal[i]);
totalHtml.push("&/td&");
totalHtml.push("&/tr&");
$("#" + tableId).append(totalHtml.join(''));
//tableId:table元素的Id
//outCols:排除不合并的列，多个使用&，&隔开
uniteTab: function (tableId, col, outCols) {
if (!outCols) { outCols = ""; }
//col-- 需要合并单元格的列 1开始
var colLength =
var tb = document.getElementById(tableId);
if (!tb) { }
tb.style.display = '';
var i = 0;
var j = 0;
var rowCount = tb.rows. //
var colCount = tb.rows[0].cells. //
var obj1 =
var obj2 =
//为每个单元格命名
for (i = 0; i & rowC i++) {
for (j = 0; j & colC j++) {
if (!tb.rows[i].cells[j]) { }
tb.rows[i].cells[j].id = tableId + "tb__" + i.toString() + "_" + j.toString();
for (i = 0; i & colC i++) {
if (i == colLength)
//排除不合并列
if (("," + outCols + ",").indexOf("," + i + ",") & -1) { }
obj1 = document.getElementById(tableId + "tb__0_" + i.toString())
for (j = 1; j & rowC j++) {
obj2 = document.getElementById(tableId + "tb__" + j.toString() + "_" + i.toString());
if (obj1.innerText == obj2.innerText) {
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
obj1 = document.getElementById(tableId + "tb__" + j.toString() + "_" + i.toString());
for (i = 0; i & rowC i++) {
if (tb.rows[i] != null) {
colCount = tb.rows[i].cells.
obj1 = document.getElementById(tb.rows[i].cells[0].id);
if (obj1 != null) {
for (j = 1; j & colC j++) {
if (j &= colLength)
if (obj1.colSpan &= colLength)
if (tb.rows[i].cells[j]) {
obj2 = document.getElementById(tb.rows[i].cells[j].id);
if (obj1.innerText == obj2.innerText) {
obj1.colSpan++;
obj2.parentNode.removeChild(obj2);
j = j - 1;
obj1 = obj2;
j = j + obj1.rowS
144 //table 表插件，要求bootstrap.min.css样式
145 var tb_choice = function (option) {
//测试用例-列表头
var header = [
"title": "产品名称",
"name": "product",
"type": "label"
"title": "销售价",
"name": "sale",
"type": "label",
"title": "份数",
"name": "num",
"type": "select",
//如果是下拉框，这里需要初始值val
"text": 1,
"text": 2,
"text": 3,
"title": "总额",
"name": "amount",
"type": "label"
"title": "&input type='checkbox'
name='cbAll' style='border: 0 width: 20 height: 20'/&",
//如果是全选选择框，这里直接写html元素
"name": "cb",
"type": "checkbox"
"title": "保险Id",
"name": "productid",
"type": "hidden"
//测试用例-没行数据
var data = [
{ "product": "神雕侠侣电影票", "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 2 },
{ "product": "摇摇乐门票", "sale": 30.00, "num": 2, "amount": 60.00, "cb": false, "productid": 1 },
{ "product": "神雕侠侣电影票", "sale": 30.00, "num": 1, "amount": 30.00, "cb": true, "productid": 2 },
{ "product": "摇摇乐门票", "sale": 30.00, "num": 3, "amount": 90.00, "cb": false, "productid": 1 }
{ "product": { "产品名称": "神雕侠侣电影票", "描述": "神雕侠侣电影票，中秋节大放送，情侣们快来啊，只需一块钱", "销售价
": 30.00 }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 1 },
{ "product": { "产品名称": "摇摇乐门票", "描述": "摇摇乐门票，中秋节大放送，情侣们快来啊，只需一块钱", "销售价
": 30.00 }, "sale": 30.00, "num": 2, "amount": 60.00, "cb": false, "productid": 2 },
{ "product": { "产品名称": "杨过和小龙女电影票", "描述": "杨过和小龙女电影票，中秋节大放送，情侣们快来啊，只需一块钱", "销售价
": 30.00 }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": true, "productid": 3 },
{ "product": { "产品名称": "四川一日行旅游券", "描述": "小编忙，没时间维护" }, "sale": 30.00, "num": 3, "amount": 90.00, "cb": false, "productid": 4 },
{ "product": { "产品名称": "四川一日行旅游券", "描述": "小编忙，没时间维护" }, "sale": 30.00, "num": 1, "amount": 30.00, "cb": false, "productid": 5 }
var defOption = {
//要显示插件内容的div的Id
header: header,
//json格式列表头
data: data,
//json格式数据
cbAllName: "cbAll",
//全选框Name
cbName: "cb",
//每行选框Name
tableId: "table" + new Date().getTime(),
默认时间格式
isTotal: false, //是否汇总
（默认不汇总）
outTotalCols: "",
//不汇总列
多个格式如：1,2
isCombine: false, //是否合并单元格
（默认不合并）
outCombineCols: "", //不合并单元格列
多个格式如：1,2
back: function () {
console.log("这里是回调");
//回调函数
$.extend(defOption, option);
var tbArr = [];
tbArr.push('&table id="{0}" class="table table-hover table-bordered text-center "&'.format([defOption.tableId]));
tbArr.push('&thead&&tr&');
$.each(defOption.header, function (i, item) {
tbArr.push("&th {1}&{0}&/th&".format([item.title, (item.type == "hidden" ? "class='text-center hide'" : "class='text-center'")]));
tbArr.push('&/tr&&/thead&');
$.each(defOption.data, function (i, item) {
tbArr.push("&tr &");
$.each(item, function (key, val) {
var htype = [];
$.each(defOption.header, function (_, headItem) {
if (headItem.name == key) {
switch (headItem.type) {
case "label":
if (typeof (val) == "object") {
//只循环一次
$.each(val, function (valKey, valItem) {
htype.push("&label data-item='{1}' style=' cursor:pointer'&{0}&/label&".format([valItem, JSON.stringify(val)]));
htype.push(val);
case "select":
htype.push("&select name='{0}'&".format([key]));
$.each(headItem.val, function (s_i, s_item) {
htype.push("&option value='{1}' {2}&{0}&/option&".format([s_item.text, s_item.val, (s_item.val == val ? "selected='selected'" : "")]));
htype.push("&/select&");
case "text":
htype.push("&input name='{1}' type='text' class='form-control' value='{0}'/&".format([val, key]));
case "checkbox":
htype.push("&input type='checkbox'
name='{1}' {2} value='{0}'
style='border: 0 width: 20 height: 20'/&".format([val, key, val ? "checked='checked'" : ""]));
case "hidden":
htype.push("&input type='hidden' name='{1}' value='{0}'/&".format([val, key]));
tbArr.push("&td style='font-weight:' {1}&{0}&/td&".format([htype.join(''), (headItem.type == "hidden" ? "class='hide'" : "class='text-center-vertical'")]));
tbArr.push("&/tr&");
tbArr.push('&/table&');
$("#" + option.id).html(tbArr.join(''));
//全选绑定
$("input[type='checkbox'][name='" + defOption.cbAllName + "']").click(function () {
var status = $(this).prop("checked");
if (status) {
$("input[type='checkbox'][name='" + defOption.cbName + "']").prop({ "checked": true });
$("input[type='checkbox'][name='" + defOption.cbName + "']").prop({ "checked": false });
//label明细展示绑定
$("label[data-item]").click(function () {
var dataItem = $(this).attr("data-item");
if (dataItem) {
var tr = $(this).parent().parent();
var nextTr = tr.next();
var nextName = nextTr.attr("data-item");
if (!nextName) {
var data = JSON.parse(dataItem);
var childTab = [];
childTab.push('&table class="table table-bordered"&');
var childHeader = "";
var childContent = "";
$.each(data, function (key, item) {
childHeader += "&td&{0}&/td&".format([key]);
childContent += "&td&{0}&/td&".format([item]);
childTab.push("&tr&{0}&/tr&".format([childHeader]));
childTab.push("&tr&{0}&/tr&".format([childContent]));
childTab.push("&/table&");
var colsLen = tr.find("td[class!='hide']").
var appendDes = $("&tr data-item='{2}'&&td colspan='{1}' class='text-left'&{0}&/td&&/tr&".format([childTab.join(''), colsLen, dataItem]));
tr.after(appendDes);
nextTr.remove();
//单元格操作
var tbTotal = new tb_total();
if (defOption.isTotal) { tbTotal.sumTab(defOption.tableId, defOption.outTotalCols); }
//合并单元格
if (defOption.isCombine) { tbTotal.uniteTab(defOption.tableId, 2, defOption.outCombineCols); }
//执行回调响应函数
defOption.back();
346 String.prototype.format = function (arrVal) {
if (!Array.isArray(arrVal)) { }
for (var i = 0; i & arrVal. i++) {
str = str.replace("{" + i + "}", arrVal[i]);
一箱一包行天下，付尽狂名十五年
阅读(...) 评论()