[RESUELTO] Cambiar estilo o fondo de un dropdownlist

alvarocardona91 · May 20, 2015, 11:02pm

Hola a todos soy nuevo en Yii, y estoy tratando de hacer algo que deberia ser simple pero no logro conseguirlo, deseo cambiar el color de fondo de un dropdownlist segun el valor que este tenga.

Tengo el siguiente codigo en mi vista.








<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'tprogramacionsugeridadetalle-grid',

	'dataProvider'=>$dataProvider,

	'filter'=>$model,

	'columns'=>array(

	

          

            

           

            array(

		  'header'=>'Hora 23', 

                  'type'=>'raw',

                  'value'=>'CHtml::dropDownList("TProgramacionsugeridadetalle[$data->IdProgramacionSugeridaDetalle][]", '

                . '$data->HoraVeintiTres, '

                . 'array("0"=>"0","1"=>"1"),'

                . 'array("style" => "background-color:red"))',//Aqui puedo darle estilo por defecto al campo pero no puedo condicionarlo para que cambie segun su valor

		  'htmlOptions'=>array('class'=>'horaveintitres-header'),

		),

            

            

	

             

	),

)); ?>




<?php

/*Necesito hacer esto mismo pero dentro de un CGridView*/

$items = array("" => "","1" => "first", "2" => "second");

$options["options"] = array("1"=>array("style" => "background-color:red"), "2"=>array("style"=>"background-color:blue"));

echo CHtml::dropDownList("myDropDown", null, $items,$options);

?>


<div class="form-group">

             

             <?= CHtml::submitButton('Modificar',['class' => 'btn btn-primary']) ?>

             

</div>


<?php $this->endWidget(); ?>


</div><!-- form -->

Espero me puedan ayudar no se como implementar esa condicion.

Muchas Gracias

robregonm · May 21, 2015, 2:02pm

Hola Álvaro,

Para lo que ud solicita se requiere Javascript.

Voy a ponerlo en términos de HTML normal y ud hará las adaptaciones a su código:

Primero el HTML:




<select id="miDropdown" name="nombreDropdown">

<option value="1" data-color="#ff00000">Valor 1</option>


<option value="2" data-color="#ff00000">Valor 2</option>

</select>

Ahora el JS (asumiendo que jQuery se está usando):




$('#miDropdown').on('change', function(){

var $this = $(this),

    color = $('option[value="'+$this.val()+'"]', $this).data('color');

    $this.css('background-color', color);

});

Espero le sirva.

De paso, le invito a postear preguntas como esta en el portal de Yii Preguntas en español.

alvarocardona91 · May 21, 2015, 2:11pm

Muchas Gracias robregonm solo tengo una duda, necesito que esto se encuentre dentro de un CGridView es decir como lo puedo implementar, como menciono en el post, apenas estoy comenzando pero no se como hacerlo.

Necesito que quede con esta estructura esto es posible?




array(

                  'header'=>'Hora 23', 

                  'type'=>'raw',

                  'value'=>'CHtml::dropDownList("TProgramacionsugeridadetalle[$data->IdProgramacionSugeridaDetalle][]", '

                . '$data->HoraVeintiTres, '

                . 'array("0"=>"0","1"=>"1"),'

                . 'array("style" => "background-color:red"))',//Aqui puedo darle estilo por defecto al campo pero no puedo condicionarlo para que cambie segun su valor

                  'htmlOptions'=>array('class'=>'horaveintitres-header'),

                ),

Hasta el momento tengo lo siguiente y como se puede apreciar se pintan todos los campos, y necesito que solamente este con color cuando tenga el valor 1.

Gracias

robregonm · May 21, 2015, 3:43pm

ÁLvaro,

Vuelve y juega JS.

En ese caso en lugar de indicar el ID del combobox, se indica la clase (que obviamente debe ponerse en los combos), por ejemplo:





$('.claseDropdown').on('change', function(){

// Lo que sigue

}

Saludos.

alvarocardona91 · May 25, 2015, 2:03pm

Hola robregonm, no había podido escribirte, gracias por tu ayuda pero sigo presentando inconvenientes, y tengo algunas dudas.

Tengo que poner una clase a cada combo?, o se puede con la misma clase para los 24 combos en este caso que estoy usando.
Logre que se pintara en color pero al escoger el segundo combo de la HoraCero se pinta del color pero no se desmarca si le pongo el valor cero, a menos de que en el primer combo ponga un cero.
Como puedo pintar los combos apenas cargue la pagina.

A continuación dejo un gif de lo que me esta sucediendo.

El codigo que implemente segun tus recomendaciones fue el siguiente, no se si esta bien o estoy aplicando algo mal.




 <script>

    $( document ).ready(function() {

        

       

                      

	

		$('.miDropdown').on('change', function(){

			                      

			

                        var valor = $(".miDropdown").val();

			

                        if(valor == 1)

                        {

                           

                            var $this = $(this),

                            color = '#58FAD0';

                            $this.css('background-color', color);

                            

                        }

                        else

                        {

                            var $this = $(this),

                            color = '#FFFFFF';

                            $this.css('background-color', color);

                        }

		});

    });

 

    

    </script>




<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'tprogramacionsugeridadetalle-grid',

	'dataProvider'=>$dataProvider,

	'filter'=>$model,

        'columns'=>array(

                   

            array(

		  'header'=>'Hora 0', 

                  'type'=>'raw',

                  'value'=>'CHtml::dropDownList("TProgramacionsugeridadetalle[$data->IdProgramacionSugeridaDetalle][]", '

                . '$data->HoraCero, array("0"=>"0","1"=>"1"),array("class"=>"miDropdown"))',

		  'htmlOptions'=>array('class'=>'horacero-header'),

		),


	),

)); ?>


<?php $this->endWidget(); ?>

Muchas gracias por tu ayuda.

robregonm · May 25, 2015, 5:17pm

El valor de "val()" es un string, pero ud compara como int, así que siempre devovlerá "true". Así que debe ser así:




if(valor == "1"){...} // Note las comillas dobles

alvarocardona91 · May 25, 2015, 7:41pm

Gracias robregonm, corregí las comillas dobles pero sigue sucediendo lo mismo que se aprecia en el gif anterior, y los combos cambian de color solamente cuando se selecciona el primer combo de la HoraCero, si selecciono otro diferente no funciona. Dejo otro gif mostrando lo que sucede.

Y como puedo pintarlos apenas cargue la pagina

Y nuevamente el codigo con los tres combos del gif.




<script>

    $( document ).ready(function() {

        

                          

	

		$('.miDropdown').on('change', function(){

			                      

			

                        var valor  = $(".miDropdown").val();			

                        if(valor  == "1")

                        {                           

                            var $this = $(this);

                            color = '#58FAD0';

                            $this.css('background-color', color);

                            

                        }

                        else

                        {

                            var $this = $(this);

                            color = '#FFFFFF';

                            $this.css('background-color', color);

                        }

		});

    });

 

    

    </script>




<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'tprogramacionsugeridadetalle-grid',

	'dataProvider'=>$dataProvider,

	'filter'=>$model,

        'columns'=>array(

            

	

            

           array(

		  'header'=>'# Mensajero', 

                  'type'=>'raw',

                  'value'=>'$data->NumeroMensajero',

		  'htmlOptions'=>array('class'=>'numeromensajero-header'),

		), 

            

            array(

		  'header'=>'Hora 0', 

                  'type'=>'raw',

                 

                  'value'=>'CHtml::dropDownList("TProgramacionsugeridadetalle[$data->IdProgramacionSugeridaDetalle][]", '

                . '$data->HoraCero, array("0"=>"0","1"=>"1"),array("class"=>"miDropdown"))',

		  'htmlOptions'=>array('class'=>'horacero-header'),

		),

            

            array(

		  'header'=>'Hora 1', 

                  'type'=>'raw',

                  'value'=>'CHtml::dropDownList("TProgramacionsugeridadetalle[$data->IdProgramacionSugeridaDetalle][]", '

                . '$data->HoraUno, array("0"=>"0","1"=>"1"),array("class"=>"miDropdown"))',

		  'htmlOptions'=>array('class'=>'horauno-header'),

		),

            

            array(

		  'header'=>'Hora 2', 

                  'type'=>'raw',

                  'value'=>'CHtml::dropDownList("TProgramacionsugeridadetalle[$data->IdProgramacionSugeridaDetalle][]", '

                . '$data->HoraDos, array("0"=>"0","1"=>"1"),array("class"=>"miDropdown"))',

		  'htmlOptions'=>array('class'=>'horados-header'),

		),


	),

)); ?>

<?php $this->endWidget(); ?>

robregonm · May 25, 2015, 9:22pm

Ya vi el error

Es debido a como funciona el DOM y jQuery.

Si ud hace “$(’.miDropdown’)” selecciona TODOS los elementos que cumplan con esa condición, lo cual no es correcto, pues sólo se necesita que el elemento ACTUAL se actualice.

Para ese caso debe modificar "valor", así:




var valor = $(this).val();

El resto creería que debería mantenerse igual.

alvarocardona91 · May 25, 2015, 9:37pm

Muchisimas gracias, efectivamente funciona, una ultima consulta y que pena la molestia pero hay que aprender de los grandes desarrolladores como usted, al momento de cargar la pagina como puedo pintar los combos que ya están con el valor 1.

Intente hacer esto pero no funciona.




array(

		  'header'=>'Hora 0', 

                  'type'=>'raw',                   

                  'value'=>'CHtml::dropDownList("TProgramacionsugeridadetalle[$data->IdProgramacionSugeridaDetalle][]", '

                . '$data->HoraCero, array("0"=>"0","1"=>"1"),array("class"=>"miDropdown"))',

                  'cssClassExpression'=> '(($data->HoraCero=="1") ? "red" : "green")',//Alguna sugerencia ??

		  'htmlOptions'=>array('class'=>'horacero-header'),

		),

Nuevamente gracias por su colaboracion.

alvarocardona91 · May 26, 2015, 3:44am

Después de probar con diferentes formas, gracias al señor robregonm pude lograr el cambio de color independiente de cada dropdownlist o select, a continuación relaciono el código para todos aquellos a los que le pueda servir.





 <script>

    $( document ).ready(function() {

        

                        

                          

                       $('.white').on('change', function(){                                            

                        

                        var valor = $(this).val();  

                        var $this = $(this);

                        if(valor  == "1")

                        {                     

                          

                            $this.addClass('yellow');

                            

                        }

                        else

                        {

                            

                            $this.removeClass('yellow');

                        }

                });

                

                $('.yellow').on('change', function(){                                            

                        

                        var valor = $(this).val();  

                        var $this = $(this);

                        if(valor  == "1")

                        {                     

                          

                            $this.addClass('yellow');

                            

                        }

                        else

                        {

                            

                            $this.removeClass('yellow');

                        }

                });

    });

 

    

    </script>


<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'tprogramacionsugeridadetalle-grid',

	'dataProvider'=>$dataProvider,

	'filter'=>$model,

        'columns'=>array(

  

           array(

		  'header'=>'# Mensajero', 

                  'type'=>'raw',

                  'value'=>'$data->NumeroMensajero',                  

		  'htmlOptions'=>array('class'=>'numeromensajero-header'),

		), 

            

            array(

		  'header'=>'Hora 0', 

                  'type'=>'raw',                   

                  'value'=>'CHtml::dropDownList("TProgramacionsugeridadetalle[$data->IdProgramacionSugeridaDetalle][]", '

                . '$data->HoraCero, array("0"=>"0","1"=>"1"),array("class"=>($data->HoraCero=="1") ? "yellow" : "white"))',

                ),

            

             array(

		  'header'=>'Hora 1', 

                  'type'=>'raw',                   

                  'value'=>'CHtml::dropDownList("TProgramacionsugeridadetalle[$data->IdProgramacionSugeridaDetalle][]", '

                . '$data->HoraUno, array("0"=>"0","1"=>"1"),array("class"=>($data->HoraUno=="1") ? "yellow" : "white"))',

                ),

            

            

           


         /* De aquí hacia abajo van el resto de las horas cada una con su clase */

         /* . */

         /* . */

         /* . */

         





	),

)); ?>


<?php $this->endWidget(); ?>

Y en la hoja de estilos CSS agregue las siguientes clases:





.white

{

	background: #FFFFFF;

}


.yellow

{

    background: #FFFF00;

}

Dejo una imagen de como quedo la vista al finalizar

Nuevamente muchas gracia robregonm por su ayuda y colaboración .