在 jqgrid 中使用 columnchooser（一个有可用的 column/add 列）我需要添加任何 js 或插件吗？

Question

我尝试使用 .columnchooser()。但是我不明白设计。它出现在一列而不是两列中。

我想要下面的link：
http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithColumnChooser5__.htm

这是我的代码。

<table id="grid"></table>
<div id="pager"></div>
<h2>Index</h2>
<link href="~/Scripts/local/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/local/jquery-1.11.3.min.js"></script>
<script src="~/Scripts/local/jquery-ui-1.11.4.min.js"></script>
<link href="~/Scripts/local/ui.multiselect.css" rel="stylesheet" />
<script src="~/Scripts/local/ui.multiselect.js"></script>
<link href="~/Scripts/local/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/local/grid.locale-en.js"></script>
<script src="~/Scripts/local/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {        
            "use strict";
            var mydata = [
                    { id: "10", invdate: "2015-10-01", name: "test", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "20", invdate: "2015-09-01", name: "test2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "30", invdate: "2015-09-01", name: "test3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "40", invdate: "2015-10-04", name: "test4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "50", invdate: "2015-10-31", name: "test5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "60", invdate: "2015-09-06", name: "test6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "70", invdate: "2015-10-04", name: "test7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "80", invdate: "2015-10-03", name: "test8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "90", invdate: "2015-09-01", name: "test9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                    { id: "100", invdate: "2015-09-08", name: "test10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
                    { id: "110", invdate: "2015-09-08", name: "test11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "120", invdate: "2015-09-10", name: "test12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
            ],
                numberTemplate = {
                    formatter: "number", align: "right", sorttype: "number",
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }
                };
            $("#grid").jqGrid({
                colModel: [
                    { name: "name", label: "Client", width: 53 },
                    {
                        name: "invdate", label: "Date", width: 75, align: "center", sorttype: "date",
                        formatter: "date", formatoptions: { newformat: "d-M-Y" }
                    },
                    { name: "amount", label: "Amount", width: 65, template: numberTemplate },
                    { name: "tax", label: "Tax", width: 41, template: numberTemplate },
                    { name: "total", label: "Total", width: 51, template: numberTemplate },
                    {
                        name: "closed", label: "Closed", width: 59, formatter: "checkbox",
                        align: "center", firstsortorder: "desc",
                        edittype: "checkbox", editoptions: { value: "Yes:No", defaultValue: "Yes" },
                        stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" }
                    },
                    {
                        name: "ship_via", label: "Shipped via", width: 87, align: "center", formatter: "select",
                        editoptions: { value: "FE:FedEx;TN:TNT;DH:DHL", defaultValue: "DH" }
                    }
                ],
                datatype: "local",
                data: mydata,
                height: "auto",
                gridview: true,
                rownumbers: true,
                rowNum: 10,
                pager: "#pager",
                sortname: "invdate",
                sortorder: "desc",
                caption: "Usage of columnChooser"
            }).jqGrid("navGrid", "#pager", { add: false, edit: false, del: false }).jqGrid("navButtonAdd", "#pager", {
                caption: "",
                buttonicon: "ui-icon-calculator",
                title: "Choose columns",
                onClickButton: function () {
                    $(this).jqGrid("columnChooser");
                }
            });
    });
</script>

Answer 1

我想你忘了包括文件中的一个：ui.multiselect.min.css、jquery-ui.min.js、ui.multiselect.min.js（或 ui.multiselect.css、jquery-ui.js、ui.multiselect.js).文件 ui.multiselect.* 可以在 jqGrid 的 plugins 文件夹中找到。这些文件作为免费 jqGrid 的一部分在 CDN 上可用：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/plugins/ui.multiselect.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/plugins/ui.multiselect.min.js"></script>

您也可以以更安全的形式包含文件：

<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/plugins/ui.multiselect.min.css"
    integrity="sha384-ZiGiMTFP/JPxu5YXtclEjVDGZHbKOP2RBpOke65fQkSTg9yVHjpIBz3heEG6/7ja"
    crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/plugins/ui.multiselect.min.js"
    integrity="sha384-NrAnGBGjwjZspUViA2F5wJAZyC03l65Oaz39yB5Y3YDclQeASNM5luBMgPfDJRKE"
    crossorigin="anonymous"></script>

文件将被快速加载（如果客户端的网络浏览器支持，则使用HTTP/2）并且在网络浏览器中会有很好的缓存。

在 jqgrid 中使用 columnchooser（一个有可用的 column/add 列）我需要添加任何 js 或插件吗？

Using columnchooser in jqgrid(one with available column/add column) do I need to add any js or plugin?

jquery

jqgrid