将数据表条件格式设置为特定列中的特定值
Posted
技术标签:
【中文标题】将数据表条件格式设置为特定列中的特定值【英文标题】：Conditional formatting Datatables to specific values in specific columns 【发布时间】：2021-03-01 02:39:47 【问题描述】：所以我有以下模板：
% 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）。我设法通过复制此脚本制作了一个工作数据表，但我不知道如何实现可以使表格更改单元格颜色的有效代码。有人可以将代码插入脚本并告诉我发生了什么吗？谢谢大家。
【问题讨论】：
澄清：当您说“每个单元格中的颜色”时 - 您是指单元格的背景颜色，还是文本的颜色？ @andrewjames 我的意思是背景颜色。 【参考方案1】：我知道的最简单的方法是使用 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' 选项意味着我们只检查每个单元格的显示值。这个can be different 来自过滤器和排序值。在我的简单情况下没有区别，但明确处理这个是个好主意。
渲染逻辑将相关的类名添加到表的<td> 标记中 - 这是 DOM 的一部分，而不是 DataTables 本身的一部分。这就是我们访问每个单元格的node 对象的原因。
使用这个render 函数还意味着即使您对表格进行排序和过滤，格式也会跟随数据。否则，在您排序/过滤后，错误的单元格将被突出显示。
【讨论】：
以上是关于将数据表条件格式设置为特定列中的特定值的主要内容，如果未能解决你的问题，请参考以下文章