如何在jqgrid的新行中将光标从第二列移动到第一列答案

【问题标题】：How to move cursor from Second Column to First Column in a new row in jqgrid如何在jqgrid的新行中将光标从第二列移动到第一列
【发布时间】：2013-05-03 10:54:44
【问题描述】：

我是 jqgrid 的新手。当按下 Tab 键时，我有以下代码插入新行。它的大部分工作。但是当插入新行时，焦点会放在该行中的第二列而不是第一列。

我该如何解决这个问题？？

HTML：

 <table  id="list11"></table>
 <!--<div id="paddtree"></div>-->
 <label>press tab to add new row</label>
<script>
    var selIRow = 1;
        var lastsel2
        jQuery("#list11").jqGrid({
    // url:'d/${jobId}.htm',
            datatype: "json",
            colNames: ['First Name', 'Email ID', 'Phone Number'],
            colModel: [
                // {name:'id',index:'id', width:75, search:true, stype:'text' , search:true, sortable:true},
                {name: 'firstName', width: 180, search: true, stype: 'text', sortable: true, editable: true, },
                {name: 'email', index: 'email', width: 250, editable: true},
                {name: 'phoneNumber', index: 'phoneNumber', width: 100, align: "right", editable: true,
                    editoptions: {
                        dataInit: function(elem) {
                            $(elem).focus(function() {
                                this.select();
                            })
                        },
                        dataEvents: [
                            {
                                type: 'keydown',
                                fn: function(e) {
                                    var key = e.charCode || e.keyCode;
                                    if (key == 9 || key == 15)//tab
                                    {
                                        var grid = $('#list11');
                                        //Save editing for current row
                                        grid.jqGrid('saveRow', selIRow, false, 'clientArray');
                                        //If at bottom of grid, create new row
                                        // alert(grid.getDataIDs().length);
                                        if (selIRow++ == grid.getDataIDs().length) {

                                            grid.addRowData(selIRow, {});
                                        }
                                        //Enter edit row for next row in grid
                                        grid.jqGrid('editRow', selIRow, true, 'clientArray');

                                    }
                                }
                            }
                        ]
                    }, },
            ],
            beforeRequest: function(data) {
                var grid = $('#list11');

                grid.addRowData(grid.jqGrid('getGridParam', 'records') + 1, {});
                grid.jqGrid('editRow', selIRow, false, 'clientArray');


            },
            onSelectRow: function(id) {
                if (id && id !== lastsel2) {

                    jQuery('#list11').jqGrid('restoreRow', lastsel2);
                    jQuery('#list11').jqGrid('editRow', id, true);
                    lastsel2 = id;
                }
            },
            // editurl: "data/add.htm",
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
    caption: "Candidates applied for <bold> ${job.getTitle()}</bold>",
            // pager : "#paddtree",
            emptyrecords: "new",
        });
</script>

谢谢。

【问题讨论】：

设置新行进行编辑时是否尝试过 e.stopPropagation()？我不确定，但也许正在发生的事情是您开始编辑一行，焦点被赋予第一个输入，但随后事件传播并将焦点传递给下一个输入
我对您发布的代码有很多疑问。第一个：你如何填充网格（你使用datatype: "json"所以它应该是url选项）？你没有定义editurl。您在某些地方（但不是所有地方）将'clientArray' 指定为url。是否只想在本地修改数据？此外，您设置了第三列（'phoneNumber'）的焦点并且以错误的方式设置了焦点，但是您写道“焦点被赋予该行中的第二列而不是第一列”。你想实现什么行为？
@Oleg 我已经指定了URL 和EDITURL 但只有在这里我才将其注释掉。
@deepakkumar：你能描述一下在哪里你想保存数据吗？您在onSelectRow 中使用editRow 并保存在远程位置（editurl: "data/add.htm"），但如果按下一个TAB，则根本不保存新添加的数据或丢弃数据（仅在本地保存）？
@Oleg 我正在一步一步的实现它，我还是要写代码。将数据保存在服务器上不是我现在最关心的问题。

标签： javascript jquery jqgrid

【解决方案1】：

您只需在此处添加e.preventDefault(); 行：

if (key == 9 || key == 15)//tab
{
    e.preventDefault();
    ...

【讨论】：

【解决方案2】：

如果你使用 e.preventDefault() 你的例子有效：

if (key == 9 || key == 15) //tab
{
    e.preventDefault();
    //do your other stuff...

【讨论】：

【解决方案3】：

使用e.preventDefult();。这可以防止预定义的操作，例如单击时打开新选项卡......

或者

个人没有用过jgrid，但是语法和jQuery 数据表是一样的。它非常灵活，并且有很棒的文档。看看吧。

【讨论】：