Я использую Jqgrid. Я хотел бы изменить цвет строки на основе значения столбца. Я могу изменить класс строки на основе этого значения столбца. Но мне нужно изменить цвет шрифта на значение цвета, которое я получаю с сервера. Как это можно сделать?
Jqgrid: динамическое изменение цвета строки
Ответы:
Это можно сделать с помощью настраиваемого средства форматирования столбца.
Форматтер будет функцией 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},
...
]
Или вы также можете попробовать это, в loadComplete получите все идентификаторы строк jqgrid, как это
var allRowsOnCurrentPage = $('#grid').jqGrid('getDataIDs');
и скажем, у вас есть столбец имени и компании в jqgrid и есть две строки. Для одной строки данные такие
Имя:xxx Компания:yyy
и для второй строки у вас есть такие данные
Имя: aaa Компания: bbb
Таким образом, вы получаете значение Name внутри цикла for
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');
}
}
код не тестировался, но должен работать.
Использовать свойство cellattr в colModel
cellattr: function (rowId, value, rowObject, colModel, arrData){
return 'style=background-color:black;'; }