使用多选,多框和滚动输入内联编辑:1

Question

使用多选,多框和滚动输入内联编辑:1

And*_*rus 3 jqgrid

如果在jqGrid和multiselect中按下Enter,如何开始内联编辑:还使用了true选项？如果存在multiselct,则jqGrid bindKeys函数没有任何效果.

要验证下面的测试用例可以使用(根据Oleg评论中提供的示例).

重现步骤:

将下面的代码保存到html文件并在IE 9中打开它
单击网格并按Enter键

观测到的:

消息框不会出现
上下箭头也移动整个网格

预期:

输入按下应该会出现消息框
向上和向下箭头应该更改网格中的当前行

如何获得预期的行为？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>http://stackoverflow.com/questions/5988767/highlight-error-cell-or-input-when-validation-fails-in-jqgrid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var mydata = [
                    { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
                ];

            var grid = $("#grid");
            grid.jqGrid({
                datatype: 'local',
                data: mydata,
                colModel: [
                    { name: 'invdate', editable: true, width: 30 },
                    { name: 'name', editable: true, width: 271 }
                ],
                gridview: true,
                pager: '#pager',
                viewrecords: true,
                multikey: "ctrlKey",  // added July 6, 2011
                scroll:1,  // added July 6, 2011 todo: data should passed from URL
                multiselect: true,
                multiboxonly: true,
                editurl: 'clientArray'
            });

        $("#grid").jqGrid('bindKeys', {
            onEnter: function (rowid) {
                alert("You enter a row with id: " + rowid);
            }
        });
      });
    </script>
</head>
<body>
        <table id="grid"></table>
        <div id="pager"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

更新:添加multiboxonly:true to testcase do demontrate previous row not unselected issue

更新

添加了多键:"ctrlKey"到testcase.在这种情况下,bindKeys在Oleg中提出的答案停止工作

Answer 1

Ole*_*leg 5

您发布的代码应该有效.可能你在错误的地方使用它.

你应该考虑的唯一一件事就是在行结束后编辑焦点会丢失,你不能使用箭头移动下一行.您应该使用editRow方法的aftersavefunc参数来恢复网格焦点:

var grid = $('#grid');
grid.jqGrid('editRow',rowid,true,null, null, null, {},function(){
    setTimeout(function(){
        grid.focus();
    },100);
});

Run Code Online (Sandbox Code Playgroud)

该演示是对答案进行的小型修改.您可以使用键盘移动行选择并输入以开始内联编辑并保存行.

更新:我要求你总是附加原始问题和其他信息,而不是完全重写问题.您的原始问题不包含任何有关使用的内容multiselect: true.这个案例(multiselect: false)和我的第一个演示对其他用户来说可能很有趣.因此,一般的做法是将原始问题附加 "更新:"部分或仅提出一个新问题.目前,如果有人会阅读你的问题和我的答案,他/她会想:"这是一个奇怪的答案？可能答案没有仔细阅读这个问题."

现在关于你当前的问题multiselect: true.你怎么知道jqGrid 4.0.0是第一个在网格和treegrid中支持键盘导航并且有bindKeys方法的版本.解决方案远非完美.键盘无法完成许多操作.例如,导航工具栏中的按钮("添加","编辑","删除"等)可能无法在键盘上单击.要在jqGrid中使用键盘导航,jqGrid代码的许多地方都会通过tabindex属性设置进行扩展.例如,在行中,所选行(<tr>元素)接收属性tabindex="0",但该行仅在以下情况下有效multiselect: false.在该线的bindKeys代码将是搜索(和未找到)的属性tabindex="0".所以当前的实现在模式下bindKeys 不起作用multiselect: true.

正如我之前所写,multiselect: true只有jqGrid代码中的许多更改才能实现模式的完全支持.作为一种解决方法,我可以建议以下内容:我们只能使用更改的实现覆盖bindKeys方法代码.

你可以在这里找到相应的演示.演示的JavaScript代码是:

$.extend($.fn.jqGrid,{
    bindKeys : function( settings ){
       'use strict';
        var o = $.extend({
            onEnter: null,
            onSpace: null,
            onLeftKey: null,
            onRightKey: null,
            scrollingRows : true
        },settings || {});
        return this.each(function(){
            var $t = this;
            if( !$('body').is('[role]') ){$('body').attr('role','application');}
            $t.p.scrollrows = o.scrollingRows;
            $($t).keydown(function(event){
                var target = $($t).find('tr[tabindex=0]')[0], id, mind, r,
                expanded = $t.p.treeReader.expanded_field;
                if (!target && $t.p.selrow !== null) {
                    target = $t.rows.namedItem($t.p.selrow);
                }
                //check for arrow keys
                if(target) {
                    mind = $t.p._index[target.id];
                    if(event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40){
                        // up key
                        if(event.keyCode === 38 ){
                            r = target.previousSibling;
                            id = "";
                            if(r) {
                                if($(r).is(":hidden")) {
                                    while(r) {
                                        r = r.previousSibling;
                                        if(!$(r).is(":hidden") && $(r).hasClass('jqgrow')) {id = r.id;break;}
                                    }
                                } else {
                                    id = r.id;
                                }
                            }
                            if ($.inArray(id,$t.p.selarrrow) === -1) {
                                $($t).jqGrid('setSelection', id);
                            } else {
                                $t.p.selrow = id;
                            }
                        }
                        //if key is down arrow
                        if(event.keyCode === 40){
                            r = target.nextSibling;
                            id ="";
                            if(r) {
                                if($(r).is(":hidden")) {
                                    while(r) {
                                        r = r.nextSibling;
                                        if(!$(r).is(":hidden") && $(r).hasClass('jqgrow') ) {id = r.id;break;}
                                    }
                                } else {
                                    id = r.id;
                                }
                            }
                            if ($.inArray(id,$t.p.selarrrow) === -1) {
                                $($t).jqGrid('setSelection', id);
                            } else {
                                $t.p.selrow = id;
                            }
                        }
                        // left
                        if(event.keyCode === 37 ){
                            if($t.p.treeGrid && $t.p.data[mind][expanded]) {
                                $(target).find("div.treeclick").trigger('click');
                            }
                            if($.isFunction(o.onLeftKey)) {
                                o.onLeftKey.call($t, $t.p.selrow);
                        }
                        }
                        // right
                        if(event.keyCode === 39 ){
                            if($t.p.treeGrid && !$t.p.data[mind][expanded]) {
                                $(target).find("div.treeclick").trigger('click');
                            }
                            if($.isFunction(o.onRightKey)) {
                                o.onRightKey.call($t, $t.p.selrow);
                        }
                        }
                        return false;
                    }
                    //check if enter was pressed on a grid or treegrid node
                    else if( event.keyCode === 13 ){
                        if($.isFunction(o.onEnter)) {
                            o.onEnter.call($t, $t.p.selrow);
                        }
                        return false;
                    } else if(event.keyCode === 32) {
                        if($.isFunction(o.onSpace)) {
                            o.onSpace.call($t, $t.p.selrow);
                        }
                        return false;
                    }
                }
            });
        });
    }
});

Run Code Online (Sandbox Code Playgroud)

和

var grid = $("#list");
...

grid.jqGrid('bindKeys', {
    onEnter: function(rowid) {
        //alert("You enter a row with id: " + rowid);
        editingRowId = rowid; // probably cab be replaced to grid[0].p.selrow
        // we use aftersavefunc to restore focus
        grid.jqGrid('editRow',rowid,true,null, null, null, {},function(){
            setTimeout(function(){
                grid.focus();
            },100);
        });
    },
    onSpace: function(rowid) {
        grid.jqGrid('setSelection', rowid);
    }
});

// select one row at the begining and set the focus
grid.jqGrid('setSelection',"1");
grid.focus();

Run Code Online (Sandbox Code Playgroud)

我再说一遍,我发现我发布的代码并不完美.人们应该看清哪条线有焦点并做更多的事情.我只想显示哪种更改以及应该在哪里进行以便为musliselect网格进行键盘导航.

编辑

如果是多键:"ctrlKey"添加了bindKeys.答案中的代码不起作用.在回答代码中使用setFocus也会导致焦点在编辑后跳转到另一行,因此应该删除它.编辑到当前行后无法设置焦点,始终需要鼠标clik,jqGrid不支持仅使用键盘进行内联编辑.

归档时间：	14 年，5 月前
查看次数：	7059 次
最近记录：	14 年，5 月前