entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Grillas jqGrid

Compañeros estoy utilizando la grilla de jqgrid, lo que quiero hacer son dos grillas, en la cual la primera grilla me muestre unos articulos, me muestra el codigo del articulo y la referencia, y en la la otra grilla quiero que al seleccionar un articulo de la primera grilla me muestre los datos de ese articulo por ejemplo: codigo del articulo, referencia, cantidad, precio del articulo etc... yo estoy trabajando con Master/Detail que es una grilla del jqgrid. les muestro lo que llevo, espero me entiendan y me puedan ayudar.

 <script type="text/javascript">

        jQuery(document).ready(function() {
        jQuery("#tblclientes").jqGrid({
            url: 'cargarProducto.php?q=2', 
            datatype: 'json',
            mtype:'post',

            colNames: ['Codigo','Referencia','Articulo','Grupo'],
            colModel:[
             { name:'cod_prod',index:'cod_prod',width: 5, resize:true, align:'left', sortable: true, search:true, searchoptions: { sopt:                ['eq'] }
             },
            { name:'des_prod', index:'des_prod', width:10, align:"left", sortable:false, searchoptions: { sopt: ['eq'] } 
             },
             { name:'ref_prod', index:'ref_prod', width:20, align:"left", sortable:false, search:true,hidden:true, searchoptions: { sopt: ['eq'] } 
             },          
             { name:'des_grupo',index:'des_grupo',width: 10, align:'left', sortable: false, search:true, searchoptions: { sopt: ['eq'] }
             },
            ],
            rowNum:500,
            height: 300,
    width: 500,

    pager: '#paginacion',
    sortname: 'cod_prod',
    viewrecords: true,
    sortorder: "desc",
  multiselect: false,
  caption: "SELECIONAR ARTICULO",
  onSelectRow: function(ids) {
    if(ids == null) {
      ids=0;
      if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 )
      {
        jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&cod_prod="+ids,page:1});
        jQuery("#list10_d").jqGrid('setCaption',"Articulo seleccionado: "+ids)
        .trigger('reloadGrid');
      }
    } else {
      jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&cod_prod="+ids,page:1});
      jQuery("#list10_d").jqGrid('setCaption',"Articulo seleccionado: "+ids)
      .trigger('reloadGrid');     
    }
  }

});

jQuery("#tblclientes").jqGrid('navGrid','#paginacion',{add:false,edit:false,del:false});

jQuery("#list10_d").jqGrid({

    url:'subgrid.php?q=1&cod_prod=0',

  datatype: "json",
    colNames:['Codigo','Referencia','Valor Unitario' ],
    colModel:[
             { name:'cod_prod',index:'cod_prod',width: 10, align:'left', sortable: true, search:true     },
             { name:'ref_prod', index:'ref_prod', width:20, align:"left", sortable:false                },
             { name:'pre_prod', index:'pre_prod', width:10, align:"left", sortable:false, search:true   },     
            ],
     height: 300,
    width: 500,
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager10_d',
    sortname: 'cod_prod',
    viewrecords: true,
    sortorder: "asc",
    multiselect:true,
    caption:"Articulos seleccionados"
    }).navGrid('#pager10_d',{add:false,edit:false,del:false});
jQuery("#ms1").click( function() {
  var s;
  s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');
  alert(s);
});  
});
</script>

1 Respuesta

1voto

Leonardo-Tadei Puntos227320

Hola @JhonPinto,

en el sitio de JQgrid hay un ejemplo con todo el código HTML, JS y PHP que hace esto.

El ejemplo está en Advanced -> Master Detail

El enganche entre las grillas es la porción de código:

...
onSelectRow: function(ids) { if(ids == null) { ids=0; if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 ) { jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1}); jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid'); } } else { jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1}); jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid'); } }
...

por lo demás, cada grilla funciona como si fuese independiente una de la otra y hay que escribir un script PHP que genera la salida para cada una.

Tu código no funciona porque llamaste a la grilla detalle #tblclientes pero en el evento SelectRow mantuviste el nombre del ejemplo #list10_d... y vos no tenés ninguna grilla llamada así.

También estamos suponiendo que llamaste a tus PHP igual que en el ejemplo, porque si no, tampoco se van a cargar datos si la grilla llama a un inexistente subgrid.php...

Copiar y pegar código puede ser útil, pero no evita el que tengamos que entender cómo y por qué funciona!

Saludos cordiales

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta