1

次のコードがあるとします。

var aDataSet = [
    ['1', 'Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['2', 'Fish','Internet Explorer 5.0','Win 95+','5','C'],
    ['3', 'Pony','Internet Explorer 5.5','Win 95+','5.5','A']
];

$('#example').dataTable( {
    "aaData": aDataSet,
    "aoColumns": [
        { "sTitle": "Engine" },
        { "sTitle": "Browser" },
        { "sTitle": "Platform" },
        { "sTitle": "Version", "sClass": "customCSS-" +aDataSet['id']['Version']  }, 
        { "sTitle": "Grade", "sClass": "center" }
    ]
} );

スタイリングのコンテキスト内で文字列連結を実行できるように、現在処理中のaDataSet要素を検索してその情報を取得できるようにしたいと考えています。上記はスタイリングを実行しません。この変更:VersionaoColumns

    { "sTitle": "Version", "sClass": "customCSS-" +aDataSet[0]['Version']  }

すべてが（明らかに）0番目のインデックスに一致しますが、どうにかしてそのルックアップを強制できると思います。どんな洞察も高く評価されます。

4

1 に答える 1

3

正直なところ、Versionそれはデータテーブルの標準のダミーデータにすぎないため、値自体について心配しているとは思わないので、cssクラス名の連結の一部としてそれを使用しないようにしました。値にはドットが含まれており、Versionそれらは css を台無しにします。次に、それを念頭に置いて、あなたがやろうとしていることを私が理解していると仮定すると、jsbin に示されているように、タスクを実行する 1 つの方法を次に示します。

http://jsbin.com/onelev/2/edit

ここでの主なポイントは、fnRowCallbackを使用してテーブル セルに動的クラス名を生成することです。

カスタムセルの色をスタイリングするための CSS

.customCSS-Trident, table.dataTable tr.even td.customCSS-Trident.sorting_1, table.dataTable tr.odd td.customCSS-Trident.sorting_1 { background-color: blue; color: #fff; }
.customCSS-Fish, table.dataTable tr.even td.customCSS-Fish.sorting_1, table.dataTable tr.odd td.customCSS-Fish.sorting_1 { background-color: green; color: #fff; }
.customCSS-Pony, table.dataTable tr.even td.customCSS-Pony.sorting_1, table.dataTable tr.odd td.customCSS-Pony.sorting_1 { background-color: brown; color: yellow; }
.customCSS-Cabbage, table.dataTable tr.even td.customCSS-Cabbage.sorting_1, table.dataTable tr.odd td.customCSS-Cabbage.sorting_1 { background-color: pink; }

JavaScript 

   $(document).ready( function() {
     var oTable = $('#example').dataTable( {
       "aaData": aDataSet,
       "aoColumnDefs": [ 
         {  "aTargets": [ 0 ], 
            "sTitle": "#" 
         },
         {  "aTargets": [ 1 ], 
            "sTitle": "Engine" 
         },
        { "aTargets": [ 2 ], 
           "sTitle": "Browser" 
        },
        { "aTargets": [ 3 ], 
         "sTitle": "Platform" 
        },
         { "aTargets": [ 4 ],
          "sTitle": "Version"
        },      
        { "aTargets": [ 5 ], 
          "sTitle": "Grade", 
          "sClass": "center" 
         }
       ], 
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
          $('td:eq(4)', nRow).addClass("customCSS-" + aData[1]);    
            return nRow;
        },
     });
   } );

HTML 

      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
          <tr>
            <th>#</th>
            <th>Engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
          </tr>
        </thead>
        <tbody>
       </tbody>
  </table>

Addendum
DataTables は、sorting_1特定の 1 つの列を並べ替えるとクラスを動的に生成します。Shift キーを押したまま別の列ヘッダーをクリックする洗練されたユーザーがいる場合、datatables はsorting_2などと呼ばれる別のクラスを生成します。ユーザーが複数の列で並べ替える可能性は非常に低い可能性がありますが、これらのケースはcss、それらの余分なケースに追加のルールを追加することで処理できます。

于 2013-06-13T04:44:35.820 に答える