將數據表條件格式化為特定列中的特定值
[英]Conditional formatting Datatables to specific values in specific columns
問題描述
所以我有以下模板：
{% load static %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivCSAT.net/npm/poppeCSAT.js@1.16.1/dist/umd/poppeCSAT.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"></script>
<div class="table-responsive-sm" style="overflow:scroll">
<table class="table table-striped table-bordered table-hover" id="example">
<thead class="thead-dark">
<tr>
<th colspan="12" scope="colgroup"></th>
</tr>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>F</th>
</tr>
</tfoot>
</table>
</div>
在 C、D 和 E 列中顯示的值是：R、G、Y（紅色、綠色、黃色）
我有以下腳本：
<script>
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
我想要做的是將 C、D 和 E 列的每個單元格中的顏色對應於在相應單元格中找到的值（R=red、G=green、Y=yellow）。 我設法通過復制此腳本制作了一個工作數據表，但我不知道如何實現可以使表格更改單元格顏色的有效代碼。 有人可以將代碼插入腳本並告訴我發生了什么嗎？ 謝謝你們。
1 個解決方案
解決方案1
0 已采納 2020-11-18 18:41:13
我知道的最簡單的方法是使用columnDefs.render選項，以及一些支持 CSS。
這是 CSS，就我而言，我將其包含在 HTML 頁面的<head>部分中：
<style>
.bg_red {
background-color: red !important;
}
.bg_yellow {
background-color: yellow !important;
}
.bg_green {
background-color: green !important;
}
</style>
注意 CSS 中!important的使用。 這有點粗糙，但意味着此 CSS 會覆蓋可能由 DataTables 應用的任何行陰影（例如，所謂的“斑馬條紋”）。
我的測試表只是以下硬編碼的 HTML：
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr><th>A</th><th>B</th><th>C</th></tr>
<thead>
<tbody>
<tr><td>R</td><td>R</td><td>Y</td></tr>
<tr><td>Q</td><td>X</td><td>G</td></tr>
</tbody>
</table>
DataTables 函數如下：
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
targets: [1, 2],
"render": function ( data, type, row, meta ) {
var table = $('#example').dataTable().api();
if (type === 'display') {
var node = table.cell(meta.row, meta.col).nodes().to$();
if ( data === 'R' ) {
node.addClass('bg_red');
} else if ( data === 'G' ) {
node.addClass('bg_green');
} else if ( data === 'Y' ) {
node.addClass('bg_yellow');
}
}
return data;
}
} ]
} );
} );
</script>
targets: [1, 2]選項意味着渲染邏輯將僅適用於我的表中的第 2 和第 3 列（第一列的索引為零）。
type === 'display'選項意味着我們只檢查每個單元格的顯示值。 這可能與過濾器和排序值不同。 在我的簡單情況下沒有區別，但明確處理這個是個好主意。
渲染邏輯將相關的類名添加到表的<td>標記中 - 這是 DOM 的一部分，而不是 DataTables 本身的一部分。 這就是我們訪問每個單元格的node對象的原因。
使用此render功能還意味着即使您對表格進行排序和過濾，格式也會跟隨數據。 否則，排序/過濾后會突出顯示錯誤的單元格。
在特定斷點處隱藏 DataTables 列
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.