如何在jQuery DataTable中绘制Excel样式的数据栏

How do I draw Excel-style data bars in a jQuery DataTable?

本文关键字：样式 Excel 数据 绘制 jQuery DataTable      更新时间：2023-09-26

我想在jQuery DataTables表的选定列中的值后面添加数据栏，就像Excel中的"数据栏条件格式"选项一样。

这个答案展示了如何使用jqGrid实现这类功能的解决方案。如何在DataTables中实现类似的效果？

使用fnRowCallback((应该很容易。

我手头没有我的示例代码，但可以说，如果您在datatables.net上使用fnRowCallback的示例，您可以使用数据值来创建一个适当宽度的div。让我试着在没有真实世界测试的情况下把它破解在一起…

假设传入数据(aData(和呈现的HTML中的可见数据在同一列中(即没有隐藏列(。让我们进一步假设该列为4(从零开始(，aData中的值表示百分比：

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
  var myValue = aData[4];
  $('td:eq(4)', nRow).html( '<div class="excelBar" style="width:' + myValue + '"></div>' );
  return nRow;
},

这是一个超级简化的例子。它所做的是获取当前行第4列中的值(您可以在这里进行更多的逻辑转换；我假设它已经以百分比的形式出现(，修改渲染html中第4列的html，使其包含与已找到的值宽度相同的div。修改后，它返回行的新值(即重新格式化的行(。

它还有更多……必须已经有了CSS来促进它成为一个栏(display:block，etc.(，但这就是它的长短。

尝试使用这样的fnRender方法，但添加这样的样式div：

fnRender: function (object) {
    return "<div style=width: "+obj.data[0]+"%; />"
}

无法评论如此新的答案。我不得不对已接受的答案做一个小改动，并在div宽度中添加"px"：

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
  var myValue = aData[4];
  $('td:eq(4)', nRow).html( '<div class="excelBar" style="width:' + myValue + 'px"></div>' );
  return nRow;
},

Databar开箱即用：

$("table").dataTable({}, $("table").databar());
相关文章：