DataTables + PDFmake = 彩色 PDF table 个单元格?
DataTables + PDFmake = color PDF table cells?
我正在尝试从下面的数组 table 中打印一个 PDF 文件,其中包含单词 "Software Engineer" 的每个单元格都显示为蓝色,包含 "London" 的单元格显示为红色。想用一个循环来做到这一点,逐一扫描所有行或列(不是特定的行或列)。
但是我根本无法让它工作,并且开始放弃。我想这与 each() 方法有关?
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "../php/staff.php",
table: "#example",
fields: [ {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}
]
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "../php/staff.php",
columns: [
{ data: null, render: function ( data, type, row ) {
// Combine the first and last names into a single table field
return data.first_name+' '+data.last_name;
} },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
看看 this 示例,如果年龄低于 40 岁,它会更改 PDF 中的单元格。类似的方法也适用于您。
代码的关键部分是这样的:
buttons: [
{
extend: "pdfHtml5",
customize: function(doc) {
age = table.column(3).data().toArray();
for (var i = 0; i < age.length; i++) {
if (age[i] < 40) {
doc.content[1].table.body[i+1][3].fillColor = 'blue';
}
}
}
}
]
doc.content[1].table.body[0].forEach(function (h) {
h.fillColor = '#000';
alignment: 'center'
});
doc.styles.title = {
color: '#2D1D10',
fontSize: '16',
alignment: 'center'
}
会做这份工作
我正在尝试从下面的数组 table 中打印一个 PDF 文件,其中包含单词 "Software Engineer" 的每个单元格都显示为蓝色,包含 "London" 的单元格显示为红色。想用一个循环来做到这一点,逐一扫描所有行或列(不是特定的行或列)。 但是我根本无法让它工作,并且开始放弃。我想这与 each() 方法有关?
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "../php/staff.php",
table: "#example",
fields: [ {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}
]
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "../php/staff.php",
columns: [
{ data: null, render: function ( data, type, row ) {
// Combine the first and last names into a single table field
return data.first_name+' '+data.last_name;
} },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
看看 this 示例,如果年龄低于 40 岁,它会更改 PDF 中的单元格。类似的方法也适用于您。
代码的关键部分是这样的:
buttons: [
{
extend: "pdfHtml5",
customize: function(doc) {
age = table.column(3).data().toArray();
for (var i = 0; i < age.length; i++) {
if (age[i] < 40) {
doc.content[1].table.body[i+1][3].fillColor = 'blue';
}
}
}
}
]
doc.content[1].table.body[0].forEach(function (h) {
h.fillColor = '#000';
alignment: 'center'
});
doc.styles.title = {
color: '#2D1D10',
fontSize: '16',
alignment: 'center'
}
会做这份工作