【军哥谈CI框架】之JQuery实现全国城市级联菜单的应用

原创
2012/11/13 13:54
阅读数 899
    当一丝丝秋风吹过,便带来了秋的消息。它展开了笑颜,轻轻地拂去夏日的烦躁,而秋的夜晚,军哥不再寂寞,只因一切有你们做伴……

    好了,不抒情了,免得有淫鸡皮疙瘩一身,那就要不得了~~

    这一回啊,军哥要来讲一讲如何在CI框架中实现基于JQuery的全国城市级联菜单应用。城市级联菜单效果如何在框架中去实现,这个军哥相信有不少朋友非常关心。

    一、先来说一下思路吧。

    1、先准备好地区数据表(全国这么多的城市、乡镇是不会无缘无故的跑出来滴)。

    area表结构如下:

`id` mediumint(8) unsigned NOT NULL auto_increment PRIMARY KEY,               #地区ID
  `name` char(255) NOT NULL,                                                    #地区名称
  `level` tinyint(4) unsigned NOT NULL default '0' COMMENT '级别',              #地区级别
  `upid` mediumint(8) unsigned NOT NULL default '0' COMMENT '从属于',           #所属父地区
  `list` smallint(6) NOT NULL default '0' COMMENT '排序'                        #地区排序

    当然,有了这样的表结构之后,那么多的数据不可能一一手工去创建,关键也没这个必要,军哥也准备了sql文件帮助大家快速建表。详见附件中的ci_city.sql文件。附件下载:http://bbs.lampbrother.net/job.php?action=download&aid=22150

    2、写操作area数据表的Model

    3、写控制器

    4、写视图

    5、JQueryAjax:比方说我们通过写js代码来监听省的变化,当用户选择不同省时,向service端发送省的编号,service端根据收到的"省"编号再到数据库中查询该省所对应的市信息,这些信息继而通过回调函数显现出来。

    以上只是一个大概的写代码顺序,实际中肯定是相互之间交错进行开发的。


    二、接下来,进入到军哥有图有真相的环节啦,相信已经有淫迫不及待了吧,嘻嘻~~看图

     1、初始化页面效果图:

    2、点击某一省份效果图:

    3、点击某一城市/地区效果图:

    4、点击某一县市效果图(包括有乡镇的县市和无乡镇的县市):

三、图看完了,接着上一些干货啦,这次还有比较详细的注释哟~~


1、模型(即Model源码在 application/models文件夹) 

if (!defined('BASEPATH'))
    exit('No direct script access allowed');

/**
 * @author JayJun
 * @copyright 2012.09.05
 */

class M_area extends CI_Model {
    //获取省份、城市/地区、县市及乡镇信息 
    function get($type,$upid = 0) {
        $data = '';
        switch ($type) {
                    //查询所有省份
                    case 'province':
                                $this->db->select('id,name,level,upid,list');  
                                $data = $this->db->get_where('area',array('upid'=>0));
                                break;            
                   //查询某一省份下的所有城市/城区
                   //或查询某一城市/城区下的所有县市
                   //或查询某一县市下的所有乡镇
                   case 'city':
                             $this->db->select('id,name,level,upid,list');
                             $data = $this->db->get_where('area',array('upid'=>$upid));                
                             break;            
        }
        return $data;
    } 
}
2、控制器(源码在 application/controllers文件夹)
if (!defined('BASEPATH'))
    exit('No direct script access allowed');
/**
 * @author JayJun
 * @copyright 2012.09.05
 */
class area extends CI_Controller {
    // 初始化
    function __construct() {
        parent::__construct();
        //配置文件获取应用根目录
        $this->base_url = $this->config->item("base_url");
        //加载地区表Model
        $this->load->model('M_area');
    }
    //显示城市选择下拉框页
    function index() {
        $data['base_url'] = $this->base_url;
            //获取所有的省份信息,省份的upid均为0,此时可以不写第二个参数,默认为0
           $data['province'] = $this->M_area->get('province');
           //获取北京所有的城市/地区信息,以便于初始化载入这些信息,北京的ID值为1
          $data['beijing'] = $this->M_area->get('city',1);
              $this->load->view("area_index",$data);
    }
    
    //获取ajax提交upid值产生的option
    function select() {
        //获取get方式提交来的upid
        $upid = $this->input->get('upid');
        if ($upid != '')
        {
            $data['city'] = $this->M_area->get('city',$upid);
            $this->load->view("area_select",$data);
        }
    }
}
3、视图(源码在 application/views文件夹


area_index.php文件:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>在CI框架中,JQuery实现全国城市级联菜单效果的例子</title>
    <link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/base.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $base_url; ?>/bootstrap/css/bootstrap.min.css" type="text/css" />
        <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <table class="table table-bordered mt50 bc">            
            <tr>
                <td width="10%" class="fb f18">所在地区:</td>
                <td>
                    <!-- 省份下拉框开始 -->
                    <select name="pid">
                        <?php
                            foreach ($province->result() as $item):
                        ?>
                            <option value="<?php echo $item->id; ?>"><?php echo $item->name; ?></option>
                        <?php
                            endforeach;
                        ?>
                    </select>
                    <!-- 省份下拉框结束 -->
                    
                    <!-- 城市/地区下拉框开始 -->
                    <select name="cid">
                        <option value=''>请选择</option>
                        <?php
                            foreach ($beijing->result() as $item):
                        ?>
                            <option value="<?php echo $item->id; ?>"><?php echo $item->name; ?></option>
                        <?php
                            endforeach;
                        ?>
                    </select>
                    <!-- 城市/地区下拉框结束 -->
                    
                    <!-- 县市下拉框开始 -->
                    <select name="xid">
                        <option value=''>请选择</option>
                    </select>        
                    <!-- 县市下拉框结束 -->
                    
                    <!-- 乡镇下拉框开始 -->
                    <select name="tid">
                        <option value=''>请选择</option>
                    </select>
                    <!-- 乡镇下拉框结束 -->                
                </td>
            </tr>
          </table>
     </body>
</html>
area_select.php文件:
if($city->result()) {
     foreach ($city->result() as $item):
          echo "<option value='".$item->id."'>".$item->name."</option>";
     endforeach;
 }


4、
JQuery(
写在area_index.php文件中):
<script type="text/javascript">
        $(function(){
            //默认隐藏县市和乡镇下拉框
            $("select[name='xid']").hide();
            $("select[name='tid']").hide();    
            
            //选择省份触发事件
            $("select[name='pid']").change(function(){
                //通过远程 HTTP GET 请求载入信息
                $.get("<?php echo site_url('area/select'); ?>",{ upid:this.value },function(data){
                    //再次隐藏县市和乡镇下拉框
                    $("select[name='xid']").hide();
                    $("select[name='tid']").hide();                        
                    $("select[name='cid'] option:gt(0)").remove();//清除城市/地区下拉框的除第一个option之外的所有子元素
                    //设定所选择省份下的城市/地区下拉框option值
                    $("select[name='cid']").append(data);
                });
            });
            
            //选择城市/城区触发事件
            $("select[name='cid']").change(function(){
                //通过远程 HTTP GET 请求载入信息
                $.get("<?php echo site_url('area/select'); ?>",{upid:this.value},function(data){
                    //判断是否点击了城市/城区下的"请选择"
                    if (data){
                        $("select[name='xid']").show();//显示县市下拉框
                        $("select[name='xid'] option:gt(0)").remove();//清除县市下拉框的除第一个option之外的所有子元素
                        //设定所选择城市/地区下的县市下拉框option值
                        $("select[name='xid']").append(data);
                    }else{   //若点击则隐藏县市和乡镇下拉框
                        $("select[name='xid']").hide();
                        $("select[name='tid']").hide();
                    }
                });
            });
            
            //选择县市触发事件
            $("select[name='xid']").change(function(){
                //通过远程 HTTP GET 请求载入信息
                $.get("<?php echo site_url('area/select'); ?>",{upid:this.value},function(data){
                    //判断是否存在乡镇数据,若存在则显示
                    //同时判断是否点击了县市下的"请选择"
                    if (data){
                        $("select[name='tid']").show();//显示乡镇下拉框
                        $("select[name='tid'] option:gt(0)").remove();//清除乡镇下拉框的除第一个option之外的所有子元素
                        //设定所选择县市下的乡镇下拉框option值
                        $("select[name='tid']").append(data);
                    }else{  //若点击则隐藏乡镇下拉框
                        $("select[name='tid']").hide();
                    }
                });
            });
        })
</script>


好了,不知道你学会没有,至少实现思路有了吧,另外,军哥相信没有代码100%不存在Bug的,所以如果你发现Bug,欢迎不吝赐教~~


嘿嘿,当然军哥在写的时候,其实已经将一些重大的Bug做了修补,比方说用户当点击某一城市地区之后,又点击了它的“请选择”之后出现的问题,还有就是当用户点击县市下拉框的时候,有的县市是有乡镇数据,而有的却没有乡镇数据等情况,军哥都做了妥善的处理~~


四、应用

(1)、先下载附件,解压之后,拷贝到网站根目录下;

(2)、找到文件ci_city.sql,建库建表;

(3)、修改配置文件CI_city/application/config/database.php,只需设置$db['default']['password'] ='你的数据库密码'; ,大概 第10

(4)、浏览器输入http://localhost/CI_city/ 即可访问。


附件下载:http://bbs.lampbrother.net/job.php?action=download&aid=22150



展开阅读全文
加载中
点击加入讨论🔥(2) 发布并加入讨论🔥
打赏
2 评论
3 收藏
0
分享
返回顶部
顶部