javascript jQGrid 列选择器模式叠加

jQGrid Column Chooser Modal Overlay

提问by FastTrack

Looking off this example, notice how clicking on the Search button brings up a modal form with a darkened overlay behind it. Now notice how clicking on the Column Chooser button brings up a modal form but no overlay behind it.

查看此示例，请注意单击“搜索”按钮如何调出一个模态表单，其背后有一个变暗的叠加层。现在请注意单击“列选择器”按钮如何调出一个模态表单，但它后面没有叠加层。

My question is: how do I get the dark overlay to appear behind my Column Chooser popup?

我的问题是：如何让深色覆盖出现在我的列选择器弹出窗口后面？

回答by Oleg

There are currently undocumented optionof the columnChooser:

目前有无证选项中的columnChooser：

$(this).jqGrid('columnChooser', {modal: true});

The demodemonstrate this. One can set default parameters for the columnChooserwith respect of $.jgrid.coltoo:

该演示演示了这一点。我们可以设置默认参数为columnChooser相对的$.jgrid.col也：

$.extend(true, $.jgrid.col, {
    modal: true
});

Recently I posted the suggestionto extend a little functionality of the columnChooser, but only a partof the changes are current code of the jqGrid. Nevertheless in the new version will be possible to set much more jQuery UI Dialogoptions with respect of new dialog_optsoption. For example the usage of the following will be possible

最近我发布了扩展 的一些功能的建议columnChooser，但只有一部分更改是 jqGrid 的当前代码。尽管如此，在新版本中将可以针对新选项设置更多的jQuery UI 对话框dialog_opts选项。例如，可以使用以下内容

$(this).jqGrid('columnChooser', {
    dialog_opts: {
        modal: true,
        minWidth: 470,
        show: 'blind',
        hide: 'explode'
    }
});

To use full features which I suggested you can just overwrite the standard implementation of columnChooser. One can do this by including the following code

要使用我建议的全部功能，您只需覆盖columnChooser. 可以通过包含以下代码来做到这一点

$.jgrid.extend({
    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" : 420,
            "height" : 240,
            "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",

            /* dlog_opts is either an option object to be passed 
               to "dlog", or (more likely) a function that creates
               the options object.
               The default produces a suitable options object for
               ui.dialog */
            "dlog_opts" : function(opts) {
                var buttons = {};
                buttons[opts.bSubmit] = function() {
                    opts.apply_perm();
                    opts.cleanup(false);
                };
                buttons[opts.bCancel] = function() {
                    opts.cleanup(true);
                };
                return $.extend(true, {
                    "buttons": buttons,
                    "close": function() {
                        opts.cleanup(true);
                    },
                    "modal" : opts.modal ? opts.modal : false,
                    "resizable": opts.resizable ? opts.resizable : true,
                    "width": opts.width+20,
                    resize: function (e, ui) {
                        var $container = $(this).find('>div>div.ui-multiselect'),
                            containerWidth = $container.width(),
                            containerHeight = $container.height(),
                            $selectedContainer = $container.find('>div.selected'),
                            $availableContainer = $container.find('>div.available'),
                            $selectedActions = $selectedContainer.find('>div.actions'),
                            $availableActions = $availableContainer.find('>div.actions'),
                            $selectedList = $selectedContainer.find('>ul.connected-list'),
                            $availableList = $availableContainer.find('>ul.connected-list'),
                            dividerLocation = opts.msel_opts.dividerLocation || $.ui.multiselect.defaults.dividerLocation;

                        $container.width(containerWidth); // to fix width like 398.96px                     
                        $availableContainer.width(Math.floor(containerWidth*(1-dividerLocation)));
                        $selectedContainer.width(containerWidth - $availableContainer.outerWidth() - ($.browser.webkit ? 1: 0));

                        $availableContainer.height(containerHeight);
                        $selectedContainer.height(containerHeight);
                        $selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1));
                        $availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1));
                    }
                }, opts.dialog_opts || {});
            },
            /* Function to get the permutation array, and pass it to the
               "done" function */
            "apply_perm" : function() {
                $('option',select).each(function(i) {
                    if (this.selected) {
                        self.jqGrid("showCol", colModel[this.value].name);
                    } else {
                        self.jqGrid("hideCol", colModel[this.value].name);
                    }
                });

                var perm = [];
                //fixedCols.slice(0);
                $('option:selected',select).each(function() { perm.push(parseInt(this.value,10)); });
                $.each(perm, function() { delete colMap[colModel[parseInt(this,10)].name]; });
                $.each(colMap, function() {
                    var ti = parseInt(this,10);
                    perm = insert(perm,ti,ti);
                });
                if (opts.done) {
                    opts.done.call(self, perm);
                }
            },
            /* Function to cleanup the dialog, and select. Also calls the
               done function with no permutation (to indicate that the
               columnChooser was aborted */
            "cleanup" : function(calldone) {
                call(opts.dlog, selector, 'destroy');
                call(opts.msel, select, 'destroy');
                selector.remove();
                if (calldone && opts.done) {
                    opts.done.call(self);
                }
            },
            "msel_opts" : {}
        }, $.jgrid.col, opts || {});
        if($.ui) {
            if ($.ui.multiselect ) {
                if(opts.msel == "multiselect") {
                    if(!$.jgrid._multiselect) {
                        // should be in language file
                        alert("Multiselect plugin loaded after jqGrid. Please load the plugin before the jqGrid!");
                        return;
                    }
                    opts.msel_opts = $.extend($.ui.multiselect.defaults,opts.msel_opts);
                }
            }
        }
        if (opts.caption) {
            selector.attr("title", opts.caption);
        }
        if (opts.classname) {
            selector.addClass(opts.classname);
            select.addClass(opts.classname);
        }
        if (opts.width) {
            $(">div",selector).css({"width": opts.width,"margin":"0 auto"});
            select.css("width", opts.width);
        }
        if (opts.height) {
            $(">div",selector).css("height", opts.height);
            select.css("height", opts.height - 10);
        }
        var colModel = self.jqGrid("getGridParam", "colModel");
        var colNames = self.jqGrid("getGridParam", "colNames");
        var colMap = {}, fixedCols = [];

        select.empty();
        $.each(colModel, function(i) {
            colMap[this.name] = i;
            if (this.hidedlg) {
                if (!this.hidden) {
                    fixedCols.push(i);
                }
                return;
            }

            select.append("<option value='"+i+"' "+
                          (this.hidden?"":"selected='selected'")+">"+colNames[i]+"</option>");
        });
        function call(fn, obj) {
            if (!fn) { return; }
            if (typeof fn == 'string') {
                if ($.fn[fn]) {
                    $.fn[fn].apply(obj, $.makeArray(arguments).slice(2));
                }
            } else if ($.isFunction(fn)) {
                fn.apply(obj, $.makeArray(arguments).slice(2));
            }
        }

        var dopts = $.isFunction(opts.dlog_opts) ? opts.dlog_opts.call(self, opts) : opts.dlog_opts;
        call(opts.dlog, selector, dopts);
        var mopts = $.isFunction(opts.msel_opts) ? opts.msel_opts.call(self, opts) : opts.msel_opts;
        call(opts.msel, select, mopts);
        // fix height of elements of the multiselect widget
        var resizeSel = "#colchooser_"+$.jgrid.jqID(self[0].p.id),
            $container = $(resizeSel + '>div>div.ui-multiselect'),
            $selectedContainer = $(resizeSel + '>div>div.ui-multiselect>div.selected'),
            $availableContainer = $(resizeSel + '>div>div.ui-multiselect>div.available'),
            containerHeight,
            $selectedActions = $selectedContainer.find('>div.actions'),
            $availableActions = $availableContainer.find('>div.actions'),
            $selectedList = $selectedContainer.find('>ul.connected-list'),
            $availableList = $availableContainer.find('>ul.connected-list');
        $container.height($container.parent().height()); // increase the container height
        containerHeight = $container.height();
        $selectedContainer.height(containerHeight);
        $availableContainer.height(containerHeight);
        $selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1));
        $availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1));
        // extend the list of components which will be also-resized
        selector.data('dialog').uiDialog.resizable("option", "alsoResize",
            resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect');
    }
});

In the case you can continue to use the original minimized version of jquery.jqGrid.min.jsand the code which use can be just $(this).jqGrid('columnChooser');. Together with all default settings it will be like

在这种情况下您可以继续使用原始的最小化版本jquery.jqGrid.min.js并且使用的代码可以只是$(this).jqGrid('columnChooser');. 连同所有默认设置，它会像

$.extend(true, $.ui.multiselect, {
    locale: {
        addAll: 'Make all visible',
        removeAll: 'Hidde All',
        itemsCount: 'Avlialble Columns'
    }
});
$.extend(true, $.jgrid.col, {
    width: 450,
    modal: true,
    msel_opts: {dividerLocation: 0.5},
    dialog_opts: {
        minWidth: 470,
        show: 'blind',
        hide: 'explode'
    }
});
$grid.jqGrid('navButtonAdd', '#pager', {
    caption: "",
    buttonicon: "ui-icon-calculator",
    title: "Choose columns",
    onClickButton: function () {
        $(this).jqGrid('columnChooser');
    }
});

The demodemonstrate the approach. The main advantage of the changes - the really resizable Column Chooser:

该演示演示了该方法。更改的主要优点 - 真正可调整大小的列选择器：

UPDATED:Free jqGridfork of jqGrid, which I develop starting with the end of 2014, contains of cause the modified code of columnChooser.

更新：我从 2014 年底开始开发的 jqGrid 的免费 jqGrid分支，包含修改后的columnChooser.

回答by Sukesh Kumar

I get the following error while trying the code on the mobile device.

在移动设备上尝试代码时出现以下错误。

Result of expression 'selector.data('dialog').uiDialog' [undefined] is not an object.

The error points to the following line of code.

错误指向以下代码行。

selector.data('dialog').uiDialog.resizable("option", "alsoResize", resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect');

When I inspect the code, I find that the data object does not have anything called uiDialog.

当我检查代码时，我发现数据对象没有任何名为 uiDialog 的东西。

回答by Jimmery

just been looking thru the code, try adding this line:

刚刚查看代码，尝试添加以下行：

jqModal : true,

to this code:

到这个代码：

$grid.jqGrid('navButtonAdd', '#pager', {
            caption: "",
            buttonicon: "ui-icon-calculator",
            title: "Choose columns",
            onClickButton: function () {
....

like this:

像这样：

$grid.jqGrid('navButtonAdd', '#pager', {
            caption: "",
            buttonicon: "ui-icon-calculator",
            title: "Choose columns",
            jqModal : true,
            onClickButton: function () {
....