想要学编程的小白 2021-10-25 19:21 采纳率: 100%
浏览 46
已结题

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

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

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-10-25 21:31
    关注

    添加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格式,文章里面有说

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月3日
  • 已采纳回答 10月26日
  • 创建了问题 10月25日

悬赏问题

  • ¥20 delta降尺度方法,未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet,要求快速高效
  • ¥15 再不同版本的系统上,TCP传输速度不一致
  • ¥15 高德地图点聚合中Marker的位置无法实时更新
  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题
  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程