专注于经验分享
   工具共享。

基于Layui简单实现二级联动下拉框

前言

在网站开发过程中,很多情况下都会用到二级联动下拉框,或者是三级联动,甚至是四级联动都有可能,比如我们经常用到的选择省然后再选择市然后是县…所以有必要掌握二级联动的思路。会了二级联动同理三级和四级也就会了。

*先看一下做出来之后的样子吧。先选择科室,然后出来对应的人员。

下面是代码:根据标准的三层架构来吧。不会框架的的可以看我另一片文章,有详细搭建SSM框架的教程。下面链接 ↓↓[post cid=35 /]
思路:首先先要获取科室,然后在页面遍历出来。然后通过选择科室的选中事件调用人员查询,并显示出来。
首先是查询科室的dao层接口(实体类肯定是要有的,这边就不做解释了,对应数据库字段写就可以。):

public interface GroupMapper {
    //获取所有科室
    List getGroup();
}

再来看mapper的sql


select group_id,group_name from jc_group

然后是Service层的接口和实现类,直接写吧。
接口:

public interface GroupService {
    //获取所有科室
    List getGroup();
}

Service实现类:


@Service
public class GroupServiceImpl implements GroupService {
    @Autowired
    private GroupMapper groupMapper;

    @Override
    public List getGroup() {
        // TODO Auto-generated method stub
        return groupMapper.getGroup();
    }

}

controller层:


    //获取部门
    @RequestMapping("/getgroup.do")
    @ResponseBody
    public Object  getgroup(HttpServletResponse response){
        List groups = groupService.getGroup(); 
        JSONArray jsonArray = new JSONArray();
        for (Group group : groups) {
            jsonArray.add(group);
        }
        System.out.println(jsonArray);
        return jsonArray.toString();
    }

接下来是前台页面了,由于我这边用到了layui每次都要form.render('select');渲染,没用的直接忽略就可以:


         部门    

        张三    

    $(function(){
        $.ajax({
            type : "POST",
            url : "${base}/jeeadmin/jeecms/workplan/getgroup.do",
            success : function(data) {
                var form = layui.form;
                console.log(data.group_name);
                var json = data;
                console.log(data.data);
                for (var i = 0; i < data.length; i++) {
                    var json = data[i];
                    var str = "";
                    str+=''+json.group_name+'';
                    form.render('select');
                    $("#group1").append(str);
                }
            }
        });
        //layui监听select选中事件
        var form = layui.form, layer = layui.layer;
        form.on('select(business)', function(data){
            //获取部门的ID通过异步查询子集
            $("#collaborative").empty();
            var group_id = $(this).attr("lay-value");
            $.ajax({
                type : "POST",
                data: {group_id: group_id},
                url : "${base}/jeeadmin/jeecms/workplan/getuserlist.do",
                success : function(data) {
                    var form = layui.form;
                    var json = data;
                    for (var i = 0; i < data.length; i++) {
                        var json = data[i];
                        var str = "";
                        str+=''+json.email+'';
                        form.render('select');
                        $("#collaborative").append(str);
                    }
                }
            });
        });

    });

第二个ajax就是科室下拉框的选中事件,然后再次地道用ajax异步查询。
由于dao层和service层和之前差不多,所以就不演示了。直接看controller层吧。

    //遍历username
    @RequestMapping("/getuserlist.do")
    @ResponseBody
    public Object getuserlist(HttpServletResponse response,Integer group_id){
        List users = userService.getusername(group_id);
        JSONArray jsonArray = new JSONArray();
        for (User u : users) {
            jsonArray.add(u);
        }
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("data", jsonArray);
        return jsonArray.toString();

    }

教程就是这么简单,大家看看吧。有什么不懂得可以下方留言交流。


赞(0) 打赏
转载请注明文章地址:Hellohao » 基于Layui简单实现二级联动下拉框
分享到: 更多 (0)

评论 1

评论前必须登录!

 

  1. #0

    主要就是看前端实现过程,感谢

    Super11个月前 (01-11)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏