CodeIgniter与ajax简单的级联操作

Mr.Xu · 发表于 2013-2-17 15:44:48

今天看了人家写的一个ci与ajax交互的例子，自己也动手写了下下，感觉ci写的东西很清晰，model和controller都分开了，符合面向对象的写法。

1、首先创建数据库：

SQL复制代码

CREATE TABLE `area` (
`id` mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT,
`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 '排序',
PRIMARY KEY (`id`),
KEY `upid` (`upid`,`list`)
) ;

INSERT INTO `area` VALUES (1, '北京市', 1, 0, 0);
INSERT INTO `area` VALUES (2, '天津市', 1, 0, 0);
INSERT INTO `area` VALUES (3, '河北省', 1, 0, 0);
INSERT INTO `area` VALUES (4, '石家庄市', 2, 3, 0);
INSERT INTO `area` VALUES (5, '唐山市', 2, 3, 0);
INSERT INTO `area` VALUES (6, '秦皇岛市', 2, 3, 0);
INSERT INTO `area` VALUES (7, '邯郸市', 2, 3, 0);
INSERT INTO `area` VALUES (8, '福建省', 1, 0, 0);
INSERT INTO `area` VALUES (9, '福州市', 2, 8, 0);
INSERT INTO `area` VALUES (10, '厦门市', 2, 8, 0);
INSERT INTO `area` VALUES (11, '莆田市', 2, 8, 0);
INSERT INTO `area` VALUES (12, '思明区', 3, 10, 0);
INSERT INTO `area` VALUES (13, '湖里区', 3, 10, 0);
INSERT INTO `area` VALUES (14, '荔城区', 3, 11, 0);
INSERT INTO `area` VALUES (15, '秀屿区', 3, 11, 0);
INSERT INTO `area` VALUES (16, '东城区', 2, 1, 0);
INSERT INTO `area` VALUES (17, '西城区', 2, 1, 0);

复制代码

2、创建model类，area_model.php

PHP复制代码

<?php
class Area_model extends CI_Model{

function __construct()
{
parent::__construct();
$this->load->database();
}

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

}

复制代码

3、创建控制器,area_controller.php

PHP复制代码

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

class Area_controller extends CI_Controller {

function __construct(){
parent::__construct();
$this->load->helper(array('url','form'));
$this->load->model('Area_model');
}

public function index()
{
$data['province'] = $this->Area_model->get('province');
$data['city'] = $this->Area_model->get('city',1); //地市默认的父id为1
$this->load->view('area_index',$data);
}

function select()
{
$upid = $this->input->get('upid');
if($upid != '')
{
$data['city'] = $this->Area_model->get('city',$upid);
$this->load->view("area_select",$data);
}
}
}

/* End of file area_controller.php */
/* Location: ./application/controllers/area_controller.php */

复制代码

4、创建view视图，area_index.php 和 area_select.php
4.1 首先创建area_index.php

PHP复制代码

<!DOCTYPE html>
<html>
<head>
<title>省市级联操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="<?php echo base_url('public/js/jquery-1.7.1.min.js')?>"></script>
</head>
<body>
省份：
<select name="pid">
<option value="">=请选择省份=</option>
<?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($city->result() as $item):
?>
<option value="<?php echo $item->id;?>">
<?php echo $item->name ?>
</option>
<?php endforeach;?>
</select>
</body>
<html>

<script type="text/javascript" charset="utf-8">
$(function(){
$("select[name='pid']").change( function() {
/* $("select[name='pid'] option:selected").each(function(){
alert($(this).text());
});*/

$.get("<?php echo site_url('area_controller/select')?>", { upid

(this).val() },
function(data){
$("select[name='cid'] option:gt(0)").remove();
$("select[name='cid']").append(data);
});

});
});
</script>

复制代码

4.2 创建area_select.php

PHP复制代码

<?php
foreach($city->result() as $item):
?>
<option value="<?php echo $item->id;?>">
<?php echo $item->name ?>
</option>
<?php endforeach;?>

复制代码

5、效果如下

就是这样了，感觉听简单的

奋斗的小鸟 · 发表于 2013-2-21 09:42:51

不错啊，支持楼主啊！！！

topwaybobo · 发表于 2013-2-21 11:54:00

你这个例子的JS代码怎么实现不了联动

chenqing663 · 发表于 2013-2-22 09:54:39

思路很清晰~~~~

codingOnTheWay · 发表于 2013-3-19 11:19:22

谢谢分享！

klife · 发表于 2013-3-20 11:33:53

花了2小时，终于试验成功了，谢谢楼主，不过代码中有表情的地方，猜了好久啊

smat · 发表于 2013-3-20 22:17:55

楼主很厉害，哈哈！今天第一次学习框架，第一次用CI，第一次测试你的代码，做了一个三级联动！

修改视图文件：area_index.php

PHP复制代码

<!DOCTYPE html>
<html>
<head>
<title>省市区三级联操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/<?php echo base_url('public/js/jquery.js')?>"></script>
</head>
<body>
位置：
<select name="pid">
<option value="">=省份=</option>
<?php
foreach($province->result() as $item):
?>
<option value="<?php echo $item->id;?>">
<?php echo $item->name; ?>
</option>
<?php endforeach;?>
</select>
<select name="cid">
<option>=地市=</option>
</select>
<select name="aid">
<option>=城区=</option>
</select>
</body>
<script type="text/javascript" charset="utf-8">
$(function(){
$("select[name='pid']").change( function() {
$.get("/<?php echo site_url('area_controller/select')?>", { upid

(this).val() },
function(data){
$("select[name='cid'] option:gt(0)").remove();
$("select[name='cid']").append(data);
});
});
$("select[name='cid']").change( function() {
$.get("/<?php echo site_url('area_controller/select')?>", { upid

(this).val() },
function(data){
$("select[name='aid'] option:gt(0)").remove();
$("select[name='aid']").append(data);
});
});
});
</script>

复制代码

kuailewang · 发表于 2013-4-7 08:40:25

辛苦了

nop2 · 发表于 2013-4-9 09:05:00

感谢分享

codingOnTheWay · 发表于 2013-4-28 10:21:14

klife 发表于 2013-3-20 11:33
花了2小时，终于试验成功了，谢谢楼主，不过代码中有表情的地方，猜了好久啊 ...

猜出来是什么，我也是这个地方报错了。指点一下

		自动登录	找回密码
密码			入住 CI 中国社区

CodeIgniter与ajax简单的级联操作

评分

相关帖子

评分

浏览过的版块