CodeIgniter与ajax简单的级联操作

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

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

1、首先创建数据库：

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

<!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").change( function() {
      /* $("select option:selected").each(function(){
            alert($(this).text());
      });*/

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

   });
});
</script>

4.2 创建area_select.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
<!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").change( function() {
   $.get("/<?php echo site_url('area_controller/select')?>", { upid:$(this).val() },
      function(data){
         $("select option:gt(0)").remove();
         $("select").append(data);
      });
   });
   $("select").change( function() {
$.get("/<?php echo site_url('area_controller/select')?>", { upid:$(this).val() },
   function(data){
$("select option:gt(0)").remove();
$("select").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 static/image/common/back.gif
花了2小时，终于试验成功了，谢谢楼主，不过代码中有表情的地方，猜了好久啊 ...

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

页: [1] 2

CodeIgniter 中国开发者社区's Archiver

CodeIgniter与ajax简单的级联操作