1 回答

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊
下面是將自定義格式添加到數(shù)據(jù)表的打印視圖的一種方法。
首先,下面是 HTML 數(shù)據(jù)表:
以下是打印視圖的外觀:
實(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.body
summary
這里的關(guān)鍵是創(chuàng)建一個(gè)跨度,該范圍將剝離的類名添加回去。如您所見,打印處理器會(huì)從打印視圖中刪除所有此類手動(dòng)添加的類和樣式。
現(xiàn)在,我可以使用該函數(shù)(在此頁(yè)面上記錄)來(lái)使用我新添加的類名。對(duì)于每個(gè)相關(guān)的,我找到父項(xiàng)并調(diào)整其樣式。customize
span
td
最后一點(diǎn):要打印出bacground陰影,我必須從打印菜單中選擇一個(gè)“打印背景”選項(xiàng) - 不過(guò),這可能只是我的打印機(jī)。
希望有所幫助 - 或者至少為您的特定需求提供一些想法。
添加回答
舉報(bào)