第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

有條件地向“打印”視圖中的數(shù)據(jù)表行添加樣式

有條件地向“打印”視圖中的數(shù)據(jù)表行添加樣式

繁華開滿天機(jī) 2022-09-02 17:16:38
我正在嘗試在數(shù)據(jù)表打印視圖中設(shè)置特定行的樣式。我有一個(gè)表,其中包含財(cái)務(wù)項(xiàng)目行。它們按發(fā)票編號(hào)分組,發(fā)票完成后,將顯示摘要行:此屏幕截圖顯示了報(bào)表的打印視圖。我想做的是將“摘要”行設(shè)置為打印視圖的更明顯的顏色。我知道我可能不得不修改databables的打印自定義功能,但是根據(jù)一些研究,類不會(huì)導(dǎo)出打印視圖,因此我無(wú)法設(shè)置行的類或ID的樣式。我似乎找不到有關(guān)此特定問題的任何文章,因此我不完全確定從哪里開始,但以下是我當(dāng)前用于生成打印視圖的代碼: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 回答

?
冉冉說(shuō)

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊

下面是將自定義格式添加到數(shù)據(jù)表的打印視圖的一種方法。

首先,下面是 HTML 數(shù)據(jù)表:

http://img1.sycdn.imooc.com//6311ca200001b95d05980552.jpg

以下是打印視圖的外觀:

http://img1.sycdn.imooc.com//6311ca2d0001afa405210403.jpg

實(shí)現(xiàn):


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

注釋:


在我的數(shù)據(jù)中,我已經(jīng)在那些我想要操作的單元格中插入了一個(gè)類 - 例如: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>

沒有與此類名關(guān)聯(lián)的樣式。

對(duì)于我的演示,我只是對(duì)這些進(jìn)行了硬編碼。但是 DataTables 提供了各種方法來(lái)動(dòng)態(tài)處理這種情況,作為表初始化和數(shù)據(jù)處理的一部分。

然后我使用該功能(在此頁(yè)面上描述)。我用它來(lái)改變使用該類的所有單元格的數(shù)據(jù)內(nèi)容(特別是字體顏色)。format.bodysummary

這里的關(guān)鍵是創(chuàng)建一個(gè)跨度,該范圍將剝離的類名添加回去。如您所見,打印處理器會(huì)從打印視圖中刪除所有此類手動(dòng)添加的類和樣式。

現(xiàn)在,我可以使用該函數(shù)(在此頁(yè)面上記錄)來(lái)使用我新添加的類名。對(duì)于每個(gè)相關(guān)的,我找到父項(xiàng)并調(diào)整其樣式。customizespantd

最后一點(diǎn):要打印出bacground陰影,我必須從打印菜單中選擇一個(gè)“打印背景”選項(xiàng) - 不過(guò),這可能只是我的打印機(jī)。

希望有所幫助 - 或者至少為您的特定需求提供一些想法。


查看完整回答
反對(duì) 回復(fù) 2022-09-02
  • 1 回答
  • 0 關(guān)注
  • 89 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)