javascript - 如何正确拖动 jqgrid 编辑表单?

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

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

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

最佳答案

您描述的问题似乎是 Guriddo jqGrid JS 4.8.x 中的错误。我尝试了其他演示,许多演示都有同样的问题。所以我建议您将错误报告发布到 Guriddo forum至少如果你购买了the licence适用于 Guriddo jqGrid JS。

我开发了名为 free jqGrid 的 jqGrid 的 free 分支(参见 the readmethe wiki)。你可以直接从CDN试试.如果您在 jQuery UI 模式对话框中使用网格,那么您应该使用发布免费 jqGrid 4.8之后发布的最新代码。 the answer 中报告了该问题我包括了新选项 onTop免费 jqGrid 中的选项。

$.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.jshttp://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 创建的元素。问题只是,如果在另一个模态对话框中有网格,覆盖层应该像对话框本身一样移动到页面顶部(是 <body> 的子级)。我希望我以后能找到完美的解决方案。直到您可以设置 toTop: true 为止用于编辑表单或全局的选项,如上面的代码。

关于javascript - 如何正确拖动 jqgrid 编辑表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29413322/

相关文章:

javascript - HTML 页面部分的小 map 在视口(viewport)中显示为固定 anchor

javascript - 重用在 Controller 之间定义的功能

javascript - 使用 JQuery $.AJAX 调用调用 ASP.NET 函数

javascript - CSS使标签标题包含固定字符长度?

javascript - 在 Javascript 代码中获取 PHP 变量

javascript - 超过一定长度的段落弹出

javascript - 与 .find() 相反

javascript - 同步AJAX,页面加载gif

jquery - 对 jQuery 自动完成中的值进行排序

javascript - jquery悬停li以显示段落内?