jqgrid - 使用多选、多框和滚动在输入时进行内联编辑 :1-6ren

jqgrid - 使用多选、多框和滚动在输入时进行内联编辑 :1

转载作者：行者123 更新时间：2023-12-03 23:48:19

如果在 jqGrid 中按下 Enter 并使用了 multiselect: 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>

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

更新

添加了 multikey: "ctrlKey"到测试用例。在这种情况下，Oleg 回答中提出的 bindKeys 停止工作

最佳答案

您发布的代码应该可以工作。可能你用错地方了。

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

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

The demo是对来自 the answer 的演示的小修改.您可以使用键盘移动行选择并输入以开始内联编辑并保存行。

已更新:我要求您始终附加您的原始问题并附上额外信息，而不是完全重写问题。您的原始问题不包含有关 multiselect: true 用法的任何信息.这个案例 ( multiselect: false) 和我的第一个演示可能对其他用户很有趣。所以一般的做法是附加带有“UPDATED:”部分的原始问题，或者只是提出一个新问题。目前，如果有人阅读您的问题和我的回答，他/她会想:“多么古怪的答案？可能答案没有仔细阅读问题。”。

现在关于您当前遇到的问题 multiselect: true .你怎么知道 jqGrid 4.0.0 是第一个有 support of keyboard navigation 的版本在网格和树状网格中，其中有 bindKeys方法。该解决方案远非完美。许多操作不能用键盘完成。例如，导航工具栏中的按钮(“添加”、“编辑”、“删除”等)不能通过键盘点击。为了在 jqGrid 中使用键盘导航，jqGrid 代码的许多地方都使用 tabindex 的设置进行了扩展。属性。例如在 the line所选行(<tr> 元素)接收属性 tabindex="0" , 但该行仅适用于 multiselect: false 的情况.在 the line的 bindKeys代码将搜索(但未找到)属性 tabindex="0" .所以当前执行 bindKeys 不工作在multiselect: true模式。

正如我之前写的，全力支持multiselect: true只有在 jqGrid 代码中进行许多更改才能实现模式。作为解决方法，我可以提出以下建议:我们可以覆盖 bindKeys 的代码方法仅具有更改的实现。

对应的demo可以找here .演示中的 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;
                    }
                }
            });
        });
    }
});

和

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();

我再重复一次，我发现我发布的代码并不完美。应该使哪条线具有焦点并使更多的东西可见。我只想展示应该进行哪些更改以及应该在何处进行更改以允许对 musliselect 网格进行键盘导航。

编辑

如果 multikey:"ctrlKey"添加了 bindKeys。答案中的代码不起作用。此外，在答案代码中使用 setFocus 会导致焦点在编辑后跳转到另一行，因此应将其删除。编辑到当前行后无法设置焦点，始终需要鼠标点击，jqGrid 不支持仅使用键盘进行内联编辑。

关于jqgrid - 使用多选、多框和滚动在输入时进行内联编辑 :1，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6170079/

文章推荐： maven - 如何正确集成 Maven、Jenkins、Sonar 和 Cobertura？

文章推荐： Django - fixture 中的外键

文章推荐： oauth - CouchApp 用户注册

文章推荐： string - Ocaml 中的子字符串检查

javascript - 阻止 body 滚动，但阻止触摸设备上的任何父 div 滚动
如果附加了 'not-scroll' 类，我希望我的 body 不滚动，否则它应该正常工作。我已经搜索这个问题两天了，但找不到任何适合我的解决方案。我想要的是向 body 添加一个 class，并
iOS Safari - 滚动 iFrame 导致下面的 div 滚动
我发现似乎是 iOS Safari 中的错误(我正在 iOS 8 上进行测试)。当绝对定位的 iFrame 漂浮在一段可滚动内容上方时，滚动 iFrame 也会滚动下面的内容。以下 HTML (ava
javascript - 如何启用 Safari 滚动 SVG(滚动 div 中的对象标签)？
我有以下代码来显示一系列投资组合图片，这些图片以 SVG 格式存储在滚动 div 中: 在 Safari 中滚动使用两根手指或鼠标滚轮当光标位于 SVG 之一上时不起作用。该页
Javascript 滚动
我想用 javascript 做的是: 一旦你向下滚动页面，将#sidebar-box-fixed 的位置从 position: relative; 更改为定位:固定；。改回position:rela
Elasticsearch 滚动
我对 Elasticsearch 的滚动功能有点困惑。在 elasticsearch 中，每当用户在结果集上滚动时，是否可以每次调用搜索 API？来自文档 "search_type" => "scan
Javascript 滚动
我试图做到这一点，以便当我向上或向下滚动页面时，它会运行不同的相应功能。我发现了一个类似的问题here但我已经尝试了他们的答案并且没有运气。注意:此页面没有正常显示的滚动条。没有地方可以滚动。 bo
gtk - 滚动 GtkDrawingArea
(C语言，GTK库) 在我的表单上，我有一个 GtkDrawingArea 小部件，我在上面使用 Cairo 绘制 GdkPixbufs(从文件加载)。我想要完成的是能够在窗口大小保持固定的情况下使用
SwiftUI 滚动/列表滚动事件
最近我一直在尝试创建一个拉到(刷新，加载更多)swiftUI ScrollView !!，灵感来自 https://cocoapods.org/pods/SwiftPullToRefresh 我正在努
jquery - 拖放 + 滚动
我正在开发一个应用程序，其中有两个带有可放置区域的列表和一个带有可拖动项目的侧面菜单。当我滚动屏幕时，项目的位置困惑。我试图在谷歌上寻找一些东西，最后得到了这个问题:jQuery draggabl
iphone - UIWebView 滚动
我在 UIWebView 中加载了一个 HTML 表单，而我的 UIWebView 恰好从 View 的中间开始并扩展。我必须锁定此 webView 不滚动并将其放在 ScrollView 之上以允许
javascript - 每个元素上的淡入淡出 - 滚动
如何在每个元素而不是整个元素上应用淡入淡出(与其高度相比)？ HTML: CSS: * { padding: 0; margin: 0; box-sizing: border
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - JTextField 滚动
我制作这个程序是为了好玩，但我被卡住了，因为程序在屏幕外运行。如何在不完全更改代码的情况下实现滚动条。 public static void main(String args[]) throws IO
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - 滚动()和添加()
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
jquery - 滚动/跟随侧边栏帮助
使用 jquery 技术从 css-tricks.com 获得滚动/跟随侧边栏，如果您不知道我在说什么，这里是代码: $(function() { var $sidebar = $
Jquery-手机滑动菜单面板+滚动
我是 jQuery Mobile 新手。我需要向我的应用程序添加 Facebook 滑动面板功能。我经历了 sliding menu panel ，它工作正常，但我在菜单面板中的内容超出了窗口大小，
javascript - 如何在js或jQuery中检测ctrl +滚动？
有没有办法在 js 或 jQuery 或任何其他工具中检测 ctrl + 滚动。我正在尝试执行一些动态布局代码，我需要检测不同分辨率下的屏幕宽度，我通过使用 setTimeout() 的计时器实现了这
jquery 滚动 + 可拖动项目
我有一部分html代码:
c# - 滚动 RichTextBox
我想控制 RichTextBox 滚动，但在控件中找不到任何方法来执行此操作。这样做的原因是我希望当鼠标光标位于 RichTextBox 控件上时鼠标滚轮滚动有效(它没有事件焦点:鼠标滚轮事件由表单

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jqgrid - 使用多选、多框和滚动在输入时进行内联编辑 :1