JSFiddle - React, Tailwind, and code Playground

by Raul Corona Xolaltenco

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>

<table id="bloque1"></table>

JavaScript

function dibujaGrid(idTabla, myControls, colNamesParam, colModelParam,
		captionTitle, Width, Height, Filtro, Footer) {
 
// Grid configuracion
	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,
        footerrow : true
	});
 
//    Colocamos un valor al Footer
	var jsontext = '{"id":"1"}';
	var ObjectJSON = JSON.parse(jsontext);
	$("#" + idTabla).jqGrid('footerData', 'set', ObjectJSON);   
 
}
 
 
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 footer como subHeader",544,220,false,false);
    
//Con esto hacemos que el row de Footer pase al header    
    $('#gview_bloque1 > div.ui-jqgrid-sdiv').css({
		    "border-bottom-style":"solid",
		    "border-bottom-color":"#a6c9e2",
		    "border-bottom-width":"2px"
		}).insertBefore($('#gview_bloque1 >div.ui-jqgrid-bdiv'));
		
    
	
});