Добавление класса CSS в столбец

Как вы можете добавить свой собственный класс в столбец внутри jqgrid. Как я вижу, элементы ввода html получают класс "FormElement". Мне нужно добавить класс в конкретный столбец. Я нашел этот http://www.trirand.com/blog/?page_id=393/help/cell-tooltip-1/#p21526, но я не уверен, что это самый удобный способ достичь этого? Я хочу пройти через все строки и ячейки, а затем вручную изменить свойство класса - кажется, это накладные расходы для такой "простой" задачи.

UPDATE

Я хочу добавить класс, потому что я хочу использовать функциональность этого виджета мультиселекта http://quasipartikel.at/multiselect/. Этот виджет работает через определенные классы. Вот почему.

ОТВЕТЫ

Ответ 1

Вероятно, вам нужно использовать свойство classes для соответствующего столбца.

Я не уверен, что это вам нужно, потому что вы писали о FormElement классе, существующем в форме. В случае, если вы должны использовать beforeShowForm обратный вызов редактирования формы, например, чтобы добавить класс в поле ввода соответствующего поля формы редактирования. Идентификатор полей в форме совпадает с свойством name соответствующего столбца colModel.

Если вам действительно нужно добавить атрибут класса в ячейки одного столбца, у вас есть еще одна возможность: определение cellattr обратного вызова для столбца colModel. Способ может быть практичным, если вам нужно добавить класс не для всех ячеек столбца. Вы можете проверить некоторые условия на основе содержимого строки и установить класс только в том случае, если это условие выполнено. Например, использование classes:'ui-state-error-text ui-state-error' будет устанавливать соответствующие два класса (ui-state-error-text и ui-state-error) для всех ячеек в столбце. С другой стороны функция обратного вызова

cellattr: function(rowId, val, rawObject) {
    if (parseFloat(val) > 200) {
        return " class='ui-state-error-text ui-state-error'";
    }
}

позволяет вам установить класс только в том случае, если значение ячейки выше, чем 200. Я не использовал rawObject в вышеупомянутом обратном вызове, и поэтому можно было удалить необязательный параметр. Я добавил его в обратный вызов, чтобы напомнить вам, что можно использовать параметр для доступа к значениям из других столбцов строки. Таким образом, вы можете реализовать еще более сложные сценарии в cellattr.

В результате можно получить сетку, как на следующем рисунке:

enter image description here

ОБНОВЛЕНО. Если вам нужно добавить class в поле ввода редактируемой формы, вы можете дополнительно использовать обратный вызов dataInit editoptions. В случае использования будет очень просто. Вы можете сделать, например, следующее:

editoptions: {
    dataInit: function (domElem) {
        $(domElem).addClass("ui-state-highlight");
    }
}

В результате вы получите форму редактирования, например

enter image description here

Здесь вы можете найти здесь.

Ответ 2

Существует опция classes colmodel, которая делает именно то, что вам нужно. Из документации jqGrid:

классы

строка

Эта опция позволяет добавлять классы в столбец. Если будет использовано более одного класса, должно быть задано пространство. В качестве примера classes:'class1 class2' будет задан класс1 и класс2 для каждой ячейки в этом столбце.

В сетке css имеется предопределенный ui-эллипсис класса, который позволяет присоединить эллипсис к определенной строке. Также это будет работать и в FireFox.