使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使用Multiselect插件ui.multiselect.js和ui.multiselect.css，它被實現爲jQuery UI小部件。因此，也必須包括jquery-ui.min.js，而不僅僅是jquery-ui.min.css。請參閱the demo作爲您應包含的CSS和JS文件的示例，或者爲the answer創建的more simple demo。

Answer 2

我得到了解決方案。問題是什麼，我已經修復了CSS中的top和left屬性，並將其標記爲!important。所以，當我拖動彈出窗口時，頂部和左側位置會更改該值（我們可以通過瀏覽器的控制檯窗口看到該值），但由於我設置了!important，所以它不會移動。

現在我解決了這個問題，並沒有將top和left屬性設置爲！重要。

錯誤之一：

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

以上是錯誤的。我們不應該設置top和left。

更正爲：

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