在打印视图中有条件地向数据表行添加样式 [英] Conditionally Adding Styles to Datatables Rows in Print View
问题描述
我正在尝试为Datatables打印视图中的特定行设置样式。
I am trying to style specific rows in the Datatables print view.
我有一个包含行或财务项目的表。它们按发票编号分组，并在发票完成后显示摘要行：
I have a table that has rows o financial items. They are grouped by invoice number and after the invoice is completed, a summary row is shown:
此屏幕截图显示了报告的打印视图。我想做的是将摘要行的样式设置为打印视图更醒目的颜色。我知道我可能必须修改数据库的打印自定义功能，但是根据一些研究，这些类不会导出打印视图，因此我无法为该行设置类或ID的样式。
This screenshot shows the print view for the report. What I would like to do is style the "Summary" row to a more noticeable color for the print view. I understand that I would probably have to modify the print customization function for databables, but based on some research, the classes are not exported the print view, so I cannot style a class or ID fo the row.
我似乎找不到关于此特定问题的任何文章，因此我不确定从哪里开始，但这是我目前用于生成打印视图的代码：
I can't seem to find any articles on this particular issue, so I am not entirely sure where to start, but here is the code that I currently have for generating my print view:
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '10pt' )
.prepend(
`<style>@page{size: landscape;}</style>
<div class="container">
<div style="width:100%;">
</div>
<div style="float: right;">
<h2>Payment ID: ` + $('#ddl_payment_payment').val() + `</h2>
<h4>Payment Date: ` + paymentTable.cell(0,3).data() + `</h3>
<h4>Sub-contractor: ` + $('#ddl_payment_subContractor').val() + `</h3>
</div>
</div>
</div>`
)
.append(
`<div class="container">
<div style="float:right;">
<h4>Total: ` + $('#span_paymenttotal').html() + `</h1>
</div>
</div>`
);
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
$(win.document.body).find('summaryRow')
.css('color', 'red');
推荐答案
这是向打印件添加自定义格式的一种方法数据表的视图。
Here is one way to add custom formatting to the print-view of a DataTable.
首先，这是HTML数据表：
First, here is the HTML datatable:
这是打印视图：
实现：
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
autoPrint: false,
exportOptions: {
format: {
body: function ( inner, rowidx, colidx, node ) {
if (node.classList.contains('summary')) {
return '<span class="summary" style="color:red; font-style:italic;">' + inner + '</span>';
} else {
return inner;
}
}
}
},
customize: function ( win, butt, tbl ) {
$(win.document.body).find('span.summary').css('font-size', '20px');
$(win.document.body).find('span.summary').parent().css('background-color', 'yellow');
}
}
]
});
});
</script>
说明：
在我的数据中，我已将 summary 类插入到要操作的单元格中，例如：
In my data, I have inserted a summary class into those cells I want to manipulate - for example:
<tr>
<td class="summary">Bradley Greer</td>
<td class="summary">Software Engineer</td>
<td class="summary">London</td>
<td class="summary"></td>
<td class="summary">2012/10/13</td>
<td class="summary">$132,000</td>
/tr>
没有与该类名称关联的样式。
There is no style associated with this class name.
对于我的演示，我只是对它们进行了硬编码。但是DataTables提供了多种方法来动态地处理此问题，这是表初始化和数据处理的一部分。
For my demo, I just hard-coded these. But DataTables provides various ways to handle this dynamically, as part of the table initialization and data processing.
然后，我使用 format.body 功能（在此页面中进行了介绍）。我使用 summary 类使用它来更改所有单元格的数据内容（特别是字体颜色）。
Then I use the format.body feature (described on this page). I use this to alter the data content (specifically, the font color) of all cells using the summary class.
这里的关键是创建一个跨度，该跨度会添加回去的类名。如您所见，打印处理器将从打印视图中删除所有此类手动添加的类和样式。
The key here is to create a span which adds back the stripped-out class name. As you note, the print processor removes all such manually-added classes and styles from the print-view.
现在，我可以使用 customize 函数（记录在此页面上）来利用我的新-添加了类名。对于每个相关的 span ，我找到父 td 并调整其样式。
Now I can use the customize function (documented on this page) to make use of my newly-added class name. For each relevant span, I find the parent td and adjust its style.
最后一点：要打印出bacground阴影，我必须从打印菜单中选择一个打印背景选项-虽然这可能只是我的打印机。
希望有帮助-或至少会给您一些满足您特定需求的想法。
Hope that helps - or at least gives you some ideas for your specific needs.
这篇关于在打印视图中有条件地向数据表行添加样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
