Условное добавление стилей к строкам таблиц данных в режиме печати - PullRequest
Новая
       11

Условное добавление стилей к строкам таблиц данных в режиме печати

0 голосов
/ 26 мая 2020

Я пытаюсь стилизовать определенные c строк в представлении печати Datatables.

У меня есть таблица, в которой есть строки финансовых элементов. Они сгруппированы по номеру счета-фактуры, и после его заполнения отображается сводная строка:

enter image description here

На этом снимке экрана показан вид печати для отчета. Я бы хотел сделать строку «Сводка» более заметным цветом для представления печати. Я понимаю, что мне, вероятно, придется изменить функцию настройки печати для таблиц данных, но, согласно некоторым исследованиям, классы не экспортируются в представление печати, поэтому я не могу стилизовать класс или идентификатор для строки.

I Кажется, я не могу найти никаких статей по этой конкретной проблеме, поэтому я не совсем уверен, с чего начать, но вот код, который у меня в настоящее время есть для создания моего представления для печати: 

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

1 Ответ

1 голос
/ 26 мая 2020

Вот один из способов добавить настраиваемое форматирование в представление для печати DataTable.

Во-первых, это HTML datatable:

enter image description here

А вот как выглядит представление для печати:

enter image description here

Реализация: 

<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 в те ячейки, которыми хочу управлять - например: 

<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>

Нет стиля, связанного с этим классом название.

Для моей демонстрации я просто жестко запрограммировал их. Но DataTables предоставляет различные способы динамически обрабатывать это как часть инициализации таблицы и обработки данных.

Затем я использую функцию format.body (описанную на этой странице ). Я использую это, чтобы изменить содержимое данных (в частности, цвет шрифта) всех ячеек с использованием класса summary.

Ключевым моментом здесь является создание диапазона, который добавляет обратно вырезанное имя класса. Как вы заметили, процессор печати удаляет все такие добавленные вручную классы и стили из представления печати. ​​

Теперь я могу использовать функцию customize (задокументирована на этой странице ) для использовать мое недавно добавленное имя класса. Для каждого соответствующего span я нахожу родительский td и корректирую его стиль.

Последнее замечание: чтобы распечатать затенение заднего плана, мне пришлось выбрать опцию «печать фона» в меню печати - это, вероятно, только мой принтер.

Надеюсь, что это поможет - или, по крайней мере, даст вам некоторые идеи для c конкретных потребностей.

...