jqgrid: как установить класс CSS для конкретной ячейки во время генерации

Question

Я создаю jqgrid, который нуждается в другом значении фона (или вообще другого класса CSS) для определенных ячеек.Я знаю, для каких ячеек нужен класс, применяемый во время генерации данных, отправляемых в jqgrid.Я хотел бы иметь возможность указать класс в структуре строк jqgrid для каждой конкретной ячейки:

<rows>
  <page> </page>
  <total> </total>
  <records> </records>
    <row>
      <cell>1.00</cell>
      <cell class='errorClass'>15.00</cell>
      <cell class='warningClass'>9.00</cell>
        …
    </row>
    <row>
      <cell>1.00</cell>
      <cell>2.00</cell>
      <cell>1.15</cell>
        …
    </row>
      …
</rows>

Я знаю, что могу сделать это форматирование после отправки данных, но я бы хотелувидеть сетку, нарисованную с форматированием на месте, а не после факта.

Я достиг чего-то похожего на то, что хочу, установив с помощью тега в ячейке:

<cell><span class='warningClass'>3.00</span></cell>

Но он не устанавливает класс для всей ячейки, только данные внутри,выделен только текст, а не вся ячейка.

Answer 1

Мне интересен ваш вопрос, поэтому я сделал для вас демо .

Если вы хотите установить некоторые пользовательские атрибуты для ячеек сетки (<td> элементов), например class, title, colspan, style, cellattr - лучший сделать это (см. здесь для деталей). cellattr близки к функции custom formatter , но позволяют определять атрибуты ячейки, а не ее содержимое.

В демоверсии Я использовал следующий XML-ввод:

<?xml version='1.0' encoding='utf-8'?>
<rows>
<page>1</page><total>1</total><records>2</records>
    <row id='13'>
        <cell>1.00</cell>
        <cell class='ui-state-error'>15.00</cell>
        <cell>9.00</cell>
    </row>
    <row id='12'>
        <cell>1.00</cell>
        <cell>2.00</cell>
        <cell class='ui-state-highlight'>1.15</cell>
    </row>
</rows>

и cellattr, как показано ниже

cellattr: function () {
    var c = $('cell:eq(1)', arguments[2]).attr('class');
    return c ? " class='" + c + "'": "";
}

В случае, если для форматирования будет использоваться атрибут 'class' второй (': eq (1)') ячейки.

С точки зрения дизайна, я бы порекомендовал вам не использовать имена классов напрямую в качестве атрибутов. Альтернативный атрибут, такой как format="error", который будет преобразован в class='ui-state-error', имеет некоторые преимущества. Это может отделить информацию, такую ​​как советы по форматированию, от прямой инструкции HTML.

Answer 2

Используя ответ Олега, я собрал и проверил следующее для моей ситуации, используя динамически созданную colModel (colM):

for each (var colModelItem in colM)
{
   colModelItem.cellattr = function (rowId, val, rawObject, cm, rdata){
      var pos = findColModelInList(cm, colM);
      var srchText = 'cell:eq(' + pos + ')';
      var c = jQuery(srchText, arguments[2]).attr('class');
      return c ? " class='" + c + "'": "";
   };
}

где

function findColModelInList(colModel, modelList)
{
    var index = 0;
    var retval = -1;
    for each (var modelItem in modelList)
    {
        if (modelItem.name == colModel.name)
        {
            retval = index;
        }
        index++;
    }
    return retval;
}