使用jqgrid的columnchooser与埃里克Hynd的多选

问题描述：

我很jQuery的初学者，我试图让一个简单的columnChooser工作jqGrid。我使用jqGrid的导航栏插入“添加/删除列”按钮，并在此按钮的单击事件上显示列选择器。之前加载了multiselect插件后，它使用它来显示带有复选框的列。使用jqgrid的columnchooser与埃里克Hynd的多选

这里是我的代码：

$("#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在所有测试

答

下面的代码我最后写一列选择器添加到网格：

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元素，并在第二次打开选择器时打破它。

答

一段时间我贴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?")将被执行。

使用jqgrid的columnchooser与埃里克Hynd的多选

相关推荐