jqGrid - группировка полей в форме редактирования

Question

Можно ли группировать несколько полей в форме редактирования?

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

Предположим, у меня есть 4 записи в colModel:

name
address
title
income

Я хотел бы показать это в форме редактирования, например:

Personal:----------
| name     [    ] |
| address  [    ] |
-------------------
Business:----------
| title    [    ] |
| income   [    ] |
-------------------

где поля, принадлежащие к личной группе / категории, будут иметь, скажем, светло-зеленый фон, а поля в бизнес-группе будут иметь светло-красный фон.

Сложность в том, что полей много, и я не хотел бы задавать им цвет фона по отдельности. А если есть группы, то я мог бы даже использовать какой-нибудь плагин jQuery, чтобы позволить пользователю скрывать некоторые группы.

Сейчас я борюсь с custom_element, создавая таблицу вокруг группы, но пока безуспешно.

---

Решение

Как Тони указал на справочном форуме jQuery Grid:

В настоящее время эта функция недоступна или, наконец, добавляется такой функциональный запрос, чтобы использовать некоторые события и знание структуры формы редактирования.

Мы планируем в следующем основном выпуске ввести шаблонизацию в редактировании форм.

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

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

Соответствующие части:

$('<tr class="FormData"><td class="CaptionTD ui-widget-content" colspan="2"><hr/></td></tr>').insertBefore('#tr_********,');
$("#tr_*******,#tr_*******").css("background-color","#def");

Где ******* - имена столбцов из colModel.

Добавление границ и превращение их в складывающиеся объекты - слишком сложная задача, так что пока это будет пропущено.

Answer 1

Что вы можете сделать, это почти бесплатное изменение формы «Добавить» или «Изменить» внутри beforeShowForm callback.Я демонстрирую идею на демонстрации , которую я быстро сделал для вас.В примере показан только пример того, что вы можете сделать:

Соответствующий код:

$.extend($.jgrid.edit, {
    recreateForm: true,
    beforeShowForm: function($form) {
       $('<tr class="FormData"><td class="CaptionTD ui-widget-content" colspan="2">' +
           '<hr/><div style="padding:3px" class="ui-widget-header ui-corner-all">' +
           '<b>Invice information (all about money):</b></div></td></tr>')
           .insertBefore('#tr_amount');
       $('<tr class="FormData"><td class="CaptionTD ui-widget-content" colspan="2">' +
           '<hr/><div style="padding:3px" class="ui-widget-header ui-corner-all">' +
           '<b>Delivery information:</b></div></td></tr>')
           .insertBefore('#tr_closed');
    }
});

Я установил $.jgrid.edit только для изменения beforeShowForm для обоих «Добавить» в «Редактировать» формы.'amount' и 'closed', используемые в .insertBefore('#tr_amount')) и insertBefore('#tr_closed'), являются именами столбцов из colModel.