jqgrid中的列显示/隐藏

Question

我正在使用jqgrid columnChooser，像这样：

<script>
$(document).ready(function () {
    $("#list_records").jqGrid({
        url: "getGridData.php",
        datatype: "xml",
        mtype: "GET",
        colNames: ["User Id", "User Name","Password"],
        colModel: [
            { name: "userId",align:"right"},
            { name: "userName"},
            { name: "password"},

        ],
        pager: "#perpage",
        rowNum: 10,
        rowList: [10,20],
        sortname: "userId",
        sortorder: "asc",
        height: 'auto',
        viewrecords: true,
        gridview: true,
        caption: "test"
    }); 
    $("#list_records").jqGrid('columnChooser');
    $("#list_records").jqGrid('navButtonAdd', '#perpage', {
caption: "showcolumns",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
    $(this).jqGrid('columnChooser');
    $("#colchooser_" + $.jgrid.jqID(this.id) + " ul.selected")
        .bind("sortreceive", function (event, ui) {
            alert('column "' + ui.item.text() + '" is choosed');
        });
    $("#colchooser_" + $.jgrid.jqID(this.id) + " ul.available a.action")
        .click(function () {
            alert('column "' + $(this).parent().text() + '" is choosed');
        });

   }
 });    
 });
 </script>

但我希望我的网格看起来像 http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithColumnChooser8.htm

请帮我解决这个问题。谢谢。

Answer 1

1. 您应该在navButtonAdd 之前删除$("#list_records").jqGrid('columnChooser'); 调用
2. navButtonAdd 可用于向导航栏添加自定义按钮，但如果网格中不存在导航栏，则无法使用。所以你必须在调用navButtonAdd之前包括navGrid的调用。例如，$("#list_records").jqGrid('navGrid', '#perpage', {add: false, edit: false, del: false, search: false, refresh: false});