jqgrid 4.6.0 列选择器问题答案

【问题标题】：jqgrid 4.6.0 column chooser issuesjqgrid 4.6.0 列选择器问题
【发布时间】：2014-09-11 06:57:40
【问题描述】：

我使用的是 jqGrid 4.6.0。使用以下代码实现了列选择器功能。我正在使用

jquery-ui-1.11.1.js
jquery.multi-select.js
jquery-ui.css
multi-select.css

$.extend($.ui.multiselect, {
                locale: {
                    addAll: 'Make all visible',
                    removeAll: 'Hidde All',
                    itemsCount: 'Avlialble Columns'
                }
            });

   $.extend(true, $.jgrid.col, {
                width: 500,
                msel_opts: { dividerLocation: 0.5 }
            });

            $grid.jqGrid('navButtonAdd', "#p" + $grid.attr("id"), {
                caption: "",
                buttonicon: "ui-icon-calculator",
                title: "Choose columns",
                onClickButton: function () {
                    $(this).jqGrid('columnChooser',
                         {
                           width: 260,
                           height: 280,
                           classname: "column-chooser",
                           msel_opts: { //multiselect options
                               autoOpen: true,
                               header: true,
                               height: "auto",
                               classes: "column-chooser",
                               beforeclose: function () { return false; } //keep multiselect drop down open  
                           }
                        });
                }
            });

列选择器弹出窗口显示没有可用列，并使所有列可见选项.. 它只有一个选项可用，即选择列..

谁能帮忙..

提前致谢...

【问题讨论】：

标签： jqgrid

【解决方案1】：

jquery.multi-select.js 和multi-select.css 是从哪里得到的，非常可疑。我想你得到了错误的文件。您从 trirand 下载的 jqGrid 包含 plugins 子目录和 ui.multiselect.js 和 ui.multiselect.css。因此，您使用 jqGrid 和 columnChooser 的页面的典型包含 <head> 可能如下

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css"
      href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css"
      href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" />
<style type="text/css">
    html, body { font-size: 75%; }
</style>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript"
        src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.js"></script>
<script type="text/javascript"
        src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript"
        src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>

我最近发布了the bug report，其中我描述了一些小步骤，以使“全部删除”和“全部添加”在使用最新版本的 jQuery 和 jQuery UI 的情况下工作。 ui.multiselect.js和jquery.jqGrid.src.js的修改版可以从here和here下载。

The demo可以作为columnChooser使用的原型。

【讨论】：

【解决方案2】：

我使用的是不同的 Multiselect js 和 css 文件..

我下载了 JQGRID 4.6.0 包..它给了我 ui.multiselect.css 和 ui.multiselect.js 文件..我将它们添加到我的项目中..

现在列选择器弹出窗口显示可用列并使所有列可见选项.. 谢谢 Oleg。

【讨论】：

很高兴能为您提供帮助。小记：您发布的此类答案对于您的问题不是真正的答案。最好将信息作为对问题的评论发布，或者您可以将问题的文本附加到文本中......