有条件地向“打印”视图中的数据表行添加样式

Question

我正在尝试在数据表打印视图中设置特定行的样式。

我有一个表，其中包含财务项目行。它们按发票编号分组，发票完成后，将显示摘要行：

此屏幕截图显示了报表的打印视图。我想做的是将“摘要”行设置为打印视图的更明显的颜色。我知道我可能不得不修改databables的打印自定义功能，但是根据一些研究，类不会导出打印视图，因此我无法设置行的类或ID的样式。

我似乎找不到有关此特定问题的任何文章，因此我不完全确定从哪里开始，但以下是我当前用于生成打印视图的代码：

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');

Answer 1

下面是将自定义格式添加到数据表的打印视图的一种方法。首先，下面是 HTML 数据表：以下是打印视图的外观：实现：<script type="text/javascript">&nbsp; $(document).ready(function() {&nbsp; &nbsp; $('#example').DataTable({&nbsp; &nbsp; &nbsp; dom: 'Bfrtip',&nbsp; &nbsp; &nbsp; buttons: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; extend: 'print',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autoPrint: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exportOptions: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: function ( inner, rowidx, colidx, node ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (node.classList.contains('summary')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '<span class="summary" style="color:red; font-style:italic;">' + inner + '</span>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return inner;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; customize: function ( win, butt, tbl ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(win.document.body).find('span.summary').css('font-size', '20px');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(win.document.body).find('span.summary').parent().css('background-color', 'yellow');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; });&nbsp; });</script>注释：在我的数据中，我已经在那些我想要操作的单元格中插入了一个类 - 例如：summary<tr>&nbsp; &nbsp; <td class="summary">Bradley Greer</td>&nbsp; &nbsp; <td class="summary">Software Engineer</td>&nbsp; &nbsp; <td class="summary">London</td>&nbsp; &nbsp; <td class="summary"></td>&nbsp; &nbsp; <td class="summary">2012/10/13</td>&nbsp; &nbsp; <td class="summary">$132,000</td>&nbsp;/tr>没有与此类名关联的样式。对于我的演示，我只是对这些进行了硬编码。但是 DataTables 提供了各种方法来动态处理这种情况，作为表初始化和数据处理的一部分。然后我使用该功能（在此页面上描述）。我用它来改变使用该类的所有单元格的数据内容（特别是字体颜色）。format.bodysummary这里的关键是创建一个跨度，该范围将剥离的类名添加回去。如您所见，打印处理器会从打印视图中删除所有此类手动添加的类和样式。现在，我可以使用该函数（在此页面上记录）来使用我新添加的类名。对于每个相关的，我找到父项并调整其样式。customizespantd最后一点：要打印出bacground阴影，我必须从打印菜单中选择一个“打印背景”选项 - 不过，这可能只是我的打印机。希望有所帮助 - 或者至少为您的特定需求提供一些想法。