function dibujaGrid(idTabla, myControls, colNamesParam, colModelParam,
captionTitle, Width, Height, Filtro, Footer) {
// Grid para los eventos
jQuery("#" + idTabla).jqGrid({
datatype : "json",
scroll : true,
loadtext : 'Cargando...',
colNames : colNamesParam,
colModel : colModelParam,
width : Width,
height : Height,
footerrow : Footer,
shrinkToFit : true,
hiddengrid : false,
hidegrid:false,
viewrecords : true,
rowNum : 1000,
caption : captionTitle,
autowidth: true
});
}
jQuery(document).ready(function(){
var myControls = new Array('id','empresa','TotalRecibidos');
var colNameParams = ['Name ID','Name Empresa','Name Total'];
var colModelParam = [
{name:myControls[0],width: 100,sortable:false},
{name:myControls[1],width: 83,sortable:false},
{name:myControls[2],width: '100%',sortable:false,align:'center'}
];
dibujaGrid("bloque1", myControls, colNameParams, colModelParam, "Ejemplo Show/hide Colums Da un click aqui",544,220,false,false);
//Script para generar Drowdown del grid ocultar campos
//Agregamos el Atributo ata-dropdown necesario para plugin
$('#gbox_bloque1 div.ui-jqgrid-titlebar').attr('data-dropdown','#dropdown-2');
//Agregamos todos los campos que estan en em grid
$.each(myControls,function(i,value){
$("#dropdown-2 ul").append('<li><label><input id=HS_'+value+' title='+value+' type="checkbox" checked=cheked >'+value+'</label></li>');
});
//Colcamos el listenete ckick para los check generados
$('input[id^="HS_"]').click(function () {
var obj=$(this).attr('title');
if ($(this).prop('checked')) {
// checked
$("#bloque1").showCol(obj);
}else {
// Unchecked
$("#bloque1").hideCol(obj);
}
});
});
<!-- Componente Dropdown para ocultar columnas -->
<div id="dropdown-2" class="dropdown dropdown-tip">
<ul class="dropdown-menu">
</ul>
</div>
<table id="bloque1"></table>
External resources loaded into this fiddle: