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

来源：互联网发布：js实现图片3d自动旋转编辑：程序博客网时间：2024/05/01 15:19

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

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

这一回啊，军哥要讲一讲如何在CI框架中实现基于JQuery的全国城市级联菜单应用。城市级联菜单效果如何在框架中去实现，这个军哥相信有不少朋友非常关心。之前有用高老师的Brophp框架做过一次，军哥也一并贴出来以供大家下载。brophp中实现城市级联菜单 brophp_area_demo.rar

一、先来说一下思路吧。

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文件。示例代码CI_city.rar

2、写操作area数据表的Model类
3、写控制器
4、写视图
5、写JQuery和Ajax

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

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

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/ 即可访问。

示例代码CI_city.rar

原文地址：http://bbs.lampbrother.net/read-htm-tid-131944.html

阅读(100) | 评论(0) | 转发(0) |

上一篇：第一个项目感想

下一篇：那些年！在兄弟连的时光...