新增数据时下拉列表数据回显

前端页面:
数据渲染
在这里插入图片描述
下拉列表数据回显
在这里插入图片描述
在学院表中查询所有数据,再将学院名称进行显示

<div class="layui-form-item">
     <label class="layui-form-label">所属学院</label>
            <div class="layui-input-block">
                 <select name="xueYuanId" id="xueyuan" lay-verify="required" lay-filter="aihao">
                        <option value=""></option>
                        <option value="0">写作</option>
                  </select>
            </div>
</div>

下拉列表数据回显:

// 模态窗//页面层
        function openAddLayer(data) {
            mainIndex = layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                content: $("#addOrUpdateDiv"),
                area: ['400px', '250px'],
                success: function () {
                    $("#searchFrm2")[0].reset();
                    //初始化下拉列表【学院】
                    $.get("/user/listAllXueYuan",function (res) {
                        var xueyuan = res;
                        var dom_xueyuan=$("#xueyuan");
                        var html = "<option value=''>选择学院</option>";
                        $.each(xueyuan,function (index,item) {
                            html+="<option value='"+item.id+"'>"+item.name+"</option>";
                        });
                        dom_xueyuan.html(html);
                        form.render("select");
                    })
                    form.val("searchFrm2", data);
                }
            });
        }
//页面表格数据渲染
//执行一个 table 实例
        tableIns = table.render({
            elem: '#demo'
            , height: 420
            , url: '/banji/listBanJi' //数据接口
            , title: '用户表'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
            , totalRow: true //开启合计行
            , cols: [ [ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计:'}
                , {field: 'name', title: '班级', width: 150}
                , {field: 'xueYuanName', title: '所属学院', width: 150}
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
            ] ]
        });

后端接口:
/user/listAllXueYuan

/**
     * 初始化下拉列表{学院}
     * @param
     * @return
     */
    @RequestMapping("/user/listAllXueYuan")
    @ResponseBody
    public List<XueYuan> listAllXueYuan(){
        List<XueYuan> list = xueYuanService.list();
        return list;
    }

/banji/listBanJi

 /*查询所有班级数据*/
    @RequestMapping("/banji/listBanJi")
    @ResponseBody
    public DataView listBanJI(BanJiVo banJiVo){
        QueryWrapper<BanJi> queryWrapper=new QueryWrapper<>();
        queryWrapper.like(StringUtils.isNotBlank(banJiVo.getName()), "name",banJiVo.getName());
        IPage<BanJi> iPage=new Page<>(banJiVo.getPage(), banJiVo.getLimit());
        banJiService.page(iPage,queryWrapper);
        for (BanJi banji :iPage.getRecords()){
            //为学院名字进行赋值
            if (banji.getXueYuanId()!=null){
                //调用学院Service进行查询
                XueYuan xueYuan = xueYuanService.getById(banji.getXueYuanId());
                banji.setXueYuanName(xueYuan.getName());
            }
        }
        return new DataView(iPage.getTotal(),iPage.getRecords());
    }
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐