jqgrid编辑并添加带有"tab"标签的行钥匙 [英] jqgrid edit and add rows with "tab" key

问题描述

我是jqgrid的新手，我正尝试使用"tab"键在网格中导航. 我希望能够编辑一行，并且在编辑该行的最后一个单元格时，如果单击Tab键，它将保存当前行的更改(在客户端，而不是通过单击Enter)并设置将焦点移至下一行并编辑它的单元格，然后当我到达最后一行和单元格时，单击Tab键将添加新行并使其处于编辑模式.

I'm new to jqgrid , and I'm trying to navigate through the grid with "tab" key. I want to be able to edit a row, and when I'm editing the last cell in that row, if I click the tab key it will save the current row changes (in the client side , and not by clicking enter) and set the focus to the next row and edit it's cells , and when I get to the last row and cell, the tab click will add a new row and make it in edit mode.

我尝试进行行内编辑，然后进行单元格编辑，但是总是卡住... 如何才能做到这一点?

I tried with in line editing and then with cell editing but always got stuck... how can this be done?

谢谢.

推荐答案

我不知道您目前拥有什么，但是我对此进行了测试，并且可以正常工作.由于您没有提到最初将如何编辑网格的方式，因此我在ready事件中手动进行了操作，因此只需跟踪使用selIRow变量当前正在编辑的行.

I do not know what you currently have, but I tested this and it works. Since you failed to mention how you would originally begin editing the grid, I did it manually in the ready event, you just have to keep track of what row is currently being edited using the selIRow var.

var selIRow = 1; //keep track of currently edited row
                 //initialized to 1 for testing purposes

    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            datatype: 'local',
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [
                { name: 'id', index: 'id', width: 60, editable: true },
                { name: 'invdate', index: 'invdate', width: 90, editable: true },
                { name: 'name', index: 'name', width: 100, editable: true },
                { name: 'amount', index: 'amount', width: 80, editable: true },
                { name: 'tax', index: 'tax', width: 80, editable: true },
                { name: 'total', index: 'total', width: 80, editable: true },
                { name: 'note', index: 'note', width: 150, editable: true,
                    //Place this code in the col options of the last column in your grid
                    // it listens for the tab button being pressed
                    editoptions: {
                        dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
                        dataEvents: [
                            {
                                type: 'keydown',
                                fn: function (e) {
                                    var key = e.charCode || e.keyCode;
                                    if (key == 9)//tab
                                    {
                                        var grid = $('#jqGrid');
                                        //Save editing for current row
                                        grid.jqGrid('saveRow', selIRow, false, 'clientArray');
                                        //If at bottom of grid, create new row
                                        if (selIRow++ == grid.getDataIDs().length) {
                                            grid.addRowData(selIRow, {});
                                        }
                                        //Enter edit row for next row in grid
                                        grid.jqGrid('editRow', selIRow, false, 'clientArray');
                                    }
                                }
                            }
                        ]
                    }
                }
            ],
        });
    });

从 查看全文