列显示/隐藏在jqgrid中

时间:2014-09-02 10:47:03

标签: jquery jqgrid

我正在使用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

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

1 个答案:

答案 0 :(得分:2)

  1. 您应该在$("#list_records").jqGrid('columnChooser');
  2. 之前删除navButtonAdd来电
  3. navButtonAdd可用于向导航栏添加自定义按钮,但如果网格中不存在导航栏,则它不起作用。因此,在调用navGrid之前,您必须包含navButtonAdd的来电。例如,$("#list_records").jqGrid('navGrid', '#perpage', {add: false, edit: false, del: false, search: false, refresh: false});