Question

我想添加一个自定义按钮，允许在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"
            });

Answer 1

感谢您提供错误报告。我在代码中做了一些更改，因为有iconSet配置的某些特定部分（仅“常见”部分）的读取被打破。我修复了代码。您需要从github重新加载源，或使用https://rawgit.com/free-jqgrid/jqGrid/master/... URL中的当前源重试。

因为你使用免费的jqGrid，我建议你另外使用新的选项。有关详细信息，请参阅the wiki article。它允许指定其他方法的许多默认选项，例如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: "fontAwesome"选项和<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">。它使许多图标可扩展。如果您仍然需要将字体真棒图标（请参阅here和here）与jQuery UI图标结合使用，则只需添加"ui-icon ui-icon-newwin"而非"ui-icon-newwin"等图标（其他{{ 1}} class）。

再向您提示一下：您可以添加"ui-icon"，此外还需要<script src="https://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.jqgrid.showhidecolumnmenu.js"></script>或jquery-ui.min.js。它提供了jquery-ui.js方法，您可以在没有任何参数的情况下调用它（showHideColumnMenu）。它使用jQuery UI Menu在网格的列标题中创建上下文菜单，用于隐藏/显示网格的列。如果您添加$('#table').jqGrid('showHideColumnMenu');选项，则可以通过拖放列标题对列进行重新排序，并通过鼠标右键单击隐藏/显示（按上下文菜单）。

使用您的代码here查看演示。

JqGrid自定义按钮不显示

1 个答案:

JqG​​rid自定义按钮不显示

1 个答案:

JqGrid自定义按钮不显示