一、需求
创建资料，其中有的资料是父元素，有的资料是子元素；在页面中点击下拉菜单，选择对应的父元素，另一个下拉菜单可以显示该父元素对应的所有子元素
二、效果
三、思路
1.创建父元素和子元素资料可以用ancestry这个gem来实现
2.创建一个action比如index，用来查询父元素资料
3.创建一个index.html.erb文件，用来显示上图我们想要的效果
4.创建一个action叫做ajax，其用来查询选中的父元素对应的所有子元素
5.在index页面中调用ajax这个action，完成需求
四、实作步骤
1.我们要用到ajax，所有要在rails中使用jQuery
有两种引用jquery的方法：
（1）安装jQuery的gem
在Gemfile中加入:
gem 'jquery-rails'
终端执行:bundle install
在application.js中加入：
//= require jquery
//= require jquery_ujs
（2）去jQuery的官网复制jquery的代码，然后在本地的public下新建一个js文件，例如叫做jQuery.js，将代码粘贴到其中，然后在需要用到jQuery的地方进行引用
2.创建一个users table，并创建好users controller和user的model
users的table中有字段name
3.安装gem ancestry
在gemfile中加入:
gem 'ancestry'
终端执行：bundle install
4.添加ancestry栏位到users的table中
终端执行:rails g migration add_ancestry_to_users ancestry:string:index
这样就添加了ancestry栏位到users的table中，并且为ancestry打上了索引
终端执行:rake db:migrate
5.到user的model中，加入has_ancestry
class User < ActiveRecord::Base
+ has_ancestry
end
6.进入console中使用ancestry的children方法添加几笔资料
u=User.create(name: "1")
u.children.create(name: "1-1")
u.children.create(name: "1-2")
c= User.create(name: "2")
c.children.create(name: "2-1")
c.children.create(name: "2-2")
children.create可以将新生成的资料作为子元素，也就完成了父元素和子元素的对应
7.建立index action和ajax action的routes
resources :users do
collection do
get :ajax
end
end
8.在users的controller，建立index action
class UsersController < ApplicationController
def index
@users = User.where(:ancestry => nil)
end
这里由于只有两层关系，因此找到所有ancestry为nil的元素，就是所有的父元素
9.在users的controller中建立ajax action
def ajax
user = User.find(params[:category_id]).children
render :json => user
end
ajax action的作用是根据index 页面发来的请求和category_id传值进行查询，找到对应的子元素，然后将资料转换成json格式返回给前台的index 页面
值得注意的是ruby中最后一行代码的执行结果默认作为返回值，因此常常省略return，我们也可以这样写
return render :json => user
10.建立users的index页面，效果将在这个页面中展示
<select id="father">
<option>请选择</option>
<%= @users.each do |user|%>
<option value="<%= user.id %>"><%=user.name%></option>
<% end %>
</select>
<select id="children">
</select>
<script src="/jquery.js"></script>
<script>
$("#father").change(function() {
if ($(this).val()){
get_category_id($(this).val());
}
});
function get_category_id(category_id) {
$.ajax({
type:'get',
url:'/users/ajax?category_id=' + category_id,
success:function(data){
users = data;
user_html = "<option>请选择</option>"
for(var i=0;i<users.length;i++){
user_html += "<option value=" + users[i].id + ">" + users[i].name+ "</option>";
}
$("#children").html(user_html);
},
error:function(){
alert("fail！");
}
});
}
</script>
其中使用了select标签来建立下拉菜单，id为father的是父元素的下拉菜单，其中的值是从index action中传过来的@users，即查询到所有的父元素资料
id为children的是子元素的下拉菜单，其中的值是父元素对应的子元素，由于子元素的下拉菜单是空的，因此需要其中进行字符串的拼接从而形成父元素对应的子元素下拉选项。
显示子元素的下拉菜单选项的逻辑如下：
调用jQuery，如果选择了父元素的下拉菜单的中的选项，那么通过change方法获取该父元素的的id，$(this).val()是获得下拉选项中value的代码，通过if ($(this).val())来判断如果其中的内容为空则不执行get_category_id方法，否则执行get_category_id方法
由于value的值是父元素user的id，因此change方法中的$(this).val()就是user的id可以加上一行alert($(this).val());代码来验证这个判断。
$("#father").change(function() {
if ($(this).val()){
+ alert($(this).val());
get_category_id($(this).val());
}
然后执行到了get_category_id($(this).val());，这样就将父元素的id传入了get_category_id这个方法中，然后通过get请求去访问/users/ajax路径对应的action，也就是我们创建的ajax action，并向ajax action传了category_id，也就是父元素的id，ajax action通过这个id去找对应的子元素，并将子元素转成json格式返回给index 页面中的data变量，然后执行回调方法，通过遍历和html方法，将找到的每个子元素拼接到子元素下拉菜单中。
除了使用html方法
$("#children").html(user_html);
我们也可以使用append和empty方法，写成：
$("#children").empty();
$("#children").append(user_html);
注意，这里使用append进行拼接一定要组合使用empty清除子元素，否则每点击一次父元素就会往子元素下拉菜单中写入子元素，如图：
这是由于html是"替换"，append则是"附加"，所以我们要将原来的内容使用empty给清空掉，这样就不会重复附加内容到子元素下拉菜单中了。
网友评论