jqGrid с пользовательскими цветами ячеек - PullRequest
Новая
       11

jqGrid с пользовательскими цветами ячеек

6 голосов
/ 20 апреля 2009

Возможно ли в jqGrid (сетка jquery http://www.trirand.com/blog/)) иметь собственные цвета текста ячейки, например, в столбце цен, я хочу красный, если цена> 100 $, и зеленый, если цена <50 $, иначе серый? </p>

В общем случае

  1. jqGrid предоставляет хуки для изменения ячеек сетки, например я могу зарегистрировать обратный вызов всякий раз, когда ячейки ценового столбца создаются или изменяются.

  2. или возможно иметь отдельную модель и вид (на стороне клиента) например с сервера я могу отправить две данные для каждой строки, т. е. как отображать и что отображать

Редактировать: так вот пример, показывающий пример форматера, который окрашивает ячейку на основе значения 

function infractionInFormatter(el, cellval, opts)
{
    $(el).html(cellval).css('color',infraction_color_map[cellval]);
}

colModel :[ 
    ...
    {name:'date', index:'date', width:120, date:true}, 
    {name:'inf_out', index:'inf_out', width:60, formatter:infractionInFormatter,},
    ...
],

Ответы [ 3 ]

8 голосов
/ 20 апреля 2009

Да, вы можете сделать это. Напишите пользовательский форматер . Это просто функция, на которую вы передаете ссылку в вашем colModel. Вы получаете ссылку на последний селектор ячеек в функции, поэтому все, что вы можете сделать с jQuery, вы можете сделать в форматере. В том числе изменить цвет / стиль.

2 голосов
/ 24 сентября 2010

Вы также можете указать класс в colModel: 

colModel: [
           {
            name:'field_x', 
            index:'field_x',  
            align: 'left',  
            width:  35, 
            classes: 'cvteste'
           },
          .....
          ]
0 голосов
/ 08 июля 2010

Я бы установил красный фоновый цвет, если ячейка имеет значение ххх, иначе зеленый фон, если значение равно ггг.

Я написал этот код: 

.....
colModel:[
    {name:'id',index:'id', width:15,hidden:true, align:"center"},
    {name:'title',index:'title', width:150, align:"center"},
    {name:'start',index:'start', width:350, align:"center", sorttype:"date"},
    {name:'fine',index:'fine', width:350, align:"center", sorttype:"date"},
    {name:'completed',index:'completed', width:120, align:"center",formatter:infractionInFormatter},        
    ],
.....

И эта функция, как ваш пример: 

function infractionInFormatter(el, cellval, opts)
        {
            .....
        }

Как мне его настроить?

Большое спасибо.

...