spring boot+layui实现下拉框动态联动

  • spring boot+layui实现下拉框动态联动已关闭评论
  • 752 人浏览
  • A+
所属分类:教程分享

由于采用的前后端分离的模式,所以首先解决跨域问题, 使用CorsFilter过滤器

@Configuration
public class CrosConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/*")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")
                .maxAge(3600);
    }

    private CorsConfiguration addcorsConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        List<String> list = new ArrayList<>();
        list.add("*");
        corsConfiguration.setAllowedOrigins(list);
    /*
    // 请求常用的三种配置,*代表允许所有,当时你也可以自定义属性(比如header只能带什么,只能是post方式等等)
    */
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/*", addcorsConfig());
        return new CorsFilter(source);
    }
}
CategoryMapper.java
@Mapper
public interface CategoryMapper {
    
    //查询一级目录
    @Select("select value from category where id = #{id}")
    ProductCategory selectValue(Integer id);

    //根据一级目录的id值查询二级目录
    @Select("select id,value from category where id > #{id} and id <#{id}+1000")
    List<ProductCategory> selectCategoryId(Integer id);

}

Controller.java service层就不在这儿写了

@RequestMapping(value = "/findCategoryId")
    @ResponseBody
    public List<ProductCategory> findCategoryId(Integer id){
        List<ProductCategory> list = categoryService.selectCategoryId(id*100);
        return list;
    }

前端代码:

<div class="layui-form-item">
<label class="layui-form-label">选择分类</label>
<div class="layui-input-inline">
<select name="onecatalog" id="onecatalog" lay-filter="selectone" class="layui-select">
</select>
</div>
<div class="layui-input-inline">
<select name="twocatalogname" id="twocatalogname">
<option value="">二级目录</option>
</select>
</div>
</div>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {

        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        $.ajax({
            url: 'http://localhost:8089/category/findCategory',
            dataType: 'json',
            success: function (data) {
                $('#onecatalog').empty();
                $('#onecatalog').append(new Option("一级目录", ""))
                $.each(data, function (index, item) {
                    $('#onecatalog').append(new Option(item.categoryvalue, item.categoryid));// 下拉菜单里添加元素,sid是你需要查询的数据库中的字段
                });
                layui.form.render("select");
            }, error: function () {
                alert("查询失败")
            }
        });
        
        //监听下拉框,实现回显数据库查询到的数据
        form.on('select(selectone)', function (data) {
            var values = data.value
            if (values != '') {
                $.ajax({
                    url: "http://localhost:8089/category/findCategoryId?id=" + data.value,
                    dataType: "json",
                    success: function (data) {
                        $('#twocatalogname').empty();
                        $.each(data, function (index, item) {
                            $('#twocatalogname').append(new Option(item.categoryvalue, item.categoryid));// 下拉菜单里添加元素,sid是你需要查询的数据库中的字段
                        });
                        layui.form.render("select");
                    }, error: function () {
                        alert("查询失败")
                    }
                })
            } else {
                $('#twocatalogname').append(new Option("", "二级目录"));
            }

        });
    });
</script>

大功告成!!!

腾讯云双十一活动