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

当一丝丝秋风吹过，便带来了秋的消息。它展开了笑颜，轻轻地拂去夏日的烦躁，而秋的夜晚，军哥不再寂寞，只因一切有你们做伴……

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

这一回啊，军哥要来讲一讲如何在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、写JQuery和Ajax：比方说我们通过写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">

在CI框架中，JQuery实现全国城市级联菜单效果的例子

所在地区：

foreach ($province->result() as $item): ?> <?php echo $item->name; ?> endforeach; ?> 请选择 foreach ($beijing->result() as $item): ?> <?php echo $item->name; ?> endforeach; ?> 请选择 请选择

area_select.php文件:

if($city->result()) {

foreach ($city->result() as $item):

echo "".$item->name."";

endforeach;

}

4、JQuery(写在area_index.php文件中)：

$(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();

}

});

});

})

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

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

四、应用

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

(2)、找到文件ci_city.sql，建库建表；

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