基于带有 codeigniter 的单表数据值的依赖下拉列表

debugcn 发表于 Dev

杜希

我使用 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]);
        }
    }

模型

<?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;
        }
    }
}

看法

<!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>