免费的 jqGrid 带标题但不带列 headers

Question

我想显示标题，而不是列 headers。当第一次显示网格时，只有标题应该是可见的。当网格展开时，列 headers 可见。请参阅 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 及其父级 div，它具有角色作为 columnheader

$('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>

希望对您有所帮助。

免费的 jqGrid 带标题但不带列 headers

free jqGrid with Caption and without column headers

jqgrid