好了,不抒情了,免得有淫鸡皮疙瘩一身,那就要不得了~~
这一回啊,军哥要来讲一讲如何在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">
<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;
}
<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>
嘿嘿,当然军哥在写的时候,其实已经将一些重大的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