Question

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

的的jquery-UI-1.11.1.js
的 jquery.multi-select.js
的的jquery-ui.css
的多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  
                           }
                        });
                }
            });

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

有人可以提供帮助..

提前感谢...

Answer 1

非常怀疑您获得jquery.multi-select.js和multi-select.css的位置。我想你会得到错误的文件。您从trirand下载的jqGrid包含plugins子目录ui.multiselect.js和ui.multiselect.css。因此，jqGrid与<head>一起使用的页面的columnChooser的典型包含可以是以下

<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，其中我描述了一些小步骤，以及＃34;删除全部＆＃34;和＆＃34;添加所有＆＃34;在使用jQuery和jQuery UI的最新版本的情况下工作。您可以从here和here下载ui.multiselect.js和jquery.jqGrid.src.js的修改版本。

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

Answer 2

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

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

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

jqgrid 4.6.0列选择器问题

2 个答案: