如何正确拖动 jqgrid 编辑表单？答案

【问题标题】：How can I drag jqgrid edit form properly?如何正确拖动 jqgrid 编辑表单？
【发布时间】：2015-04-02 12:44:26
【问题描述】：

当我拖动编辑表单时，表单的位置无效。它总是从位置(0,0) 开始到窗口。它的位置与鼠标光标位置无关。

我该如何解决这个问题？

这些是我的代码。

<table id="jqGrid"></table> <div id="jqGridPager"></div>

   $("#jqGrid").jqGrid({
        url: url,
        mtype: "GET",
        postData: data,
        datatype: "jsonp",
        colModel: [            
            { label: 'd_id', name: 'd_id', width: 15, key: true, hidden: true},
            { label: 'driver', name: 'd_name', width: 30, align:"center", editable: true, editoptions: {size: 40} },
            { label: 'phone', name: 'd_phone', width: 30, align:"center", editable: true, editoptions: {size: 40} },
            { label: '', name: '' }
        ],
        viewrecords: true,
        autowidth: true,
        height: '100%',
        rownumbers: true,
        rownumWidth: 25,
        rowNum: 20,
        editurl: g_base_url + 'driver/edit',
        pager: "#jqGridPager",
        loadError : function(xhr,st,err) {

        },
        loadComplete: function () {
        },
        onCellSelect: function(rowid, iCol, cellcontent, e) {

        }
    });

而我的jqgrid版本是4.8，jquery版本是jquery-1.11.2，jquery-ui版本是1.11.4。

请访问 jqgrid 演示并单击编辑按钮（页面栏中的“+”符号）并拖动编辑表单serveral times。你可以发现它的位置总是从 pos (0,0) 开始。

演示链接是http://www.guriddo.net/demo/guriddojs/edit_add_delete/edit_template/index.html

【问题讨论】：

可以试试free jqGrid是否存在同样的问题？您可以临时将使用ui.jqgrid.css 的URL 替换为http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css、grid.locale-en.js 到http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js（在免费jqGrid 中是可选的）和http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.min.js（或jquery.jqgrid.src.js）作为主要代码。 readme末尾的demo没有问题。
顺便说一下空名的用法：name: ''是错误的！
我用cdn试过了。但是叠加层放在对话框上，所以我不能选择对话框。我在开发者工具中手动将覆盖z-index从949更改为0，然后拖动就正确了。为什么覆盖层放在最上面？对话框的 Z-index 为 950，但它位于覆盖遮罩层的后面。
您可能在其他模式对话框中使用网格。问题和解决方法在here 中进行了描述。我对代码免费的 jqGrid 做了一些修改。可以使用可以全局设置的toTop 选项。您可以使用http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css、http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js 中描述的wiki 测试最新版本
我更改为 http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css, http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js。但同样的问题。覆盖元素位于<body> 元素的正下方。但是"edit dialog" 元素被放置在 div 元素下。因为 jqgrid 是放在 div 元素下面的。这些是生成的 html 代码。

标签： javascript jquery jquery-ui jqgrid jquery-ui-draggable

【解决方案1】：

您描述的问题似乎是 Guriddo jqGrid JS 4.8.x 中的一个错误。我尝试了其他演示，并且那里的许多演示都有同样的问题。因此，如果您为 Guriddo jqGrid JS 购买了 the licence，我建议您至少将错误报告发布到 Guriddo forum。

我以免费 jqGrid 的名义开发了 jqGrid 的 free 分支（参见 the readme 和 the wiki）。您可以直接从CDN 尝试。如果您在 jQuery UI 模态对话框中使用网格，那么您应该使用发布免费 jqGrid 4.8之后发布的最新代码。 the answer 报告了该问题，我在免费 jqGrid 中包含了新选项 onTop 选项。

$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, {toTop: true});

因此，您可以使用例如 URL http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css 和 http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js（http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js 或 http://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js 等语言环境在免费 jqGrid 中是可选的）。

稍后我将尝试修改 jqGrid 使用的对话框的代码，以便检测到onTop: true 的情况，并在需要时自动设置选项。由于某些原因，我不想将其设为默认值。我分析了jqGrid 4.7的代码，做了很多修改。一种问题方式是所有对话框（如编辑表单）都保留在 jqGrid 的内存中。如果关闭对话框，它将被隐藏。对话框中使用的事件处理程序，如onClick处理程序引用网格的DOM元素和其他对象。还有一些其他的缺点。所以我这样做是为了在关闭免费 jqGrid 中的对话框时，表单将完全扭曲。默认设置toTop: false 使网格的所有元素（包括所有对话框）创建为在网格上构建的 gbox div 的子级。因此，只需删除 gbox，就可以从页面中删除 jqGrid 创建的 all 元素。问题只是如果在另一个模态对话框中有网格，则应该像对话框本身一样将覆盖层移动到页面顶部（是<body> 的子级）。我希望我以后能找到完美的解决方案。到目前为止，您可以像上面的代码一样为编辑表单或全局设置 toTop: true 选项。

【讨论】：