2

ExcelのData Bars Conditional Formatting オプションのように、jQuery DataTables テーブルの選択された列の値の後ろにデータ バーを追加しようとしています。

この回答は、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 に答える