jqGrid, как добавить строку в любую позицию внутри сетки через модальную форму?

Question

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

Извините за мой плохой английский. Заранее спасибо.

Answer 1

То, что вам нужно, возможно и не так сложно.Посмотрите на очень старое демо из ответа .Если у вас есть столбец с name: 'myColName', и вы хотите вставить любую информацию в форму редактирования или добавить после информации о столбце, вы можете просто вставить строку данных внутри.Форма содержит <table>.Таким образом, вы должны вставить <tr>, имеющий один или два дочерних элемента <td> (ячейка для метки и ячейка для данных).Чтобы соответствовать другим данным в форме, вы должны использовать class="FormData" для элемента <tr>.Первый элемент <td> (в столбце для меток) должен иметь class="CaptionTD ui-widget-content", а второй элемент <td> (в столбце для данных для ввода модификации) должен иметь class="DataTD ui-widget-content":

{ // edit options
    recreateForm: true,
    beforeShowForm: function ($form) {
        var $formRow = $form.find('#tr_Name'); // 'Name' in the column name
                        // after which you want insert the information
        $('<tr class="FormData"><td class="CaptionTD ui-widget-content">' +
             '<b>Label:</b>' + // in the line can be any custom HTML code
             '</td><td class="DataTD ui-widget-content">' +
             '<span></span>' + // in the line can be any custom HTML code
             '</td></tr>').insertAfter($formRow);
    }
}

ОБНОВЛЕНО : ОК, теперь я понимаю, что вы хотите.Проблема в том, что addRowData будет вызываться для добавления новой строки с опцией Addedrow из editGridRow .Поэтому, если вы используете опцию reloadAfterSubmit: false, вы можете добавить новую строку как 'first' или как 'last' в сетке.Чтобы иметь возможность использовать 'after' или 'before' параметр addRowData, метод addRowData должен быть вызван с еще одним параметром, который указывает идентификатор строки, перед которой (или после которой) будет вставлена ​​новая строка.

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

Вы можете сохранить указатель на исходную реализацию addRowData в переменной и перезаписать ее своей реализацией:

var oldAddRowData = $.fn.jqGrid.addRowData;
$.jgrid.extend({
    addRowData: function (rowid, rdata, pos, src) {
        if (pos === 'afterSelected' || pos === 'beforeSelected') {
            if (typeof src === 'undefined' && this[0].p.selrow !== null) {
                src = this[0].p.selrow;
                pos = (pos === 'afterSelected') ? 'after' : 'before';
            } else {
                pos = (pos === 'afterSelected') ? 'last' : 'first';
            }
        }
        return oldAddRowData.call(this, rowid, rdata, pos, src);
    }
});

Приведенный выше код вводит две новые опцииaddRowData: 'afterSelected' и 'beforeSelected'.Если вы включите код до создания jqGrid, сетка будет создана с использованием вашего пользовательского addRowData, поэтому вы можете использовать новые addedrow: 'afterSelected' или addedrow: 'beforeSelected' в качестве параметров формы добавления.

Демо показывает в прямом эфире, что предложение работает.Вы не должны смотреть на многие другие коды демо.Текущая реализация редактирования форм не поддерживает локальное редактирование, но в демонстрации я использовал только старый код, который делает это.Таким образом, общий код демонстрации относительно длинный, но ту часть, которую я хочу продемонстрировать, вы легко найдете внутри.