0

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;
        };
      }


        });

1
  • El refresh solo cuando haya cambios es fácil. El problema es que para saber si hay cambios tienes que hacer uso del set interval o similar. Tal vez me equivoque pero hasta donde yo se, mediante javascript no se puede hacer lo que pides. Para que no cargue tanto como dices, separa la consulta del pintar y haz lo último solo si hay cambios. Commented el 4 abr. 2019 a las 12:55

1 respuesta 1

-1

La respuesta va a ser general porque dependiendo el caso se puede abordar el problema de una forma u otra.

Usar el setInterval no está mal no importa que la data no cambie, lo que hay que hacer es asegurarse de ejecutar el clearInterval cuando no se use más la grid.

Es verdad que cuando la data es mucha se hace ineficiente hacer un ajax que va a generar procesamiento en la base de datos, que a su vez va a generar procesamiento en el servidor y consumo de ancho de banda al servir los datos en el cliente.

En el caso en el que la data es mucha se puede abordar tu problema desde diferentes puntos.

1) crear un websocket (que es lo que hacen los chats) para que solo cuando haya un update en tu base de datos el web socket envíe la data actualizada al front.

https://es.wikipedia.org/wiki/WebSocket

implementación en js

https://developer.mozilla.org/es/docs/WebSockets-840092-dup/Writing_WebSocket_client_applications

2) crear un servicio paralelo que te permita saber por ajax si hubo cambios en la base de datos con respecto a la ultima consulta y solo si hay cambios ejecutar el ajax que trae la data. Esto es algo que depende de tu proyecto y puede llegar a ser engorroso porque muchos clientes pueden estar consultando a tu servidor y si no lo haces bien cuando haya cambios en la base de datos solo le va a mostrar esos cambios al primer cliente que haga ajax.

Lo importante de esto es tener presente que el front no puede saber por si solo si hay cambios en la base de datos, por eso la lógica de esto está en el backend.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.