jqgrid-求解当编辑某个单元格时点击Enter键则跳到下一行的这一列
问题描述:
和Excel一样,当编辑某一个单元格时,按回车键则光标会定位到下一行的这一列单元格。
例如在C35点击回车光标会跳到C36.
答
添加afterEditCell事件,然后获取生成的输入对象添加keydown事件,监听按下回车键切换到下一个单元格进行编辑
题主要的示例代码如下,有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~
<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格式,文章里面有说
jqGrid单元格编辑配置,事件及方法_jqGrid中文API_Web开发网
http://www.w3dev.cn/article/20130627/jqGrid-cell-editing.aspx