Jquery JqGrid自定义按钮不显示

我想添加一个自定义按钮，允许在jqGrid中显示/隐藏列

这以前是有效的，但后来我按照Oleg的建议更新了以下内容

现在按钮甚至不再出现

var grid = $('#table');
            $('#table').jqGrid({
                datatype: 'jsonstring',
                editurl: 'ajax/modify',
                mtype: 'POST',
                loadonce: false,
                datastr: jobs,
                height: 600,
                autowidth: true,
                forceFit: true,
                gridview: true,
                viewrecords: true,
                multiselect: true,
                sortable: false,
                toppager: true,
                treeGrid: true,
                treeGridModel: 'adjacency',
                treedatatype: 'POST',
                ExpandColumn: 'jobType',
                ExpandColClick: true,
                colNames: [
                    "Id ",
                    "Job Type"
                ],
                colModel: [{
                    name: 'id',
                    index: 'id',
                    editable: true,
                    edittype: 'text',
                    key: true
                }, {
                    name: 'jobType',
                    index: 'jobType',
                    editable: true,
                    edittype: 'text'
                }],
                jsonReader: {
                    repeatitems: false,
                    root: function(obj) {
                        return obj;
                    },
                    page: function() {
                        return 1;
                    },
                    total: function() {
                        return 1;
                    },
                    records: function(obj) {
                        return obj.length;
                    }
                });

grid.jqGrid('navGrid', '#table_toppager', {
                edit: true,
                add: true,
                refresh: false,
                //view: true,
                del: false,
                search: false,
                alertcap: 'Alert',
                alerttext: 'Please select a row to edit.'
            }, { //options for EDITting an existing record
                topinfo: 'Edit the database entries for the selected row. ',
                editCaption: "Edit",
                bSubmit: "Submit",
                bCancel: "Close",
                bClose: "Close",
                saveData: "Do you want to save the changes? ",
                bYes: "Save",
                bNo: "Cancel",
                bExit: "Don't Save",
                viewPagerButtons: false,
                savekey: [true, 13],
                width: 500,
                recreateForm: true}).jqGrid('navButtonAdd', "#table_toppager_left", {
                caption: "Show/Hide Columns",
                buttonicon: "ui-icon-newwin",
                onClickButton: function() {
                    grid.jqGrid('columnChooser', {
                        done: function(perm) {
                            if (!perm) {
                                return false;
                            }
                            this.jqGrid('remapColumns', perm, true);
                        }
                    });
                },
                //position: "last",
                title: "Columns",
                cursor: "pointer"
            });

---

谢谢你的错误报告。我在代码中做了一些更改，因为在那里读取了iconSet配置的一些特定部分，只有公共部分被破坏了。我已经修好了密码。您需要从github重新加载源，或者使用当前源重试https://rawgit.com/free-jqgrid/jqGrid/master/... 网址

因为您使用免费jqGrid，我建议您另外使用新样式的选项。有关详细信息，请参阅。它允许指定其他方法的许多默认选项，如navGrid选项。它将代码简化为以下内容

$("#table").jqGrid({
    datatype: "local",
    //editurl: "ajax/modify",
    datastr: jobs,
    height: 600,
    autowidth: true,
    viewrecords: true,
    multiselect: true,
    toppager: true,
    treeGrid: true,
    iconSet: "fontAwesome",
    sortable: true,
    treeGridModel: "adjacency",
    treedatatype: "POST",
    ExpandColumn: "jobType",
    ExpandColClick: true,
    colNames: [ "Id", "Job Type" ],
    colModel: [
        { name: "id", key: true },
        { name: "jobType", editable: true }
    ],
    navOptions: {
        refresh: false,
        del: false,
        search: false,
        alertcap: "Alert",
        alerttext: "Please select a row to edit."
    },
    formEditing: {
        topinfo: "Edit the database entries for the selected row. ",
        editCaption: "Edit",
        bSubmit: "Submit",
        bCancel: "Close",
        bClose: "Close",
        saveData: "Do you want to save the changes? ",
        bYes: "Save",
        bNo: "Cancel",
        bExit: "Don't Save",
        viewPagerButtons: false,
        savekey: [true, 13],
        width: 500
        //recreateForm: true - it's needed in free jqGrid
        //                     only to reset dialog position
    }
}).jqGrid("navGrid")
.jqGrid("showHideColumnMenu")
.jqGrid("navButtonAdd", {
        caption: "Show/Hide Columns",
        //buttonicon: "ui-icon ui-icon-newwin",
        onClickButton: function () {
            $(this).jqGrid("columnChooser");
        },
        title: "Columns",
        cursor: "pointer"
    });

我建议您另外包括iconSet:fontsawesome选项和。它使许多图标具有可伸缩性。如果您仍然需要将字体图标与jQuery UI图标组合起来，请参见，您只需添加UI图标UI图标newwin之类的图标，而不是UI图标newwin其他UI图标类

还有一个提示：您可以另外包括所需的jquery-ui.min.js或jquery-ui.js。它提供了showHideColumnMenu方法，您可以在不使用任何参数$'table'.jqGrid'showHideColumnMenu'；的情况下调用该方法；。它使用jQueryUI菜单在网格的列标题中创建上下文菜单，用于隐藏/显示网格的列。如果添加sortable:true选项，则该选项将能够通过拖放列标题对列重新排序，并通过右键单击上下文菜单隐藏/显示

---

查看带有代码的演示。

我看到您将包含key:true的列声明为可编辑：true。此外，还可以为列使用id名称。两者都可能有副作用。通常有5个保留的列名：cb、nm、subgrid、_id_uu和id。通常可以只允许使用5个保留名称中的一个：id，但必须添加localReader:{id:myKey}和jsonReader:{id:myKey}。我建议您避免在列中使用id名称。我想我需要在treegrid中使用id列，因为它是“父级”的引用？我实际上不需要在我的网格中显示它。你应该只添加需要显示给用户的列。需要jqGrid的其他属性将被自动读取。无论如何，您都不应该使id列可编辑。我把演示贴在了我答案的末尾。没有id列也可以工作。要添加子节点，您需要首先选择要成为其父节点的节点。谢谢，我现在删除了它，它也可以工作。那么，你的意思是，如果colModel中的所有列都应该是隐藏的，那么我就可以将它们从colModel中删除：是的，即使我需要在我的数据集中引用它们，我仍然可以引用它们？你应该准确地定义你想要的以及你使用的其他参数。例如，在数据类型为“本地”的情况下，所有数据都将自动保存。在更常见的情况下，您需要对要读取并保存在本地数据中的属性数组使用additionalProperties。例如，TreeGrid会自动附加附加属性和所有TreeGrid特定属性。看见