Я работаю над приложением, использующим jqGrid. Проблема в том, что диалог редактирования, который должен появиться при редактировании строки, должен иметь определенный макет. Поэтому я бы предпочел загрузить его через ajax, а затем отправить данные обратно в jqGrid вручную. Я много искал на форумах, но я не мог найти пример того, как это сделать.
Итак, мне просто нужно, чтобы jqGrid заполнил диалоговое окно редактирования с помощью настраиваемого контента из PHP-скрипта.
ОБНОВЛЕНИЕ: Идея состоит в том, что у меня есть генератор формы, где пользователь устанавливает положение / ширину / высоту / видимость полей редактирования … и это необходимо использовать в диалоговом окне редактирования.
Вы можете использовать editfunc или addfunc опцию navGrid . Если, например, editfunc определены, то вместо editGridRow jqGrid будет вызываться editfunc с идентификатором выбранной строки в качестве параметра.
Альтернативу вы можете использовать пользовательскую кнопку (см. Этот ответ в качестве примера).
Чтобы изменить данные в таблице после диалогового окна редактирования, вы можете использовать функцию setRowData .
ОБНОВЛЕНО : Если вам нужно просто внести некоторые изменения в макет диалогового окна редактирования, вы можете использовать beforeShowForm для модификаций.
Вы можете проверить это учебное пособие , которое является официальным демо-сайтом плагина jqGrid. Я уверен, что есть примеры некоторых «Редактирование строк» в этой категории. Вы также можете просмотреть множество других примеров jqGrid на этом демо-сайте.
Вы также можете проверить домашнюю страницу .
Если у вас есть еще какие-то проблемы, вы можете попросить его здесь. Я использовал некоторые из этих примеров на одном из моих (конфиденциальных) веб-сайтов моего клиента, поэтому с ними можно будет легко манипулировать в соответствии с вашими потребностями.
Надеюсь, поможет.
В моем диалоговом окне редактирования было слишком много полей и стало слишком высоким , поэтому мне пришлось поместить поля бок о бок в 2 столбца . Я сделал это следующим образом:
Я пробовал различные способы, используя wrap () и т. Д., Но обнаружил, что значения не отправляются на сервер, если вы изменяете исходную структуру таблицы. Поэтому я просто клонировал элементы tr, поместил их в новые таблицы и спрятал старые. Я не скрывал всю таблицу, так что проверка еще будет видна. Я установил onchange на клонированных элементах, чтобы обновить старые. Это отлично работает. Параметр tableName – ваш идентификатор элемента jqgrid.
var splitFormatted = false; function SplitFormatForm(tableName, add) { if (!splitFormatted) { splitFormatted = true; $("#FrmGrid_" + tableName).append('<table><tr><td><table id="TblGrid_' + tableName + '_A" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td><td><table id="TblGrid_' + tableName + '_B" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td></tr></table>'); var cc = $("#TblGrid_" + tableName + "> tbody").children("tr").length; var s = (cc / 2) - 1; var x = $("#TblGrid_" + tableName + "> tbody").children("tr"); var i = 0; x.each(function (index) { var e = $(this).clone(); var oldID = e.attr("id") + ""; var newID = oldID; if (oldID.substring(0, 3) === "tr_") { newID = "clone_" + oldID; $(this).css("display", "none"); e.change(function () { $("#" + oldID + " > .DataTD > .FormElement").val($("#" + newID + " > .DataTD > .FormElement").val()); }); e.attr("id", newID); if (i++ < s) { $("#TblGrid_" + tableName + "_A").append(e); } else { $("#TblGrid_" + tableName + "_B").append(e); } } }); //This hack makes the popup work the first time too $(".ui-icon-closethick").trigger('click'); var sel_id = "'new'"; if (!add) { sel_id = jQuery('#'+tableName).jqGrid('getGridParam', 'selrow'); } jQuery('#'+tableName).jqGrid('editGridRow', sel_id, { closeAfterAdd: true, width: 800, afterSubmit: function (response, postdata) { return [response.responseText == 'OK', response.responseText]; } }); }}доvar splitFormatted = false; function SplitFormatForm(tableName, add) { if (!splitFormatted) { splitFormatted = true; $("#FrmGrid_" + tableName).append('<table><tr><td><table id="TblGrid_' + tableName + '_A" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td><td><table id="TblGrid_' + tableName + '_B" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td></tr></table>'); var cc = $("#TblGrid_" + tableName + "> tbody").children("tr").length; var s = (cc / 2) - 1; var x = $("#TblGrid_" + tableName + "> tbody").children("tr"); var i = 0; x.each(function (index) { var e = $(this).clone(); var oldID = e.attr("id") + ""; var newID = oldID; if (oldID.substring(0, 3) === "tr_") { newID = "clone_" + oldID; $(this).css("display", "none"); e.change(function () { $("#" + oldID + " > .DataTD > .FormElement").val($("#" + newID + " > .DataTD > .FormElement").val()); }); e.attr("id", newID); if (i++ < s) { $("#TblGrid_" + tableName + "_A").append(e); } else { $("#TblGrid_" + tableName + "_B").append(e); } } }); //This hack makes the popup work the first time too $(".ui-icon-closethick").trigger('click'); var sel_id = "'new'"; if (!add) { sel_id = jQuery('#'+tableName).jqGrid('getGridParam', 'selrow'); } jQuery('#'+tableName).jqGrid('editGridRow', sel_id, { closeAfterAdd: true, width: 800, afterSubmit: function (response, postdata) { return [response.responseText == 'OK', response.responseText]; } }); }}
Вызовите этот код в editOptions следующим образом:
afterShowForm: function () { SplitFormatForm("SiteAccountsGrid", false); }