`
lzqustc
  • 浏览: 205819 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Ajax级联选择框:以中国的省市地区三级联动选择为例

阅读更多

首先:确定数据库的设计,下面将省市地区数据以如下方式存入数据库的cities表(看附件):
+--------+--------------+
| id     | cname       |
+--------+--------------+
| 110000 | 北京市       |         第1级
| 110100 | 北京市       |         第2级
| 110101 | 东城区       |         第3级
| 110102 | 西城区       |         第3级
+--------+--------------+

那么,要取所有省(直辖市)的数据,可通过下面语句:
mysql> select * from cities where (id mod 10000 = 0 );

取某个省(直辖市)的所有市的数据,可通过下面语句:
mysql> select * from cities where (id mod 100 = 0 ) and (id div 10000 = #{province_id} div 10000 )      
      and (id != #{province_id});

取第三级数据:
mysql>  select * from cities where(id div 100 = #{city_id} div 100 )  and  (id != #{city_id});


下面开始写rails 应用:步骤如下
①、ruby script/generate scaffold  city  cname:string

②、写取所有省(直辖市)的数据的函数
class City < ActiveRecord::Base   
      
  def self.get_province_select_options  
     City.find_by_sql("select * from cities where (id mod 10000 =0 )").collect { |row|  [row.cname,row.id] }.insert(0,["--请选择--",0])
  end
end

③、假设这个省市地区级联应用是出现在公司(Company)的视图上,而且companies表里有相应的字段province_id、city_id、area_id。
首先在./views/layouts/companies.html.erb
添加<%= javascript_include_tag 'prototype' %> 以便定义Ajax请求,

接着就可以修改视图了Company的new/eidt视图如下:
%table
   %tr
      %td
         =f.select(:province_id, City.get_province_select_options,{},
            "onchange" => remote_function(
                :with => " 'province_id = '+ value + '&partial = select_city' ",
                :update =>"cityid", :complete => "Element.hide('areaid') ",
                :url =>{:controller => :cities, :action => :index_city}  ),
           :style=>"width:150px")
      %td
        %div{:id=>'cityid'}
      %td          
        %div{:id=>'areaid'}   
注意:对于haml模板,上面的分行是会出错的,f.select()最好写成一行。


接着就要相应修改:controller、:action、:partial
④、修改CitiesController,主要是定义 action ——index_city

class CitiesController < ApplicationController

   def index_city  
     if params[:province_id]
       province_id  = params[:province_id]
       @cities = City.find_by_sql("select * from cities where (id mod 100 =0 )and (id div 10000 = #{province_id} div 10000 ) 

      and (id != #{province_id})").collect {|c| [c.cname, c.id]}.insert(0,["--请选择--",0])             
     else
       @cities = City.find(:all).collect {|c| [c.cname, c.id]}   
     end
     respond_to do |format|     
       format.html { render :partial => params[:partial]}     
       format.xml { render: xml => @cities.to_xml }  
     end
   end     
end

⑤、写partial—— select_city, 在./views/cities新建一个

_select_city.html.erb,内容如下:
<%= select(:company, :city_id, @cities,{},
  "onchange" => remote_function( :with => "'city_id='+value+ '&partial = select_area' ",
       :update => "areaid",:complete => "Element.show('areaid')",
       :url =>{:controller => :cities,:action => :index_area} ),
        :style=>"width:160px")
%>

同理,要写一个action —— index_area,和一个partial ——select_area
class CitiesController < ApplicationController

   def index_area  
     if params[:city_id]
       city_id  = params[:city_id]
       @areas = City.find_by_sql("select * from cities where (id mod 100 =0 )
               and (id div 10000 = #{city_id } div 10000 )  and
               (id != #{city_id })").collect {|c| [c.cname, c.id]}.insert(0,["--请选择--",0])             
     else
       @areas = City.find(:all).collect {|c| [c.cname, c.id]}   
     end
     respond_to do |format|     
       format.html { render :partial => params[:partial]}     
       format.xml { render: xml => @areas.to_xml }  
     end
   end     
end

在./views/cities新建一个_select_area.html.erb,内容如下:
<%= select(:company, :area_id, @areas,{},:style=>"width:150px")%>

 

 

OK, 在Compnay的视图中使用这个三级联动菜单,已经没问题了。

 

分享到:
评论

相关推荐

    ajax sturts2级联选择框

    ajax技术实现的选择框直接导入即可运行

    ajax三级联动下拉菜单效果

    中国地域的三级联动:省、市、区; 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中 (2)比如取中国地域,中国是0001,那么自带号为0001的便是中国...

    下拉框二级联动

    JSP页面,采用ajax和json技术,实现了多个下拉框之间的二级联动,也就是选择第一个下拉框的类容之后,后面的下拉框的类容动态改变

    飞飞无限级分类联动v1.0 Asp+sql+存储过程+ajax

    飞飞Asp乐园Asp Sql存储过程版无限级分类 开发说明: 本程序基于Asp环境开发 使用的数据库:SQLServer2000(存储过程) js框架:Jquery/ajax 数据库名称:archives &lt;br&gt;***能说明: 基于AJAX树状...

    AJAX解析XML实例之下拉框省、市二级联动

    这个例子是实现省、市二级联动,当选择某一省时,改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面,其中省市均是从数据库取到的值: jsp页面代码: 代码如下: &lt;&#...

    Laravel框架基于ajax实现二级联动功能示例

    本文实例讲述了Laravel框架基于ajax实现二级联动功能。分享给大家供大家参考,具体如下: 1、html页面: 过期规则: &lt;select name=rule id=rule class=form-control style=width:20%; margin-right: 40px;&gt...

    Ajax无刷新下拉框联动

    无刷新级联更新下联框,选择下拉框自动,客户端美观,大家可以下载看看,有帮助的

    纯JSP+DWR实现三级联动下拉选择菜单实现技巧

    网上看到一些例子,对于一个简单的三级联动,都加上什么Struts, Hibernate诸如此类的框架。这个Ajax联动殊不知和这些框架有什么关系,一个小Demo干嘛整得那么大。 今天我做了一个dwr+jsp做的例子。 web.xml: 代码...

    jquery tableRow 表格与复选框配合插件

    内容索引:脚本资源,jQuery,复选框,jQuery插件 jquery tableRow 表格与复选框配合插件,能够让表格行与复选框产生级联选择效果,具体请查看压缩包内的官方示例。

    asp.net知识库

    深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的私有变量 关于反射中创建类型实例的两种方法 ASP.Net应用程序的多进程模型 NET委托...

    python入门到高级全栈工程师培训 第3期 附课件代码

    05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01 jquery属性操作之html,text,val方法 02 jquery循环方法和attr,prop方法 03 jquery...

    老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料

    ├─(21) 05 python s3 day43 js练习之二级联动.avi ├─(22) 06 python s3 day43 jquery以及jquery对象介绍.avi ├─(23) 07 python s3 day43 jquery选择器.avi ├─(24) 08 python s3 day43 jquery的查找筛选器....

Global site tag (gtag.js) - Google Analytics