列选择器图标在分页栏中不可见

Question

有谁知道为什么列选择器图标在 jqGrid 的分页栏中不可见？我正在使用免费的 jqGrid v4.9.2

[Html]

<script src="~/Member/Scripts/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>  <!-- JQuery UI -->
<script src="~/Member/Scripts/jqgrid-v4.9.2/i18n/grid.locale-en.js" type="text/javascript"></script>   <!-- jqGrid Plugin -->
<script src="~/Member/Scripts/jqgrid-v4.9.2/jquery.jqgrid.min.js" type="text/javascript"></script>   <!-- jqGrid Plugin -->
<script src="~/Member/Scripts/jqgrid-v4.9.2/ui.multiselect.min.js" type="text/javascript"></script>   <!-- jqGrid Plugin -->

<div id="BatchReportJqgrid" class="GridViewForceCenterInAllWebBrowsers" style="padding-top:2px;padding-bottom:20px;">
     <div><table id="BatchReportJqgrid_Spreadsheet"></table></div>
     <div id="BatchReportJqgrid_Pager"></div>
</div>

[Javascript]

var _httpHost = window.location.host;  //This give you "localhost:<<port #>>" on local machine...
var _dealerAccountId = parmDealerAccountId;
var _dealerUserId = parmDealerUserId;
var _dealerBranchAccountId = parmDealerBranchAccountId;
var _jqgridSpreadsheetId = "BatchReportJqgrid_Spreadsheet";
var _jqgridPagerId = 'BatchReportJqgrid_Pager';
var _jqgridLayoutWidth = 1022;
var _jqgridDialogColumnChooserWidth = 800;


    //===============================================================================
    //jqGrid - Initialize...
    //===============================================================================
    $('#' + _jqgridSpreadsheetId).jqGrid({
        url: "https://" + _httpHost + "/WebApi/Webpages/Member/BatchFooReport/JqgridSpreadsheetLookup/" + _dealerAccountId + "/" + _dealerUserId + "/" + _dealerBranchAccountId + "",
        datatype: "local",
        mtype: 'POST',
        jsonReader: { repeatitems: false },
        postData: {},
        colName: ["StockNumber", "VIN", "Year", "Make", "Model", "Trim"],
        colModel: [
            { jsonmap: function (o) { return o.cell[0]; }, name: 'Stock Number', index: 'StockNumber', sortable: true, sorttype: 'text', align: 'center' },
            { jsonmap: function (o) { return o.cell[1]; }, name: 'Vin', index: 'Vin', sortable: true, sorttype: 'text', width: 190, align: 'center' },
            { jsonmap: function (o) { return o.cell[2]; }, name: 'Year', index: 'Year', sortable: true, sorttype: 'int', align: 'center' },
            { jsonmap: function (o) { return o.cell[3]; }, name: 'Make', index: 'Make', sortable: true, sorttype: 'text', align: 'center'},
            { jsonmap: function (o) { return o.cell[4]; }, name: 'Model', index: 'Model', sortable: true, sorttype: 'text', align: 'center' },
            { jsonmap: function (o) { return o.cell[5]; }, name: 'Trim', index: 'Trim', sortable: true, sorttype: 'text', align: 'center' },
        ],
        pager: '#' + _jqgridPagerId,
        emptyrecords: "No vehicles found that match your search.",
        loadtext: "Locating vehicles, please wait...",
        recordtext: "Viewing {0} - {1} of {2} vehicles.",
        rowNum: 25,
        viewrecords: true,
        caption: "Batch Foo Report",
        rowList: [25, 50, 100],
        loadonce: false,
        width: _jqgridLayoutWidth,
        height: 400,
        loadError: function (xhr, status, error) {
            alert("Error occured while retrieving data.");
        }
    });
    //==========================================

    //===============================================================================
    //jqGrid --> Navigation Buttons...
    //===============================================================================
    //Column Chooser Icon [Columns]...
    //#$('#' + _jqgridSpreadsheetId).navButtonAdd('#' + _jqgridPagerId, {
    $('#' + _jqgridSpreadsheetId).jqGrid('navButtonAdd', '#' + _jqgridPagerId, {
        position: "first",
        caption: "Columns",
        title: "Columns",
        //cursor: "pointer",  //This does not work...
        onClickButton: function () {
            //http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods&s[]=column&s[]=chooser...
            //$('#' + _jqgridSpreadsheetId).columnChooser({
            $(this).columnChooser({
                title: "Columns",
                caption: "Select Columns",
                width: _jqgridDialogColumnChooserWidth,
                modal: true,
                done: function (perm) {
                    if (perm) { /* "OK" button are clicked... */
                        this.jqGrid("remapColumns", perm, true);
                    }
                    else { /* "Cancel" button or "x" button are clicked... */ }
                }
            });
        }
    });
    //===============================================================================

Answer 1

您需要包含创建导航栏的 navGrid 调用 ，然后 您可以根据 navButtonAdd 在导航栏中添加任何自定义按钮.即使您不需要任何标准按钮，您也应该使用相应的参数添加 navGrid 的调用：.jqGrid("navGrid", {add: false, edit: false, del: false, refresh: false, search: false});

列选择器图标在分页栏中不可见

Column Chooser icon not visible in pager bar

jqgrid

free-jqgrid