jqGrid - встроенное редактирование - обнаружение грязных / измененных ячеек

Question

Есть ли пример использования getChangedCells в jqgrid способ определить, изменились ли данные?

Я загрузил getChangedCells в загружаемые демки для jqgrid, и мог найти только определение функции, а не пример использования getChangedCells.

Что я хочу сделать, это сохранить изменения, которые пользователь сделано, если пользователь нажимает на другую строку. Но я только хотите сохранить, если строка грязная.

Заранее спасибо, --Nate

Answer 1

На ряду нет безопасного грязного флага.Вы можете использовать тот факт, что в начале редактирования строки (в начале встроенного режима редактирования ) метод editRow добавляет атрибут editable="1" к строке сетки (<tr>элемент).Позже методы saveRow и restoreRow изменяют значение атрибута на editable="0".Таким образом, строки текущей страницы, которая была хотя бы один раз в режиме встроенного редактирования, будут иметь атрибут editable.Если идентификатором элемента таблицы является «список», вы можете найти отредактированные строки с помощью

$("#list tr[editable]")

Идентификаторы элементов набора - это идентификаторы строк.

Если выПри использовании подкачки в сетке вы должны быть осторожны и сохранять идентификаторы отредактированных строк на текущей странице перед изменением страницы.Здесь вам может помочь событие onPaging .

На мой взгляд, лучший и самый безопасный способ сделать то, что вам нужно, это использовать параметр aftersavefunc editRow или методы saveRow (возможно, вы используете только editRow ).Внутри вашей функции aftersavefunc вы можете сохранить идентификатор измененной строки в массиве / карте.Это решит вашу проблему и обеспечит безопасную работу.

Answer 2

Наконец, мне удалось принести кусок кода, чтобы определить, что мы хотим;)

Надеюсь, у любого гуру jqgrid (например, Олег ) есть достаточно времени, чтобы просмотреть этот кодулучшите его.

Пример кода будет работать для обнаружения данных, измененных в сетке с редактируемым полем с именем "name" .Если вы хотите проверить наличие измененных данных в большем количестве столбцов, вам нужно добавить переменные after_edit и before_edit, связанные с этими столбцами.

Чтобы получить предыдущие данные ячейки внутри функции onSelectRow, яне используйте метод getCell, потому что в документации написано красным:

Не используйте этот метод при редактировании строки или ячейки.Это вернет содержимое ячейки, а не действительное значение элемента ввода

С позором я мог убедиться, что документация была правильной :(. Однако функция getCell работает правильно с текущими данными ячейки.

А вот и код:

 // Declare variables used for inline edit functionality.
 var last_selected;
 var before_edit_value;
 var after_edit_value;
 $('#grid-id').jqGrid({
...

onSelectRow: function(row_id){
    if(row_id && row_id !== last_selected) {
        /*
         * Determine if the value was changed, if not there is no need to save to server.
         */
         if (typeof(last_selected) != 'undefined') {
            after_edit_value = $('#grid-id tr#' + last_selected + ' .name_column input').val();
         }

        if (before_edit_value != after_edit_value) {
            /*
             * Save row.
             */
            $('#grid-id').jqGrid(
                'saveRow', 
                last_selected, 
                function(response){
                    /* SuccessFunction: Do something with the server response */

                    return true;    
                }, 
                'http://url.to.server-side.script.com/server-side-script.php', 
                {
                    additional_data: 'example: additional string',
                });
            }
            else {
                /*
                 * Restore the row.
                 */
                $('#grid-id').jqGrid('restoreRow', last_selected);
            }

        before_edit_value   = $('#grid-id').jqGrid('getCell', row_id, 'name');
    }   

    last_selected       = row_id;

    /*
     * Edit row.
     */
    $('#grid-id').jqGrid(
        'editRow', 
        row_id, 
        true, 
        function() {/* OnEditFunction */}, 
        function(response) {
        /* SuccessFunction: Do something with the server response */

        return true;

    }, 
    'http://url.to.server-side.script.com/server-side-script.php', 
    {
        additional_data: 'example: additional string',
    }); 
   },
...
});

Answer 3

В одном из моих проектов я сделал следующее: перед редактированием строки я запоминаю данные строки в глобальной переменной, а после завершения редактирования просто проверяю, были ли изменены данные строки.Примерно так (режим редактирования активируется двойным кликом):

var beforeEditData;</p> <pre><code>function onGridDblClickRow(id) { if (isRowEditable(id)) { beforeEditData = grid.getRowData(id); grid.editRow(id, true, null, null, 'clientArray', null, onRowAfterEdit); ... } } function onRowAfterEdit(row) { var data = grid.getRowData(row); if (!isDataChanged(beforeEditData, data)) { return; // No changes } ... // Save data here } function isDataChanged(before, after){ ... // Allows tricky logic for dirty data, e.g. one may trim spaces etc. }

Answer 4

Используя MVC4 и JQuery, это то, что я сделал

В представлении

<script type="text/javascript">

var $grid = $("#Grid");
var lastSelection;
var datachanged = false;

function gridInitialised() {
    var headers = $('th>div>:input');
    for (var h = 0; h < headers.length; headers[h++].onclick = (function () { if (datachanged) { $grid.saveRow(lastSelection); datachanged = false; } }));
}

function editRow(id) {
    if (id && id !== lastSelection) {
        if (datachanged) { $grid.saveRow(lastSelection); datachanged = false; }
        $grid.restoreRow(lastSelection);
        $grid.editRow(id, true);
        var inputs = $('#'+id+'>td>:input[class="editable"]');
        for (var i = 0; i < inputs.length; inputs[i++].onchange = (function () { datachanged = true; }));
        lastSelection = id;
    }
}
</script>

@Html.Trirand().JQGrid(Model.Grid, "Grid")

в модели

            Grid.ClientSideEvents.RowSelect = "editRow";
            Grid.ClientSideEvents.GridInitialized = "gridInitialised";

Код gridInitialised предназначен для обработки изменений в поисковом фильтре.

Dave

Answer 5

Как Олег упомянул 5 (вау) лет назад - я использовал функцию saveRow и передал флаг как extraparam.

как-то так, предполагая вашу «модель» или скрытый столбец IsDirty вв моем случае:

onSelectRow: function(id) {
                if (id && id !== lastgridsel) {
                    $("#myGrid").saveRow(lastgridsel, false, "clientArray", { IsDirty: "True" });
                    $("#myGrid").editRow(id, true, null, null, "clientArray");
                    lastgridsel = id;
                }
            },

, а затем циклически перебирайте строки при нажатии кнопки «Сохранить» (в моем случае - внешняя кнопка), что-то вроде:

$("#gridSaveBtn").on("click", function() {
            var batch = new Array();
            var dataIds = $("#myGrid").jqGrid("getDataIDs");
            for (var i = 0; i < dataIds.length; i++) {
                try {
                    $("#myGrid").jqGrid("saveRow", dataIds[i], false, "clientArray");
                    //get row data
                    var data = $("#myGrid").jqGrid("getRowData", dataIds[i]);
                    if (data["IsDirty"] === "True") {
                        batch.push(data);
                    }
                } catch (ex) {
                    alert(ex.Message);
                    $("#myGrid").jqGrid("restoreRow", dataIds[i]);
                }
            }
        });