jqGrid libre avec légende et sans en-tête de colonne

Question

Je souhaite afficher la légende, mais pas les en-têtes de colonne. Lorsque la grille est affichée pour la première fois, seule la légende doit être visible. Lorsque la grille est développée, les en-têtes de colonne sont visibles. S'il vous plaît voir jsFiddle

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

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

Answer 1

Ici, vous allez avec une solution 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>

cacher Juste le div & il est parent div qui a rôle comme columnheader

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

Mise à jour avec plusieurs jqGrid

Ici, vous allez avec une solution 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>

Espérons que cela vous aidera.