2

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

这个答案显示了如何使用 jqGrid 实现这类事情的解决方案。我将如何在 DataTables 中实现类似的效果？

4

4 回答 4

1

使用 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 来促进它成为一个栏（显示：块等......），但这就是它的长处和短处。

于 2012-06-24T03:46:38.640 回答
0

尝试使用这样的 fnRender 方法怎么样，而是添加这样的样式 div：

fnRender: function (object) {
    return "<div style=width: "+obj.data[0]+"%; />"
}
于 2012-06-22T17:05:19.427 回答
0

不能评论这么新的答案。我不得不对接受的答案做一个小改动，并将 'px' 添加到 div 宽度：

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
  var myValue = aData[4];
  $('td:eq(4)', nRow).html( '<div class="excelBar" style="width:' + myValue + 'px"></div>' );
  return nRow;
},
于 2014-05-27T16:25:49.660 回答
0

Databar开箱即用：

$("table").dataTable({}, $("table").databar());
于 2016-01-07T11:39:16.040 回答