Диалог пользовательского редактирования jqGrid

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

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

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

Ответы

Ответ 1

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

Альтернатива вы можете использовать пользовательскую кнопку (см. этот ответ в качестве примера).

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

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

Ответ 2

Вы можете проверить этот Учебник, который является официальным демонстрационным сайтом плагина jqGrid. Я уверен, что есть примеры некоторых "Редактирование строк" ​​в этой категории. Вы также можете просмотреть множество других примеров jqGrid на этом демо-сайте.
Вы также можете проверить Главная страница.

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

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

Ответ 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); }