按Enter键编辑下一个jqgrid行

时间:2018-08-06 06:54:01

标签: javascript asp.net-mvc jqgrid

我有一个jqgrid,其中使用了内联编辑。我的要求是,按Enter键后,我应该能够保存当前行,并且下一行应该是可编辑的,并且该行的任何列中都存在光标。

我尝试使用aftersavefunc,但无法正常使用。另外,在这种情况下,使用afterSavecell无效,因为需要编辑多个单元格。我只需要一个解决方案,在editrow按钮的saverow上完成Click后,可以调用enter方法。

$(function () {

oldInfoDialog = $.jgrid.info_dialog;
$.extend($.jgrid.inlineEdit, { keys: true });

// tried to override the default aftersavefunc but didn't work.
$.extend($.jgrid.defaults, {
    ajaxRowOptions: {
        aftersavefunc: function (rowid, response, options) {
            debugger;
            var increment = 1;
            var lastRowInd = jQuery("#grid").jqGrid("getGridParam", "reccount")
            var iRow = $('#' + rowid)[0].rowIndex;
            if (iRow + increment == 0 || iRow + increment == lastRowInd + 1) {// we could re-edit current cell or wrap
                return;
            }
            else
                var testid1 = iRow + increment
            var testid = jQuery('#grid tr:eq(' + testid1 + ')').attr('id');
            jQuery('#grid').editRow(testid, true);
        }
    }
});

// use custom alert for data validations
$.extend($.jgrid, {
    info_dialog: function (caption, content, c_b, modalopt) {
        if (useCustomDialog) {
            // display custom dialog
            useCustomDialog = false;
            //var message_box = content.split(":");
            alert(content.split(":")[1]);
        } else {
            return oldInfoDialog.apply(this, arguments);
        }
    }
});



$("#grid").jqGrid({
    url: "/TodoList/GetList",
    datatype: 'json',
    mtype: 'Get',

    colNames: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    colModel: [

        { key: false, hidden: true, name: 'A', index: 'A', editable: true, frozen: true },
        { key: false, hidden: true, name: 'B', index: 'B', editable: true },
        { key: true, hidden: true, name: 'C', index: 'C', editable: true },
        {
            key: false, hidden: false, name: 'D', index: 'D', editable: true
        },
        {
            key: false, hidden: false, name: 'E', index: 'E', editable: true,
            editrules: {
                custom: true,
                custom_func: function (val) {
                    useCustomDialog = false;
                    debugger;
                    // var val1 = val.value;
                    var message = "";
                    var num = new Number(val);
                    var selRowId = $("#grid").jqGrid("getGridParam", "selrow");
                    var pattern = /^(0|[1-9][0-9]{0,2}(?:([0-9]{3})*|[0-9]*))(\.[0-9]{1,2}){0,1}$/;                    
                    if (!pattern.test(num)) {
                        message = ":Please enter a positive number in valid format with upto 2 decimal places and without commas.";
                        useCustomDialog = true
                        isError = true;
                        return [false, message];
                    }

                    else {                                
                        return [true];
                    }

                }
            },


            editoptions: {

                dataInit: function (element) {
                    useCustomDialog = false;
                    $(element).focusout(function () {
                        var val1 = element.value;
                        var num = new Number(val1);
                        var selRowId = $("#grid").jqGrid("getGridParam", "selrow");

                    })
                }
            }
        },


        {
            key: false, hidden: false, name: 'F', index: 'F', editable: true, editoptions: {
                dataInit: function (element) {
                    $(element).attr("readonly", "readonly");
                }
            }
        }

    , {
        key: false, hidden: false, name: 'G', index: 'G', editable: true, 
        editoptions: {
            dataInit: function (element) {
                $(element).attr("readonly", "readonly");
            }
        }
    }


    ],
    onSelectRow: function (id) {
        if (id && id !== lastsel2) {
            if (useCustomDialog === false) {
                jQuery('#grid').saveRow(lastsel2);
                jQuery('#grid').editRow(id, true);
                lastsel2 = id;
            }
        }
    },

    editurl: "/TodoList/Save",
    caption: "Input Types",
    pager: jQuery('#pagersub'),
    height: '100%',
    viewrecords: true,
    caption: 'Data Entry',
    emptyrecords: 'No records to display',
    jsonReader: {
        root: "rows",
        page: 1,
        total: "total",
        records: 2,
        repeatitems: false,
        Id: "0"
    },
    autowidth: true,
    multiselect: false

})

});

0 个答案:

没有答案