Tengo un grid de jqGrid y quisiera saber como hacer un refresh automatico solo y solo si algun dato del JSON (de la base de datos) cambie, a la grilla sin tener que utilizar el setinterval cada x segundos ya que carga la grilla sin que ningun dato cambie y no es optimo utilizar esa opcion. Mi codigo es este
$(document).ready(function () {
// master grid
$("#jqGrid").jqGrid({
url: 'masterGrid_usuarios.php',
datatype: "json",
colModel: [
{ label: 'Id', name: 'id_usuario',key:true, width: 50,align:'center' },
{ label: 'Nombre', name: 'nombre', width: 160},
{ label: 'Acceso', name: 'acceso', width: 170,align:'center'},
{ label: 'Estatus', name: 'status', width: 135,align:'center',formatter: function(cellvalue,options, rowObject){
if (cellvalue == "Activo") {
return '<span style="background-color:lightgreen; display:block;">'+cellvalue+'</span>';
}else{return '<span style="background-color:rgb(255,70,70); display:block;">'+cellvalue+'</span>';}
} }
],
width: 715,
height: 230,
rowNum:10,
rowList:[10,20,30],
viewrecords: true,
loadonce: true,
caption: "",
pager: "#jqGridPager",
});
//inicio barra navegacion master grid
jQuery("#jqGrid").jqGrid('navGrid','#jqGridPager',
{add:false, view:false, del:false,edit:false,refresh:false}
,{} /* Our edit options with handler */
,{width:'auto'} /*add options*/
,{ } /*delete options*/
,{multipleSearch:false}
,{closeOnEscape:true}
);
jQuery("#jqGrid").navButtonAdd('#jqGridPager',{
id:"refresh",
title:"Actualizar",
buttonicon:'ui-icon-refresh',
caption:'',
onClickButton:function(){
$(this).jqGrid("setGridParam",{datatype:'json'});
jQuery("#jqGrid").trigger('reloadGrid');
}
});
jQuery("#jqGrid").navButtonAdd('#jqGridPager',{
id:"busca",
title:"Ver Detalle",
buttonicon:'ui-icon-document',
caption:'',
onClickButton:function(){
var gr=jQuery('#jqGrid').jqGrid('getGridParam','selrow');
if(gr==null){
swal({title: 'Información', text: 'Por favor seleccione un Usuario' ,imageUrl: 'css/images/info1.png'});
return false;
}
else{
$.ajax({
type:"POST",
success:function(msg){
location.replace("detalleUsuario&gr="+gr);
}
})
}
}
});
jQuery("#jqGrid").navButtonAdd('#jqGridPager',{
id:"agregar",
title:"Agregar Nuevo Usuario",
buttonicon:'ui-icon-plus',
caption:'',
onClickButton:function(){
$.ajax({
type:"POST",
success:function(msg){
location.replace("crearUsuario");
}
})
}
});
jQuery('#jqGrid').navButtonAdd('#jqGridPager',{
id:"editar",
title: "Editar Usuario",
buttonicon:'ui-icon-pencil',
caption:'',
onClickButton:function(){
var gr = jQuery("#jqGrid").jqGrid('getGridParam' , 'selrow');
if(gr == null){
swal({title: 'Información', text: 'Por favor seleccione un Usuario.' ,imageUrl: 'css/images/info1.png'});
return false;
}
$.ajax({
type:"POST",
success: function(){
location.replace("editarUsuario&gr="+gr);
}
})
}
});
jQuery("#jqGrid").navButtonAdd('#jqGridPager',{
id:'button_del',
title:'Habilitar/Inhabilitar Usuario',
buttonicon:'ui-icon-clock',
caption:'',
onClickButton: function(){
var id = jQuery("#jqGrid").jqGrid('getGridParam','selrow');
if(id== null){
swal({title: 'Información', text: 'Por favor seleccione un Usuario.' ,imageUrl: 'css/images/info1.png'});
return false;
}
else{
swal({
title: "Esta seguro?",
text: "Desea inhabilitar el Usuario.",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#A80000", //#DD6B55 por defecto
confirmButtonText: "Si, inhabilita!",
closeOnConfirm: false
},
function(){
$.ajax({
type:"POST",
url:"inhabilitarUsuario&id="+id,
context:document.body,
data: id,
success: function(data){
swal({
title: "Excelente",
text: "El Usuario ha sido inhabilitado exitosamente.",
type: "success",
showConfirmButton: false,
timer: 2000});
jQuery("#jqGrid").trigger('reloadGrid');
}
});
});
}
}
});
function rowColorFormatter(cellValue, options, rowObject){
if (cellValue =="true") {
rowsToColor[rowsToColor.length] = options.rowId;
return cellValue;
};
}
});