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

Question

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

我该如何解决这个问题？

这些是我的代码。

<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 demo 并点击编辑按钮（页面栏中的“+”符号）并拖动编辑表单serveral times。你可以发现它的位置总是从 pos (0,0).

开始

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

Answer 1

您描述的问题似乎是 Guriddo jqGrid JS 4 中的错误8.x。我尝试了其他演示，许多演示都有同样的问题。因此，我建议您 post 向 Guriddo forum at least if you purchased the licence 报告 Guriddo jqGrid JS 的错误。

我开发了 free jqGrid 的分支，名称为 free jqGrid（参见 the readme and the wiki). You can try it directly from CDN. If you uses grid inside of jQuery UI modal dialog then you should use the latest code posted after publishing free jqGrid 4.8. The problem was reported in 并且我在 free 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，就可以从页面 all 中删除由 jqGrid 创建的元素。问题只是，如果另一个模态对话框中有网格，覆盖层应该像对话框本身一样移动到页面顶部（是 <body> 的子项）。我希望我以后能找到完美的解决方案。直到你可以像上面的代码一样为编辑表单或全局设置 toTop: true 选项。

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

How can I drag jqgrid edit form properly?

javascript

jquery

jquery-ui

jqgrid

jquery-ui-draggable