jqGrid Custom Edit Dialog

Question

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

Итак, мне просто нужно jqGrid, чтобы заполнить диалоговое окно редактирования с помощью специального контента из PHP-скрипта.

ОБНОВЛЕНИЕ: Идея состоит в том, что у меня есть генератор формы, где пользователь устанавливает положение/ширину/высоту/видимость полей редактирования ... и это должно использоваться в диалоговом окне редактирования.

Answer 1

Вы можете использовать editfunc или addfunc вариант navGrid. Если, например, определены editfunc, то вместо editGridRow jqGrid будет называться editfunc с идентификатором выбранной строки в качестве параметра.

Альтернатива вы можете использовать custom button (см. Пример this answer).

Чтобы изменить данные в таблице после пользовательского диалогового окна редактирования, вы можете использовать функцию setRowData.

ОБНОВЛЕНО: Если вам нужно только внести изменения в макет диалогового окна редактирования, вы можете использовать beforeShowForm для модификаций.

Answer 2

Вы можете проверить этот Tutorial, который является официальным демонстрационным сайтом плагина jqGrid. Я уверен, что есть примеры некоторых «Редактирование строк» ​​в этой категории. Вы также можете просмотреть множество других примеров jqGrid на этом демо-сайте.
Вы также можете проверить Home page.

Если у вас возникли проблемы, вы можете попросить его здесь. Я использовал некоторые из этих примеров на одном из моих (конфиденциальных) веб-сайтов моего клиента, поэтому с ними можно будет легко манипулировать в соответствии с вашими потребностями.

Надеюсь, это поможет.

Answer 3

Мой диалог редактирования слишком много полей и так стал слишком высокой, так что мне пришлось положить поля бок о бок в 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]; } }); 
}} 

Вызов этот код в ваших editOptions следующим образом:

afterShowForm: function() { SplitFormatForm("SiteAccountsGrid", false); }