如何在jQuery DataTable中绘制Excel样式的数据栏？ [英] How do I draw Excel-style data bars in a jQuery DataTable?

问题描述

我希望在jQuery DataTables表的选定列中添加值后面的数据栏，例如数据栏条件格式选项。

I'm looking to add data bars behind values in a selected column of a jQuery DataTables table, like the Data Bars Conditional Formatting option in Excel.

此答案显示了如何实现此类排序的解决方案与jqGrid的事情。我如何在DataTables中实现类似的效果？

This answer shows a solution of how to achieve this sort of thing with jqGrid. How would I achieve a similar effect in DataTables?

推荐答案

使用fnRowCallback（）非常简单。

Should be pretty easy, using fnRowCallback().

我手边没有示例代码，但是如果你在datatables.net上使用fnRowCallback的例子就可以了，你可以使用数据值来创建一个div适当的宽度。让我尝试将它一起进行黑客攻击而不进行实际测试...

I don't have my sample code onhand, but suffice it to say that if you use the example on datatables.net for fnRowCallback, you can use the data value to create a div of an appropriate width. Let me try hacking it together without real-world testing it...

假设您呈现的HTML中的传入数据（aData）和可见数据位于同一列中（即。没有隐藏的列）。让我们进一步假设列是4（从零起）并且aData中的值表示百分比：

Assume your incoming data (aData) and visible data in the rendered HTML are in the same column (ie. there are no hidden columns). Let's assume further that the column is 4 (from zero origin) and that the value in aData represents a percentage:

"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。修改后，它返回行的新值（即重新格式化的行）。

That's a super-simplified example. What it does is grab the value found in column 4 of the current row (you could do more logic here to convert; I'm assuming it already comes in as a percentage), modifies the html of column 4 in the rendered HTML to contain a div that is the same width as the value already found. After modifying, it returns the new value of the row (ie. the re-formatted row).

还有更多内容...必须已经有CSS在适当的位置，以促成这成为一个酒吧（显示：块等...），但这是它的长短。

There's a bit more to it... there must already be CSS in place to facilitate this becoming a bar (display: block, etc...), but that's the long and the short of it.

这篇关于如何在jQuery DataTable中绘制Excel样式的数据栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！