使 JqGrid 列选择器弹出窗口可拖动

Make JqGrid Column Chooser Pop-Up Draggable

本文关键字：窗口 拖动 JqGrid 列选 选择器      更新时间：2023-09-26

我正在尝试使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。

首先，

你永远不应该修改jquery.jqgrid.js或jquery.jqgrid.src.js的代码。取而代之的是，您可以随时使用$.jgrid.extend(...);来替换 jqGrid 方法columnChooser，例如，新的实现。以我的旧答案为例。

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

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

现在，我通过将top和left属性设置为！important解决了该问题。

错误的一个： 

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

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

更正为：

 .ui-dialog{
    top: 10px;
    left 10px;
 }
相关文章：