Cgridview

Buenos días,

me gustaría hacer un componente CGridView de forma que cuando pase sobre una fila me salga el cursor en forma de mano y se me cambie el color de la fila que seleccione. Para ello he introducido “‘selectableRows’=>1”. Cuando paso por encima de alguna fila y clico sobre ella he conseguido mostrar un “alert” pero la fila no me cambia de color ni tampoco me sale la mano.

Por otra parte, necesito mostrar tres tablas (comunidades autónomas, provincias, productos), de forma que cuando seleccione una comunidad, me cambien las provincias que existen para esa comunidad y de la misma forma cuando seleccione una provincia, quiero que se me actualice la tabla de productos que existe en esa provincia. ¿Como se podría realizar eso?

¿Habría que hacerlo a mano usando AJAX o se podría hacer usando algún otro componente o de alguna otra forma?

Gracias a priori. :P

Saludos,

Hola,

Para la 1ª parte no necesitas nada, es solo css. El css del gridview, copia el original del core y lleva una copia a tu aplicación y hay modifica 2 lineas:




.grid-view table.items tr.selected

{

	background: #BCE774;  //pon el color que quieras para la fila que este seleccionada

}


.grid-view table.items tbody tr:hover

{

	background: #ECFBD4;//pon el color que quieras para la fila cuando pases el cursor por encima.

	cursor:pointer;     //para que salga que el cursor muestre una mano en lugar de la flecha al pasar sobre una fila

}



la propiedad “‘selectableRows’=>1” indica según su valor si se pueden seleccionar ninguno, uno o varios elementos.

Para la 2ª parte cada uno lo hará a su manera, para mí no son 3 tablas lo que necesitas sino 2 select múltiples y una tabla.

El 1º select con las comunidades, el segundo cargará por ajax las provincias según la selección del 1º select.

Y el 3º elemento si es una tabla que se cargará por ajax al seleccionar las provincias en el 2º select.

Suerte con las pruebas.

Muchas gracias por la respuesta. En estos días probaré lo que me comentas.

Saludos,

Buenos días,

ayer probe el tema del CSS y ya me salen la tabla con las filas de colores y la selección me funciona perfectamente.

EL problema con el que me encontré ayer es que no se como definir la llamada ajax, porque no se bien como se puede hacer el filtrado de los datos. Se podría hacer directamente o habría que hacer una llamada a algo así:


  $.ajax({

            url: '<?php echo $this->createUrl('PartUpdate'); ?>',

            data: {id: keyId},

            type: 'GET',

            success: function(data) {

                $('#part-block').html(data);

            }

        });

Procedente de: http://www.yiiframework.com/wiki/597/update-a-part-of-content-using-ajax-when-select-a-gridview-row/

¿En este caso como se haría la parte del modelo que haría esto: model()->findByPk($id);?

Tampoco se si hay algún método que parecido a


  var keyId = $.fn.yiiGridView.getSelection(grid_id);

que me traiga el valor del contenido seleccionado de la tabla, en lugar de que sea el id solamente.

Gracias de antemano,

Saludos :)

La página que comentas es el caso típico de un gridview, por ejemplo clientes, que al seleccionar una fila te muestra los datos más detallados de ese cliente, por ejemplo una foto, datos de historiales ,… en una parte específica de la página.

Esos últimos datos suelen ser fijos, simplemente presentación de datos, aunque podrían ser algo más complejo.

Lee el id, lo pasa por ajax al controlador que carga el modelo ( $model = Cliente::model()->findByPk($id);)y rellena los datos extendidos para presentarlos en $(’#part-block’).

Buenos días,

me he encontrado con un problema. Al hacer la llamada desde Javascript, siempre me entra en la parte de error y creo que es porque no estoy formando bien la URL donde se encuentra el Controlador de Provincias (ProvinciasController) mediante el uso de la función createURL. ¿Me podríais indicar como hacerlo?


 $.ajax({

            url: '<?php echo $this->createUrl('ProvinciaController/PartUpdate'); ?>',

            data: {id: keyId},

            type: 'GET',

            success: function(data) {

                alert("Todo ha ido bien");

                $('#part-block').html(data);


            },


            error: function(data){

                alert("Se ha producido error");


            }

        });

Muchas gracias de antemano,

Saludos,