JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.css">
<script src="http://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.js"></script>
<!-- Componente Dropdown para ocultar columnas -->
<div id="dropdown-2" class="dropdown dropdown-tip">
<ul class="dropdown-menu">
</ul>
</div>
<table id="bloque1"></table>
JavaScript
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",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','#bloque1');
//Agregamos todos los campos que estan en em grid
$.each(colModelParam,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);
}
});
});