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使用Multiselect插件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;
 }

使JqGrid列选择器弹出可拖动

2 个答案: