javascript - Habilitar el botón Guardar en JQ Grid con InlineEditing y CellEdit

jquery internet-explorer

Question

Hola, tengo una cuadrícula que usa la edición de celdas y la edición en línea. Se guarda en la matriz de clientes

$(''#list'').jqGrid({
    datatype: "local",
    colNames: ["Parameter Id", "Parameter Name", ''Parameter Value''],
    colModel: [
        { name: "Id", index: "Id", align: "left", key: true, editable: false,hidden:true, jmap: 0 },
        { name: "ParameterName", index: "ParameterName", align: "left", editable: false, jmap: 1 },
        { name: "ParameterValue", index: "ParameterValue", align: "left", editable: true, edittype: "text", editoptions: { maxlength: 100 }, editrules: {required: true }, jmap: 2 }
    ],

    pager: "#pager",
    rowNum: 100,
    rowList: [],
    pgbuttons: false,     // disable page control like next, back button
    pgtext: null,         // disable pager text like ''Page 0 of 10''
    viewrecords: true,   // disable current view record text like ''View 1-10 of 100''
    height: ''100%'',
    scrollOffset: 0,
    sortname: "Name",
    sortorder: "Asc",
    gridview: true,
    caption: ''Parameters'',
    autowidth: true,
    hidegrid: false,
    loadonce: true,
    //beforeEditCell: function () {
    //    $("#list_ilsave").removeClass(''ui-state-disabled'');
    //    return;
    //},
    //afterEditCell: function (rowid, cellname, value, iRow, iCol) {
    //    $(''#list'').jqGrid(''getCell'', rowid, iCol).focus();
    //    return;
    //},
    width: totalWidth,
    cellEdit: true,
    cellsubmit: "clientArray"
});

$(''#list'').jqGrid(''inlineNav'', ''#pager'', {
        edit: false,
        add: false,
        del: false,
        save: true,
        savetext: ''Save'',
        cancel: false
    });

Cuando edito una celda, el botón Guardar permanece deshabilitado. Si habilito manualmente el botón en beforeCellEdit, la celda editable no tendrá foco hasta que seleccione otra celda. Este comportamiento solo ocurre en IE.

Intenté solucionar ambos problemas individualmente en mi código comentado, y descubrí que la pérdida de enfoque es causada por la línea

$("#list_ilsave").removeClass(''ui-state-disabled'');

Intenté colocar esta línea en beforeEditCell y afterEditCell y hace que el campo de entrada pierda el foco.

Estaba usando JQ Grid 4.4.4 y he intentado actualizar a 4.6.0 después de leer que había actualizaciones para la Edición en línea después de 4.4.4

ACTUALIZACIÓN He cambiado mi grilla para usar onSelectRow

        onSelectRow: function (rowid) {
        var $grid = $(''#list'');
        var iRow = $("#" + rowid)[0].rowIndex;

        $grid.jqGrid(''editRow'', rowid, {
            keys: true,
            oneditfunc: function(rowid, response) {
                var $saveButton = $("#list_ilsave");

                if ($saveButton.hasClass(''ui-state-disabled'')) {
                    $saveButton.removeClass(''ui-state-disabled'');
                }

                markCellAsDirty(rowid, $grid);
                return true;
            },
            successfunc: function() {
                alert(''success'');
                return true;
            },
            aftersavefunc: function() {
                alert(''after save'');
                return true;
            },
            errorfunc: function() {
                alert(''error'');
                return true;
            }
        });
    },
    cellsubmit: "clientArray"

Pero no puedo hacer que ninguno de los eventos editRow se oneditfunc excepto oneditfunc . También tengo un problema para obtener las celdas modificadas.

Este método marca las celdas como sucias / editadas

function markCellAsDirty(rowid, grid) {
    $(grid.jqGrid("setCell", rowid, "ParameterValue", "", "dirty-cell"));
    $(grid[0].rows.namedItem(rowid)).addClass("edited");
}

Intento obtener las celdas editadas de la siguiente manera

var editedRows = $grid.getChangedCells(''dirty'');

Antes de publicar editedRows en un método AJAX en mi servidor.

Answer 1

No estoy seguro de qué quiere implementar exactamente, pero modifiqué su demostración a la siguiente https://jsfiddle.net/OlegKi/byygepy3/11/ . Incluyo el código JavaScript completo de la demostración a continuación

$(function () {
    var myData = [
            { id: 10, ParameterName: "Test", ParameterValue: "" },
            { id: 20, ParameterName: "Test 1", ParameterValue: "" },
            { id: 30, ParameterName: "Test 2", ParameterValue: "" }
        ],
        $grid = $("#list");

    // change the text displayed on editrules: {required: true } 
    $.extend(true, $.jgrid.locales["en-US"].edit.msg, {
        required: "No value was entered for this parameter!!!"
    });

    $grid.jqGrid({
        datatype: "local",
        data: myData,
        colNames: ["", "Parameter Name", "Parameter Value"],
        colModel: [
            { name: "act", template: "actions" }, // optional feature
            { name: "ParameterName" },
            { name: "ParameterValue", editable: true,
                editoptions: { maxlength: 100 }, editrules: {required: true } }
        ],
        cmTemplate: { autoResizable: true },
        autoResizing: { compact: true },
        pager: true,
        pgbuttons: false,     // disable page control like next, back button
        pgtext: null,         // disable pager text like ''Page 0 of 10''
        viewrecords: true,    // disable current view record text like ''View 1-10 of 100''
        sortname: "Name",
        iconSet: "fontAwesome",
        caption: ''Parameters'',
        autowidth: true,
        hidegrid: false,
        inlineEditing: {
            keys: true
        },
        singleSelectClickMode: "selectonly", // prevent unselect once selected rows
        beforeSelectRow: function (rowid) {
            var $self = $(this), i,
                // savedRows array is not empty if some row is in inline editing mode
                savedRows = $self.jqGrid("getGridParam", "savedRow");
            for (i = 0; i < savedRows.length; i++) {
                if (savedRows[i].id !== rowid) {
                    // save currently editing row
                    // one can replace saveRow to restoreRow in the next line
                    $self.jqGrid("saveRow", savedRows[i].id);
                }
            }
            return savedRows.length === 0; // allow selection if saving successful
        },
        onSelectRow: function (rowid) {
            $(this).jqGrid("editRow", rowid);
        },
        afterSetRow: function (options) {
            var item = $(this).jqGrid("getLocalRow", options.rowid);
            if (item != null) {
                item.dirty = true;
            }
        },
        navOptions: {
            edit: false,
            add: false,
            search: false,
            deltext: "Delete",
            refreshtext: "Refresh"
        },
        inlineNavOptions: {
            save: true,
            savetext: "Save",
            cancel: false,
            restoreAfterSelect: false
        },
        formDeleting: {
            // delete options
            url: window.g_baseUrl + ''MfgTransactions_MVC/COA/Delete?'',
            beforeSubmit: function () {
                // get value
                var selRowId = $(this).jqGrid(''getGridParam'', ''selrow'');
                var parametricValue = $(this).jqGrid(''getCell'', selRowId, ''ParameterValue'');

                // check if empty
                if (parametricValue === "") {
                    return [false, "Cannot delete: No value exists for this parameter"];
                }

                return [true, "Successfully deleted"];
            },
            delData: {
                batchId: function () {
                    return $("#BatchId").val();
                }
            },
            closeOnEscape: true,
            closeAfterDelete: true,
            width: 400,
            msg: "Are you sure you want to delete the Parameter?",
            afterComplete: function (response) {
                if (response.responseText) {
                    alert("response.responseText");
                }

                //loadBatchListIntoGrid();
            }
        }
    }).jqGrid(''navGrid'')
    .jqGrid(''inlineNav'')
    .jqGrid(''navButtonAdd'', {
        caption: "Save Changed",
        buttonicon: "fa-floppy-o",
        onClickButton: function () {
            var localData = $(this).jqGrid("getGridParam", "data"),
                dirtyData = $.grep(localData, function (item) {
                    return item.dirty;
                });
            alert(dirtyData.length > 0 ? JSON.stringify(dirtyData) : "no dirty data");
        }
    });

    // make more place for navigator buttons be rwducing the width of the right part
    var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
    $(pagerIdSelector + "_right").width(100);

    // make the grid responsive
    $(window).bind("resize", function () {
        $grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
    }).triggerHandler("resize");
});

donde está el código HTML

<div class="container-fluid">
    <div class="row">
        <div id="gridarea" class="col-md-6 col-md-offset-3">
            <table id="list"></table>
        </div>
    </div>
</div>

y código CSS

.ui-th-column>div, .ui-jqgrid-btable .jqgrow>td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    vertical-align: middle;
}

Demuestra cómo se puede implementar el inicio de la edición en línea en la fila de selección. Además, agregué una columna opcional con la template: "actions" que puede ser una implementación alternativa. Configuré propiedades dirty en cada elemento de datos dentro de la devolución de llamada afterSetRow y agregué el botón "Guardar modificado", que usa localData = $(this).jqGrid("getGridParam", "data") y dirtyData = $.grep(localData, function (item) { return item.dirty; }); para obtener los datos sucios (modificados).