将Excel功能添加到已编辑单元格的jqgrid中

时间:2012-02-20 16:38:05

标签: javascript jquery jqgrid

我有一个只有某些可编辑列的jqGrid,我希望能够在按Tab键并输入时实现类似于excel的功能。这些列从一开始就是可编辑的,因为我在loadComplete中的每一行上调用editRow,以便用户可以单击这些列中的任何一个单元格并更改信息。我希望它是这样的,当你按Tab键时,光标将转到当前行中的下一个可编辑单元格,直到它到达结尾,再次按Tab键,转到下一行的第一个可编辑单元格;按下Enter键进入下一行的第一个可编辑单元格,无论你碰巧进入上一行的单元格。每次更改单元格焦点时,数据都会保存到服务器中。

我一直在做很多研究,但没有一项有效。我在editoptions和dataEvents下的colModel中具有每个按键的功能,作为keydown事件,它检查已按下哪个按钮然后执行适当的代码。我尝试的第一件事是使用了jqGrid的editCell方法,在那里我传递了下一个单元格的行和列,我希望将光标移动到,但是这不起作用,我认为这是因为我已经调用了editRow在每一行。我也试过通过使用$ .click()或$ .focus()将焦点改为我试图去的单元格,但是这也没有用。

需要注意的是,当这些列模糊时,我会重新计算客户端的列总计。我试过把我试图改变焦点的不同东西放在setTimeout中,但是那也没有用。

我基本上希望将其保留在我希望可编辑的列中的所有单元格随时可编辑的位置,并且用户可以单击该特定单元格或选项卡/输入到其进行编辑。这是它寻求澄清的方式:

http://cl.ly/2W3E1U3i1k3K0W2Y0r0n

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

我能够弄清楚,我不知道为什么花了这么长时间才弄明白。没有jqgrid提供的工作,我从jQuery尝试了很多不同的东西,我终于发现了一些有用的东西:

{
    type: 'keydown',
    fn: function(e) {
        var key = e.charCode || e.keyCode;
        //TAB
        if(key == jq.ui.keyCode.TAB) {
             setTimeout(function() { 
               jq('#' + currentRowId + '_nextColName').focus();
               jq('#' + currentRowId + '_nextColName').select(); 
             }, 500);
        }
        //ENTER
        else if (key == jq.ui.keyCode.ENTER) {
             var nextRow = parseInt(currentRowId) + 1;
             jq('#' + currentRowId + '_thisColName').blur();
             jq('#' + nextRow + '_firstColName').select();
        }
    }
}

这使得tab使您进入下一列并输入始终将您带到下一行的第一列,同时保持所有单元格始终可编辑,并且您可以随时单击任何可编辑单元格。