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

Question

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

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

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

Answer 1

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

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

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

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

Answer 2

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

Я пробовал разные способы, используя wrap () и т. Д., Но обнаружил, что значения не публикуются на сервере, если вы изменили исходную структуру таблицы. Поэтому я просто клонировал элементы tr, поместил их в новые таблицы и спрятал старые. Я не скрывал всю таблицу, так что проверка все равно будет видна. Я поместил обмен на клонированные элементы, чтобы обновить старые. Это прекрасно работает. Параметр 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]; } });
}}

Назовите этот код в ваших правках редактирования следующим образом:

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

Answer 3

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

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

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