使 JqGrid 列选择器弹出可拖动

Question

我正在尝试使 jqgrid 列选择器弹出窗口可拖动到屏幕的任何位置。

因此我尝试将jquery.jqgrid.js 更改为：

columnChooser: function (opts) {
    var self = this;
    if ($("#colchooser_" + $.jgrid.jqID(self[0].p.id)).length) { return; }
    var selector = $('<div id="colchooser_' + self[0].p.id + '" style="position:relative;overflow:hidden"><div><select multiple="multiple"></select></div></div>');
    var select = $('select', selector);

    function insert(perm, i, v) {
        if (i >= 0) {
            var a = perm.slice();
            var b = a.splice(i, Math.max(perm.length - i, i));
            if (i > perm.length) { i = perm.length; }
            a[i] = v;
            return a.concat(b);
        }
    }
    opts = $.extend({
        "width": 'auto',
        "height": 260,
        "classname": null,
        "done": function (perm) { if (perm) { self.jqGrid("remapColumns", perm, true); } },
        /* msel is either the name of a ui widget class that
        extends a multiselect, or a function that supports
        creating a multiselect object (with no argument,
        or when passed an object), and destroying it (when
        passed the string "destroy"). */
        "msel": "multiselect",
        /* "msel_opts" : {}, */

        /* dlog is either the name of a ui widget class that 
        behaves in a dialog-like way, or a function, that
        supports creating a dialog (when passed dlog_opts)
        or destroying a dialog (when passed the string
        "destroy")
        */
        "dlog": "dialog",
        "dialog_opts": {
            "minWidth": 550
        },
        "draggable": function (IsDraggable) {
            if (IsDraggable) {
                this.draggable();
            }

        },

       ....
       ....
       ....
       ....
       ....
}

我的代码位于上述函数的最后一个属性draggable。 即我创建了一个如下所示的可拖动属性：

"draggable": function (IsDraggable) {
    if (IsDraggable) {
        this.draggable();
}

但是我的列选择器的弹出窗口无法拖动。

我在这里感到震惊。 我想将jqgrid 中的列选择器移动到屏幕的任意位置。

Answer 1

首先，您永远不应该修改jquery.jqgrid.js 或jquery.jqgrid.src.js 的代码。取而代之的是，您始终可以使用$.jgrid.extend(...); 来替换 jqGrid 方法columnChooser，例如，新的实现。以my old answer 为例。

我认为您的问题的根源是缺少您必须包含的 JavaScript 或 CSS 文件。重要的是要了解columnChooser 使用多选插件ui.multiselect.js 和ui.multiselect.css，这是作为jQuery UI 小部件实现的。因此，还必须包括jquery-ui.min.js 而不仅仅是jquery-ui.min.css。请参阅 the demo 作为您应该包含的 CSS 和 JS 文件的示例或 more simple demo，为 the answer 创建。

Answer 2

我得到了解决方案。问题是什么，我已经修复了 CSS 中的 top 和 left 属性并将其标记为 !important。因此，当我拖动弹出窗口时，顶部和左侧位置会更改值（我们可以通过浏览器的控制台窗口看到），但由于我设置了!important，它永远不会移动。

现在我通过不将top 和left 属性设置为!important 解决了这个问题。

一个错误：

.ui-dialog{
    top: 10px !important;
    left 10px !important;
 }

以上是错误的。我们不应该设置top 和left。

更正为：

 .ui-dialog{
    top: 10px;
    left 10px;
 }