使用jqgrid的columnchooser與埃裏克Hynd的多選

Question

我很jQuery的初學者，我試圖讓一個簡單的columnChooser工作jqGrid。 我使用jqGrid的導航欄插入「添加/刪除列」按鈕，並在此按鈕的單擊事件上顯示列選擇器。之前加載了multiselect插件後，它使用它來顯示帶有複選框的列。

這裏是我的代碼：

$("#myGrid") 
    .jqGrid({ 
     ... 
     toppager: true, 
     pager: jQuery('#myPager'), 
     ... 
    }) 
    .jqGrid('navGrid', "#myPager", { //add the navigator (defaults to the bottom of the grid) 
     edit: false, add: false, del: false, search: false, refresh: false, //remove all default buttons 
     cloneToTop: true //clone it, so a new one is created on top of the grid (name of the clone is <id of grid>_toppager) 
    }) 
    .jqGrid('navButtonAdd', "#myGrid_toppager", { //add a custom button to the cloned navigator 
     caption: "show/hide columns", 
     onClickButton: function() { 
      var colChooser = $("#colchooser_myGrid"); 
      if (colChooser.length == 0) { 
       $("#myGrid").jqGrid('columnChooser', { 
        width: 260, 
        height: 220, 
        classname: "column-chooser", 
        msel_opts: { 
         autoOpen: true, 
         header: false, 
         height: "auto", 
         classes: "column-chooser" }, 
        dlog_opts: { modal: true, resizable: false } 
       }); 
      } 
      else { 
       // ?? 
      } 
     } 
    }); 

我的CSS：

.column-chooser .ui-multiselect-checkboxes { 
    overflow-y: hidden; 
} 

我堅持三兩件事：

• 按鈕（確定和取消）是不可見。我在內部html代碼的任何地方都找不到它們。當我刪除選項時，它們會出現，但多選不會調整大小以適應columnChooser對話框。
• 我該如何讓多選選項「不可關閉」？我嘗試在msel_opts對象中添加beforeclose: function() { return false; }，並且它可以工作，但是即使在關閉對話框時，多選值始終保持可見。
• 對話框只顯示一次，然後拒絕再次啓動。這似乎是因爲它已經創建，但似乎jqGrid調用在對話框和多重選擇器上都銷燬了，所以我不能再顯示它們。

我使用jQuery 1.4.4，jQuery的UI 1.8.18，jqGrid的4.3.1和多選1.12，火狐11在所有測試

Answer 1

下面的代碼我最後寫一列選擇器添加到網格：

var navButton = { 
    caption: window.Constants.Grid.ShowHideColumns, 
    onClickButton: function() { 
     $(context.grid).jqGrid('columnChooser', { 
      width: 260, 
      height: 280, 
      classname: "column-chooser", 
      msel_opts: { //multiselect options 
       autoOpen: true, 
       header: false, 
       height: "auto", 
       classes: "column-chooser", 
       beforeclose: function() { return false; } //keep multiselect drop down open 
      }, 
      dlog_opts: { //dialog options 
       modal: false, 
       resizable: false, 
       draggable: false, 
       dialogClass: "column-chooser", 
       buttons: [ 
        { 
         text: window.Constants.Dialog.OK, 
         click: function() { 
          var colModel = $(context.grid).jqGrid("getGridParam", "colModel"); 
          $(".column-chooser .ui-multiselect-checkboxes li input[type=checkbox]").each(function() { 
           var colName = colModel[parseInt($(this).val(), 10)].name; 
           $(this).attr("checked") ? $(context.grid).showCol(colName) : $(context.grid).hideCol(colName); 
          }); 
          $(this).dialog("close"); 
         } 
        }, 
        { text: window.Constants.Dialog.Cancel, click: function() { $(this).dialog("close"); } } 
       ], 
       close: function() { 
        $(".column-chooser").remove(); //remove all elements 
        PopupBox.hideFullOverlay(); 
       } 
      } 
     }); 

     PopupBox.showFullOverlay(); 
    } 
}; 

var pager = $(context.grid).jqGrid("getGridParam", "pager"); 
$(context.grid) 
    .jqGrid("navGrid", pager, { edit: false, add: false, del: false, search: false, refresh: false, cloneToTop: true }) //add a nav grid to the pager and top pager 
    .jqGrid("navButtonAdd", pager, navButton) //add column button to pager 
    .jqGrid("navButtonAdd", context.grid + "_toppager", navButton); //add column button to top pager 

所以在這個代碼context.grid是電網的id，這個代碼被後稱爲創建網格（即看起來像$(context.grid).jqGrid({ /* insert colmodel, pager name, etc */ })線）後

這裏是正在針對我的所有問題進行：

• 確定和取消按鈕不可見：指定在選項
• 的按鈕越來越多選是unclosable：將return false保留爲beforeclose，但從dlog_opts中的close元素的頁面中刪除select。不知怎的，select停留在頁面中（作爲子節點的根節點）。
• 解決選擇器沒有顯示兩次的事實：同樣的事情。關閉對話框時刪除所有元素。

我這樣做是通過在每個創建的對象（多選，選擇器，對話框）上設置相同的類。當我完成使用它時，我使用這個類從我的html中刪除了所有內容。

問題的根源是，jqGrid的不創建爲內容的適當的HTML層次，可能是因爲這樣的多選插件作品（它隱藏了select元素和含有該複選框它創造未來的ul列表）。最後，我發現自己有3個div，其中一個包含對話框，一個包含ul，另一個包含select，它們都是body元素的所有直接子元素。關閉時，jqGrid會離開select元素，並在第二次打開選擇器時打破它。

Answer 2

一段時間我貼the suggestion這是我以後做之前回答於the answer。在the answer我建議用我的修改替換原來的jqGrid columnChooser。

在這種情況下，你將能夠使用beforeClose回調jQuery UI對話框。你將能夠使用beforeClose太：

$grid.jqGrid('navButtonAdd', '#myGrid_toppager', { 
    caption: "show/hide columns", 
    //buttonicon: "ui-icon-calculator", 
    //title: "Choose columns", 
    onClickButton: function() { 
     $(this).jqGrid('columnChooser', { 
      dialog_opts: { 
       beforeClose: function() { 
        return confirm("Do you want to close the dialog?"); 
       } 
      } 
     }); 
    } 
}); 

小問題是Click事件處理程序的當前實現columnChooser「取消」按鈕，不叫beforeClose。如果您修改代碼

buttons[opts.bCancel] = function(event) { 
    opts.cleanup(true); 
}; 

的相應部分

buttons[opts.bCancel] = function(event) { 
    if (false === $(this).data("dialog")._trigger('beforeClose', event)) { 
     return; 
    } 
    opts.cleanup(true); 
}; 

見the demo可以解決這個問題很容易。您將看到beforeClose的代碼confirm("Do you want to close the dialog?")將被執行。