Necesito crear un menú desplegable dependiente. Primero seleccione el cliente. En la siguiente lista desplegable, mostrará la lista de proyectos que pertenecen al cliente seleccionado. Después de seleccionar la tercera lista desplegable del proyecto, se filtrarán las tareas que pertenecen a ese proyecto. Necesito hacer esto con una tabla en la base de datos sin relación de clave externa de clave primaria. Mi tabla de tareas tiene 1. nombre del cliente 2. nombre del proyecto 3. nombre de las tareas aquí un cliente tiene varios proyectos un proyecto tiene múltiples tareas

Tal vez estoy haciendo una pregunta muy simple. Pero no puedo continuar con mi proyecto sin hacer esta parte. Por favor, alguien me ayuda. Esta es la estructura de mi mesa ingrese la descripción de la imagen aquí

0
Dushee 25 jun. 2017 a las 04:23

2 respuestas

La mejor respuesta

Si está utilizando la misma tabla para almacenar clientes, proyectos y tareas, es posible que cree más registros duplicados, p. ej. Puede ser un nombre de proyecto duplicado o una tarea duplicada o un nombre de cliente ...

Aunque depende de su elección y es conveniente ... Básicamente, el menú desplegable Ajax (menú desplegable dependiente) está totalmente basado en acción y Ajax. Entonces sabes qué y cuándo quieres a través de Ajax, entonces puedes construir así de fácil ..

¡Aquí hay un ejemplo para los amantes de CodeIgniter! : D

Controlador CodeIgniter:

<?php
// security first always....
(defined('BASEPATH') or exit('No direct script access allowed'));
/**
 * Class Controller
 *
 * Class Dropdown Controller to handle login & logout
 */
class Dropdown extends CI_controller
{
    /**
     * Class Constructor
     */
    public function __construct()
    {
        // execute parent class constructor
        parent::__construct();
        // load model
        $this->load->model('Dropdown_model');
    }

    /**
     * Default method to execute if method name missing
     * @return [type] [description]
     */
    public function index()
    {
        $array_data = array();
        // only on Ajax Request
        if ($this->input->is_ajax_request()) {
            // if request for projects
            if ($this->input->post('action') && $this->input->post('action') == 'project') {
                // get client name
                $client     = $this->input->post('client', true);
                // get project data by client name
                $array_data = $this->Dropdown_model->get_dropdown_data(trim($client), 'project');
                // AjaxPOST JSON response
                echo json_encode($array_data);die();
            }
            // if request for task
            if ($this->input->post('action') && $this->input->post('action') == 'task') {
                // get project name
                $project    = $this->input->post('project', true);
                // get task data by project
                $array_data = $this->Dropdown_model->get_dropdown_data(trim($project), 'task');
                // AjaxPOST JSON response
                echo json_encode($array_data);die();
            }
        }
        // else get all client data
        $array_data = $this->Dropdown_model->get_dropdown_data(null, null);
        // send to view
        $this->load->view('dropdown', ['data' => $array_data]);
    }
}

/* End of file dropdown.php */
/* Location: ./application/controllers/dropdown.php */

Modelo CodeIgniter:

<?php
// No direct script execution
defined('BASEPATH') or exit('No direct script access allowed');
/**
 * Class Dropdown_model to handle all related information from MySQL
 */
class Dropdown_model extends CI_Model
{
    /**
     * MySQL table which contains all data about users
     * @var string
     */
    protected $table = 'task';
    /**
     * Returns, User First Name by Email ID
     * @param  [type] $email_addres   [description]
     * @return [type] [description]
     */
    public function get_dropdown_data($where_data = null, $type = null)
    {
        $query = '';

        // clients only
        if (is_null($type) && is_null($where_data)) {
            // desire column from table
            $this->db->select('client_name');
            // only unique clients
            $this->db->distinct('client_name');
            // mysql table
            $query = $this->db->get($this->table);
        }

        // projects by client
        elseif ($type == 'project' && !is_null($where_data)) {
            // desire column from table
            $this->db->select('project_name');
            // where clause
            $this->db->where('client_name', $where_data);
            // mysql table
            $query = $this->db->get($this->table);
        }

        // task by project
        elseif ($type == 'task' && !is_null($where_data)) {
            // desire column from table
            $this->db->select('task');
            // where clause
            $this->db->where('project_name', $where_data);
            // mysql table
            $query = $this->db->get($this->table);
        }

        // if record exist
        if ($query->num_rows() > 0) {
            // return all data as array
            return $query->result_array();
        } else {
            // error
            return false;
        }
    }
}

/* End of file Dropdown_model.php */
/* Location: ./application/models/Dropdown_model.php */

Vista CodeIgniter:

<!DOCTYPE html>
<html>
<head>
    <title>CodeIgniter: Dependent dropdown list by using single table value</title>
    <!-- load bootstrap css -->
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- load jquery library -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- load bootstrap js -->
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="form-group">
            <label for="name">Client</label>
            <select class="form-control" id="clients" name="clients">
                <option value="0">--Select Clients--</option>
                <?php if (isset($data)):?>
                    <?php foreach ($data as $key => $value): ?>
                        <option value="<?=$value['client_name']?>"><?=$value['client_name']?></option>
                    <?php endforeach ?>
                <?php endif ?>
            </select>
        </div>
        <div class="form-group">
            <label for="name">Projects</label>
            <select class="form-control" id="projects" name="projects">
                <option value="0">--Select Projects--</option>
            </select>
        </div>
        <div class="form-group">
            <label for="name">Tasks</label>
            <select class="form-control" id="tasks" name="tasks">
                <option value="0">--Select Tasks--</option>
            </select>
        </div>
        <div class="form-group">
            <input type="button" class="btn btn-primary" value="Submit">
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            // client select box
            var $client     = $('select#clients');
            // project select box
            var $projects   = $('select#projects');
            // task select box
            var $tasks      = $('select#tasks');
            // on change client name, get projects
            $client.on('change', function () {
                // get selected client name
                var client = $(this).find('option:selected').val();
                // post data with CSRF token
                var data = {
                    action:'project',
                    client: client,
                    "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
                };
                // AjaxPOST to get projects
                $.post('./dropdown', data, function(json) {
                    projects_data = '<option value="0">--Select Projects--</option>';
                    $.each(json, function(index, obj){
                        projects_data += '<option value="'+obj.project_name+'">'+obj.project_name+'</option>';
                    });
                    // append all projects in project dropdown
                    $projects.html(projects_data);
                }, 'JSON');
            });
            // on change project, get task
            $projects.on('change', function () {
                // get selected project name
                var project = $(this).find('option:selected').val();
                // AjaxPOSt wit CSRF
                var data = {
                    action:'task',
                    project: project,
                    "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
                };
                $.post('./dropdown', data, function(json) {
                    task_data = '<option value="0">--Select Task--</option>';
                    $.each(json, function(index, obj){
                        task_data += '<option value="'+obj.task+'">'+obj.task+'</option>';
                    });
                    // append all task data in Task dropdown
                    $tasks.html(task_data);
                }, 'JSON');
            });
        });
    </script>
</body>
</html>

Tabla MySQL:

    id  client_name          project_name       task         
------  -------------------  -----------------  -------------
     1  Man Powers & Morans  Web Micro Site     Development  
     2  Mango vs Trees       Brand Development  Pitch        
     3  Man Powers & Morans  Ecom Site          Maintenance  
     4  Light One            Ecom Site          Maintenance  
     5  Mango vs Trees       Siteground         Development  

Estructura de tabla MySQL:

Field         Type         Null    Key     Default  Extra           
------------  -----------  ------  ------  -------  ----------------
id            int(11)      NO      PRI     (NULL)   auto_increment  
client_name   varchar(85)  YES             (NULL)                   
project_name  varchar(85)  YES             (NULL)                   
task          varchar(85)  YES             (NULL)       

Captura de pantalla de la vista HTML: ingrese la descripción de la imagen aquí

1
Neeraj Singh 25 jun. 2017 a las 20:05

Que entiendo de tu pregunta. Es posible que deba seleccionar campos como este

<label>Clints</label>
<select name="clint" id="clint" class="form-control" onchange="return get_projects(this.value)">
<option value="">Select Clint</option>                
<?php foreach($clients as $clint){?>
   <option value="<?php echo $clint->id?>"><?php echo $clint->name?></option>
<?php }?>
</select>
<label>Projects</label>
<select name="projects" id="projects" class="form-control" onchange="return get_tasks(this.value)">
   <option value="">All</option>
</select>
<label>tasks</label>
<select name="tasks" id="tasks" class="form-control">
   <option value="">All</option>
</select>

Y guión como este

function get_projects(clint_id) {
$.ajax({
    url: '<?php echo base_url();?>your controllef/your function/' + clint_id,
    success: function(response)

        jQuery('#projects).html(response);
    }
}); 
}
function get_tasks(project_id) {
$.ajax({
    url: '<?php echo base_url();?>your controllef/your function/' +project_id,
    success: function(response)
    {
        jQuery('#tasks).html(response);
    }
}); 
}

Entonces necesitas hacer la función en un controlador como este

public function get_projects($clint_id)
{
    $project = $this->your_model->get_projects($clint_id);
    echo '<option value="">Select Project</option>';
    foreach($project as $row){          
        echo '<option value="' . $row->project . '" >' . $row->name . '</option>';
        }
}

public function get_tasks($project_id)
{
    $tasks = $this->your_model->get_tasks($project_id);
    echo '<option value="">Select Project</option>';
    foreach($tasks as $row){            
        echo '<option value="' . $row->task . '" >' . $row->name . '</option>';
        }
}
0
Nadeem Ijaz 25 jun. 2017 a las 03:57