Sigueme por RSS! RSS

JCombo con CodeIgniter

Ya habíamos hablado del JCombo, plugin de Jquery que permite anidar facilmente elementos select, es decir, disponer de combos dependientes. A continuación un ejemplo de uso con CodeIgniter.

Modelo: jcombo_m.php
(clic para mostrar/ocultar código).
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Jcombo_m extends CI_model{
    
    function __construct(){
        
        parent::__construct();
        $this->load->database();
    }
    
    public function get_paises(){
        
        $query = $this->db
        ->query("SELECT id_country AS id, country_name AS descripcion 
                 FROM countries ORDER BY descripcion ASC");
        
        if($query->num_rows()>0){
            
            $arrDatos = array();
            foreach($query->result() as $row){
                
                $arrDatos[] = array(
                    htmlspecialchars($row->id,ENT_QUOTES),
                    htmlspecialchars($row->descripcion,ENT_QUOTES)
                ); 
            }       
            $query->free_result();
            
            // devolver los datos en json
            return json_encode($arrDatos);
        }else{
            
            return json_encode(array(1=> array("-- no se encontraron registros..")));
        }
    }
    
    public function get_ciudades($id){
        
        if(empty($id) or !ctype_digit($id)) return false;
            
        $query = $this->db
        ->query("SELECT id_city AS id, city_name AS descripcion 
                 FROM cities WHERE id_country=? 
                 ORDER BY descripcion ASC",array($id));
        
        if($query->num_rows()>0){
            
            $arrDatos = array();    
            foreach($query->result() as $row){
                
                $arrDatos[] = array(
                    htmlspecialchars($row->id,ENT_QUOTES),
                    htmlspecialchars($row->descripcion,ENT_QUOTES)
                ); 
            }
            $query->free_result();
            
            // devolver los datos en json
            return json_encode($arrDatos);
        }else{
            
            return json_encode(array(1=> array("-- no se encontraron registros..")));
        }
    }
    
    public function get_zonas($id){
        
        if(empty($id) or !ctype_digit($id)) return false;
            
        $query = $this->db
        ->query("SELECT id_zone AS id,  zone_name AS descripcion 
                 FROM zones WHERE id_city=?
                 ORDER BY descripcion ASC",array($id));
        
        if($query->num_rows()>0){
            
            $arrDatos = array();
            foreach($query->result() as $row){
                
                $arrDatos[] = array(
                    htmlspecialchars($row->id,ENT_QUOTES),
                    htmlspecialchars($row->descripcion,ENT_QUOTES)
                ); 
            }
            $query->free_result();
            
            // devolver los datos en json
            return json_encode($arrDatos);
        }else{
            
            return json_encode(array(1=> array("-- no se encontraron registros..")));
        }
    }
}

Controlador: jcombo_c.php
(clic para mostrar/ocultar código).
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Jcombo_c extends CI_Controller {

    function __construct() {
        parent::__construct();
        $this->load->model('jcombo_m','modelo');
        $this->load->helper('url');
        $this->load->helper('form');
    }
        
    public function index($submit=false){
        
        $arrDatos['sTitulo'] = 'JCombo en CodeIgniter';
        $arrDatos['submit'] = $submit;
        
        // si se envio el formulaario..
        if($submit){
            
            $arrDatos['id_pais']   = $this->input->post('selPaises');
            $arrDatos['id_ciudad'] = $this->input->post('selCiudades');
            $arrDatos['id_zona']   = $this->input->post('selZonas');
        }
        
        $this->load->view('jcombo_v',$arrDatos);
    }
    
    public function get_paises(){
        
        # para este caso particular, 
        # es necesario imprimir aqui en el controlador..
        echo $this->modelo->get_paises();
    }
    
    public function get_ciudades($id){
        
        echo $this->modelo->get_ciudades($id);
    }
    
    public function get_zonas($id){
        
        echo $this->modelo->get_zonas($id);
    }
}
/* End of file jcombo_c.php */
/* Location: ./application/controllers/jcombo_c.php */

Vista: jcombo_v.php
(clic para mostrar/ocultar código).
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title><?php echo $sTitulo; ?></title>
    
    <!-- incluimos el plugin (jcombo) y el jquery-->
    <script type="text/javascript" src="<?php echo base_url(); ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); 
?>/js/jcombo/jquery.jCombo.min.js"></script>

    <!-- configuramos el plugin-->
    <script type="text/javascript">
    $(function() {

       // paises es el primer select a llenar<pre class='brush:xml'>
       $("#selPaises").jCombo(
       "<?php echo base_url(); ?>index.php/jcombo_c/get_paises",{
          selected_value: "<?php echo empty($id_pais) ? 0 : $id_pais; ?>",
          initial_text: "-- seleccione un país --"
       });

       $("#selCiudades").jCombo("<?php echo base_url(); ?>index.php/jcombo_c/get_ciudades/",{
          parent: "#selPaises", // combo padre
          selected_value: "<?php echo empty($id_ciudad) ? 0 : $id_ciudad; ?>",
          initial_text: "-- seleccione una ciudad --"
       });  

       $("#selZonas").jCombo("<?php echo base_url(); ?>index.php/jcombo_c/get_zonas/",{
          parent: "#selCiudades",
          selected_value: "<?php echo empty($id_zona) ? 0 : $id_zona; ?>",
          initial_text: "-- seleccione una zona --"
       });
    });
    </script>
    
    <style>
    #form_ppal{
       margin: 0 auto;
       border: 1px dashed blue;
       padding: 3px;
       width: 500px;
    }
    #form_ppal p{
       width: 100%;
       font-weight: bold;
    }
    #form_ppal p label{
       width: 70px;
       font-weight: bold;
       float: left;
       text-align:right;
       padding-right:3px;
       margin-top:3px;
    }
    </style>
</head>
<body>
<?php
echo form_open('jcombo_c/index/1',array('id'=>'form_ppal'));// <form ..
echo '<p>',form_label('Paises: ')
          ,form_dropdown('selPaises',array(),'','id="selPaises"'),'</p>';

echo '<p>',form_label('Ciudades: ')
          ,form_dropdown('selCiudades',array(),'','id="selCiudades"'),'</p>';

echo '<p>',form_label('Zonas: ')
          ,form_dropdown('selZonas',array(),'','id="selZonas"'),'</p>';

echo '<p>',form_label('')
     ,form_submit(array('id'=>'btEnviar','value'=>'Enviar')),'</p>';

// si el formulario se recargo, mostramos los datos enviados..
if ($submit){
    echo '<hr/><p>id_pais: ',$id_pais,'</p>';
    echo '<p>id_pais: ',$id_ciudad,'</p>';
    echo '<p>id_pais: ',$id_zona,'</p>';
}

echo form_close();// </form>
?>
</body>
</html>

La explicación del plugin está en el post citado, el script de la base de datos se encuentra en el paquete de descarga oficial. La configuración de la base de datos es igual que siempre..

application/config/database.php
$db['default']['hostname'] = 'localhost';// mi servidor
$db['default']['username'] = 'root';// mi usuario en MySQl
$db['default']['password'] = '1234';// el password de mi usuario, si no tiene no se coloca..
$db['default']['database'] = 'ci_jcombo';// el nombre de mi base de datos de ejemplo
$db['default']['dbdriver'] = 'mysql';

Para el ejemplo use MySQl, pero esto no es limitante, puedes usar cualquier otro manejador de base de datos.

Cualquier duda no dudes en consultar!

0 comentarios: Suscribete a los comentarios por RSS

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.