多级联动
原理
选中顶级分类,查询出顶级分类对应的二级分类至下啦菜单,选择出二级类,查询出二级分类对应的三级分类,这个效果就是多级联动
原始实现思路
1、定义路由
2、查询顶级分类(pid=0) 发送至视图
3、循环展示
4、给顶级分类下拉框绑定内容改变事件(JS:onchange、JQ:change)
5、获取到选中的option的value值(本分类的主键id)
6、根据ID发送ajax请求
7、后端定义新方法
8、接收ajax请求的id值,就是要查询的pid的where
9、根据查询的结果风给ajax(注意:ahax不能直接return 要以JSON格式返回)
10、由于是一个二维数组,需要使用循环进行拼接
11、将循环拼接后的字符串追加至下一个select中
12、注意追加前的option必须要清空
上述实现思路,会导致代码冗余,例如:选择一级查二级时发一个ajax,选择二级查三级时又发一个ajax,代码基本一致,而后端,在显示视图时的查询(顶级查询)和根据顶级查二级、查三级的查询SQL一模一样,根据编程思想:避免代码的重复性,提高代码的重用性,简洁、快速。所以,下述思路对上述思路进行升级:
升级版思路
1、定义路径
2、直接展示添加视图,不在查询
3、页面加载后再jquery中发送ajax请求,直接传送pid值为0
4、调用controller中的方法进行查询
5、给一级、二级一级参与联动的下拉框绑定change事件,最后一个除外
6、JQuery循环拼接option,追加元素
7、同理,每次获取到选中的option的value,发送ajax,重复步骤4,5,7,
8、如果是顶级发送则直接追加至第一个select,如果不是顶级发送,应该追加的位置是当前对象的下一个select(选二级,往三级追)
代码实现
定于路由
Route::get('category','Category/index');
Route::get('getParentCatgory','Category/getParentCategory');
控制器
pubulc function index()
{
$data=Category::where('pid','='0)->field('id,cate_name')->select()->toArray();
View::assign('data',$data);
return view::fetch('week/category');
}
/**
*根据父级id查子级
*/
public function getParentCategory(){
$id=\request()->get('id');
$data=Category::where('pid','=',$id)->field('id,cate_name')->select()->toArray();
return success($data);
}
视图-HTML部分
<script>
//绑定一个内容改变事件
$("#cate_name").change(function(){
var pid=$(this).val();
$.ajax({
url:"getParentCategory?id="+pid,
dataType:"json",
success:function(e){
var str='';
$.each(e.data,function(i,v){
str+='<option value="+v.id +'">'+v.cate_name +'</option>'
});
//二级分类追加里面
$("#cate_name_two").attr('cate_name_two')
}
})
})
</script>