datatables - 数据表打印自定义单元格颜色
问题描述
我想在打印表格时更改表格单元格的颜色。打印自定义功能被调用并正常工作,但颜色没有改变..
当我渲染初始表时,我调用 rollCallback 来设置单元格颜色
rowCallback: function(row, data, index){
if(data.scores <= 1){
$(row).find('td:eq(2)').css('background-color', 'red');
}
if(data.scores > 1 && data.scores <=2 ){
$(row).find('td:eq(2)').css('background-color', 'yellow');
}
if(data.scores > 2){
$(row).find('td:eq(2)').css('background-color', 'green');
}
}
在打印按钮中。我使用相同的代码再次渲染背景颜色
{
extend : 'print',
text : '<i class="fa fa-print fa-lg"></i>',
titleAttr : 'Print',
exportOptions : {
columns : [0,1,2,4]
},
customize: function(win,conf,table) {
table.rows().every(function(index,element) {
if(this.data().scores <= 1)
{
$(this).find('td:eq(2)').css('background-color', 'red');
}
if(this.data().scores > 1 && this.data().scores <=2 )
{
$(this).find('td:eq(2)').css('background-color', 'yellow');
}
if(this.data().scores > 2)
{
$(this).find('td:eq(2)').css('background-color', 'green');
}
});
}
}
颜色没有改变..我使用 jquery-3.5.1 Datatables-1.10.21 buttons-1.6.3
使用@andrewjames 回答我得到了更好的结果。预览现在有颜色了。但是当从浏览器中使用 ctrl-print 时,我再次失去了样式。
解决方案
这是我在其他答案中提到的方法,但适用于您的具体情况。
在我的测试数据中,我只有 3 列,所以我对你的代码做了一个小改动——我把它改成columns : [0,1,2,4]
了 this columns : [ 0, 1, 2 ]
。
这是我的起始表:
以下是我添加的一些额外样式:
<style>
td.bg_red {
background-color: red;
}
td.bg_yellow {
background-color: yellow;
}
td.bg_green {
background-color: green;
}
</style>
我使用了以下嵌入式测试数据(而不是 ajax 数据源):
var dataSet = [
{ "name" : "Tiger Nixon",
"office": "London",
"scores" : 1 },
{ "name" : "Donna Snider",
"office": "New York",
"scores" : 2 },
{ "name" : "Airi Satou",
"office": "Tokyo",
"scores" : 3 }
];
这是数据表定义:
<script type="text/javascript">
var dataSet = [
{ "name" : "Tiger Nixon",
"office": "London",
"scores" : 1 },
{ "name" : "Donna Snider",
"office": "New York",
"scores" : 2 },
{ "name" : "Airi Satou",
"office": "Tokyo",
"scores" : 3 }
];
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
data: dataSet,
columns: [
{ title: "Name", data: "name" },
{ title: "Office", data: "office" },
{ title: "Score", data: "scores" }
],
rowCallback: function(row, data, index){
if(data.scores <= 1){
$(row).find('td:eq(2)').addClass("bg_red");
}
if(data.scores > 1 && data.scores <=2 ){
$(row).find('td:eq(2)').addClass("bg_yellow");
}
if(data.scores > 2){
$(row).find('td:eq(2)').addClass("bg_green");
}
},
buttons: [
{
extend: 'print',
//autoPrint: false, // useful for testing
exportOptions: {
//columns : [0,1,2,4],
columns : [ 0, 1, 2 ],
format: {
body: function ( inner, rowidx, colidx, node ) {
if (node.classList.contains('bg_red')) {
return '<span class="bg_red">' + inner + '</span>';
} else if (node.classList.contains('bg_yellow')) {
return '<span class="bg_yellow">' + inner + '</span>';
} else if (node.classList.contains('bg_green')) {
return '<span class="bg_green">' + inner + '</span>';
} else {
return inner;
}
}
}
},
customize: function ( win, butt, tbl ) {
$(win.document.body).find('span.bg_red').parent().css('background-color', 'red');
$(win.document.body).find('span.bg_yellow').parent().css('background-color', 'yellow');
$(win.document.body).find('span.bg_green').parent().css('background-color', 'green');
}
} ]
});
});
</script>
这是打印预览:
这使用了与我在评论中提到的其他答案中描述的相同的技术,但适用于您的特定场景。它起作用的原因与该答案中描述的相同。
更新
您可能需要调整打印机设置以查看实际打印输出的颜色。例如,使用谷歌浏览器:
推荐阅读
- java - 无法从扫描仪的输入中识别 .equals(String)
- python - 我想解压缩 url 以进行抓取
- postgresql - Postgres:如何填充默认值?
- configuration - 如何在 ejabberd 中设置最大消息字符限制
- c# - C#将范围报告截图添加到HTML报告中
- javascript - Element.appendChild behaving unexpectedly on Chrome
- arrays - 交集算法可以执行的最大比较次数是多少?
- excel - Excel VBA 编辑器的奇怪行为
- boolean - 在 Netlogo 中,可以将布尔变量列表从真/假转换为 1/0 吗?
- java - 来自控制器的数据未显示在视图 JSP 页面上