javascript - 使用 InlineEditing 和 CellEdit 在 JQ Grid 上启用“保存”按钮

Question

您好，我有一个正在使用单元格编辑和内联编辑的网格。它保存到 ClientArray

$('#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
    });

当我编辑单元格时，保存按钮保持禁用状态。如果我在 beforeCellEdit 中手动启用按钮，则在您选择另一个单元格之前，可编辑单元格不会获得焦点。此行为仅发生在 IE 中。

我尝试在注释掉的代码中单独修复这两个问题，并且我发现焦点的丢失是由该行引起的

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

我尝试将此行放在 beforeEditCell 和 afterEditCell 中，它会导致输入字段失去焦点。

我使用的是 JQ Grid 4.4.4，在读到 4.4.4 之后的内联编辑有更新后，我尝试更新到 4.6.0

更新我已更改网格以使用 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"

但除了 oneditfunc 之外，我无法触发任何 editRow 事件。我在获取更改的单元格时也遇到问题。

此方法将单元格标记为脏/已编辑

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

我尝试按如下方式获取编辑后的单元格

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

在以 AJAX 方法将editedRows 发布到我的服务器之前。

Answer 1

我不确定您到底想要实现什么，但我将您的演示修改为以下 https://jsfiddle.net/OlegKi/byygepy3/11/ 。我在下面提供了演示的完整 JavaScript 代码

$(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");
});

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>

和 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;
}

它演示了如何在选择行上实现启动内联编辑。此外，我添加了带有 template: "actions" 的可选列，这可以是替代实现。我在 afterSetRow 回调内的每个数据项中设置了 property dirty ，并添加了“保存更改”按钮，该按钮使用 localData = $(this).jqGrid("getGridParam", "data") 和 dirtyData = $.grep(localData, function (item) { return item.dirty; }); 获取脏(修改过的)数据。