新增数据时下拉列表数据回显
前端页面:
数据渲染
下拉列表数据回显
在学院表中查询所有数据,再将学院名称进行显示
<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());
}