jqgrid - Jqgrid:行の色を動的に変更する

Question

私は Jqgrid を使用しています。列の値に基づいて行の色を変更したいと思います。この列の値に基づいて行のクラスを変更できますが、サーバーから取得した色の値でフォントの色を変更する必要があります。これはどのように行うことができますか？

Answer 1

これは、列のカスタム フォーマッタを使用して行うことができます。

フォーマッタは、次の形式を使用して記述する JavaScript 関数になります。

function myformatter ( cellvalue, options, rowObject )
{
     // format the cellvalue to new format
     return new_formated_cellvalue;
}

グリッドがこれらの値をルーティングする場所:

• cellvalue - フォーマットされる値です。
• options - セル/行に関する情報を含むオブジェクトです。
• rowObject - グリッド データ型オプションによって決定される形式の行データです。

したがって、カスタム フォーマッタでは、次のように、セル値を取得してクラスまたはインライン フォント スタイルを適用できます。

function myformatter ( cellvalue, options, rowObject )
{
    if (cellvalue == "red")
         return '<font color="red">' + cellvalue + '</font>';//or use classes
    else
         return '<font color="blue">' + cellvalue + '</font>';//or use classes
}

次に、列定義で、このフォーマッタを使用する列を指定するだけです (フォントの色が必要な列に追加します)。

colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:myformatter},
      ...
   ]

Answer 2

または、これも試すことができます。loadComplete で、このように jqgrid のすべての行 ID を取得します。

var allRowsOnCurrentPage = $('#grid').jqGrid('getDataIDs');

jqgridに名前と会社の列があり、2つの行があるとしましょう。1行分のデータはこんな感じ

名前:xxx 会社名:yyy

2行目には、このようなデータがあります

お名前：aaa 会社名：bbb

したがって、 for ループ内で Name 値を取得します

for(int i=1;i<=allRowsOnCurrentPage.length;i++)
{
var Name=$('#grid').jqGrid('getCell',i,'Name');
if(Name="aaa")
{
$('#grid').jqGrid('setCell',i,"Name","",{'background-color':'yellow');
}
}

コードはテストされていませんが、動作するはずです。

Answer 3

colModel で cellattr プロパティを使用する

cellattr: function (rowId, value, rowObject, colModel, arrData){
return 'style=background-color:black;'; }