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

Question

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

Единственный способ, которым я вижу это возможным, - использовать пользовательский форматер с edittype:'custom', и в этом случае два или более полей должны быть разделены / объединены при загрузке / сохранении соответственно.

Если прибегнуть к этому ужасному и утомительному подходу, есть ли лучший / более простой способ сделать это?

Answer 1

Вы можете использовать beforeShowForm или afterShowForm для изменения формы.

Следует учитывать, что данные формы будут помещены в <table> с id, как "TblGrid_"+grid_id. Строки таблицы имеют идентификаторы, подобные tr_myCol, где имя 'myCol' - это значение свойства name из соответствующего столбца сетки из colModel. Таким образом, вы можете добавить элемент <tr> к новому элементу <td> с дополнительной информацией, которая вам нужна. Разумеется, вам следует увеличить значение свойства width формы.

Старый ответ может быть полезен для вас.

ОБНОВЛЕНО : Если вы изучите код jqGrid, вы найдете следующие фрагменты кода в getFormData grid.formedit.js:

$("#"+frmtb+" > tbody > tr > td > .FormElement").each(function(i) {
    ...
    switch ($(this).get(0).type) {
        ...
        case "text":
            postdata[this.name] = $(this).val();
    ...
}

Поэтому важно, чтобы элементы input, select и другие элементы ввода находились где-то внутри и в ячейке <td> той же таблицы формы. Например, элемент ввода для столбца "invdate" будет иметь (в упрощенном виде)

 <input class="FormElement" name="invdate" type="text">

Так что в нем уже есть все поля, которые вам нужны. Вы можете изменить порядок полей ввода, как вы хотите. Вы можете добавить дополнительные элементы <tr> или <td> или удалить их. Например, вы можете уменьшить таблицу до одной <tr> и одной <td> ячейки и разместить все поля ввода и метки внутри ячейки. Мне кажется, что форма редактирования будет работать без проблем.

Так что вы действительно можете внести множество изменений в формы редактирования / добавления.