jqgrid-求解当编辑某个单元格时点击Enter键则跳到下一行的这一列

jqgrid-求解当编辑某个单元格时点击Enter键则跳到下一行的这一列

问题描述:

和Excel一样,当编辑某一个单元格时,按回车键则光标会定位到下一行的这一列单元格。
例如在C35点击回车光标会跳到C36.

添加afterEditCell事件,然后获取生成的输入对象添加keydown事件,监听按下回车键切换到下一个单元格进行编辑

题主要的示例代码如下,有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~

img

<meta charset="utf-8" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid-bootstrap.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0-rc.3/themes/smoothness/jquery-ui.css">
<table id="list4"></table>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js"></script>
<script src="plugins/jquery.tablednd.js"></script>
<script>
    var mydata = [{ id: "22", name: "test", note: "note2", amount: 200, tax: "10.00", total: "210.00" }
        , { id: "2", name: "test2", note: "note2", amount: 300, tax: "20.00", total: "320.00" }
        , { id: "4", name: "test2", note: "note2", amount: 60, tax: "20.00", total: "320.00" }
        , { id: "5", name: "test2", note: "note", amount: 90, tax: "20.00", total: "320.00" }
    ];
    $("#list4").jqGrid({
        cellEdit: true,
        afterEditCell: function (rowid, cellname, value, iRow, iCol) {
            var input = $('#' + iRow + '_' + cellname); console.log(input)
            input.keydown(function (e) {
                if (e.keyCode == 13) {
                    $("#list4").jqGrid('saveCell', iRow, iCol);//保存单元格数据
                    $("#list4").jqGrid('editCell', iRow+1, iCol,true);//编辑下一行

                }
            });
        },
        datatype: "local",
        colNames: ['Inv No', '客户', 'Amount', 'Tax', 'Total', 'Notes'],
        colModel: [
            { name: 'id', index: 'id', width: 90, sorttype: "int" },
            { name: 'name', index: 'name', width: 100, editable: true },
            { name: 'amount', index: 'amount', width: 80, align: "right", editable: true },
            { name: 'tax', index: 'tax', width: 80, align: "right", editable: true },
            { name: 'total', index: 'total', width: 80, align: "right" },
            { name: 'note', index: 'note', width: 150, sortable: false }
        ],
        multiselect: true,
        width: 800,
        data: mydata,
        cellsubmit: 'clientArray'
    });
</script>


更多cellEdit配置参考,比如生成的dom的id格式,文章里面有说