带标题和没有列标题的免费jqGrid

Question

我想显示标题，但不显示列标题。首次显示网格时，只应显示标题。展开网格时，列标题可见。请参阅jsFiddle

var $grid = $("#grid");

$grid.closest("div.ui-jqgrid-view")
  .children("div.ui-jqgrid-hdiv")
  .hide();

Answer 1

您可以使用解决方案https://jsfiddle.net/7v70640y/5/

$("#grid").jqGrid({
    colModel: [
        { name: "firstName" },
        { name: "lastName" }
    ],
    caption: "The caption",
    hiddengrid: true, 
    data: [
        { id: 10, firstName: "Angela", lastName: "Merkel" },
        { id: 20, firstName: "Vladimir", lastName: "Putin" },
        { id: 30, firstName: "David", lastName: "Cameron" },
        { id: 40, firstName: "Barack", lastName: "Obama" },
        { id: 50, firstName: "François", lastName: "Hollande" }
    ]
});

$('div[role="columnheader"]').parent().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<table id="grid"></table>

隐藏div＆amp;它的父级div 角色为列标题

$('div[role="columnheader"]').parent().hide();

使用多个jqGrid

更新

您可以使用解决方案https://jsfiddle.net/7v70640y/6/

$("#grid1").jqGrid({
    colModel: [
        { name: "firstName" },
        { name: "lastName" }
    ],
    caption: "The caption",
    hiddengrid: true, 
    data: [
        { id: 10, firstName: "Angela", lastName: "Merkel" },
        { id: 20, firstName: "Vladimir", lastName: "Putin" },
        { id: 30, firstName: "David", lastName: "Cameron" },
        { id: 40, firstName: "Barack", lastName: "Obama" },
        { id: 50, firstName: "François", lastName: "Hollande" }
    ]
});

$("#grid2").jqGrid({
    colModel: [
        { name: "firstName" },
        { name: "lastName" }
    ],
    caption: "The caption",
    hiddengrid: true, 
    data: [
        { id: 10, firstName: "Angela", lastName: "Merkel" },
        { id: 20, firstName: "Vladimir", lastName: "Putin" },
        { id: 30, firstName: "David", lastName: "Cameron" },
        { id: 40, firstName: "Barack", lastName: "Obama" },
        { id: 50, firstName: "François", lastName: "Hollande" }
    ]
});


$('#gview_grid1').find('div[role="columnheader"]').parent().hide();

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<table id="grid1"></table>
<br/><br/>
<table id="grid2"></table>

希望这会对你有所帮助。