基于若依框架,班级下拉框查询
程序员文章站
2022-07-10 15:52:03
...
基于若依框架,班级下拉框查询
第一步:先在后端查询出班级表中的内容,就是在xml配置项中重新编写个SQL语句,用于查询
<select id="selectSysClassAll" parameterType="Integer" resultMap="SysClassResult">
<include refid="selectSysClassVo"/>
</select>
下图目录中的代码,我就不再在此编写了
第二步:我们将我们查询的数据通过映射到前端。我们通过selectSysClassAll()方法调用我们编写的SQL语句,进行班级表的查询,将我们获取的数据通过“sysClass”字段映射到我们的前端。
控制层:添加
@GetMapping("/add")
public String add(ModelMap mmp)
{
mmp.put("sysClass",classService.selectSysClassAll());
return prefix + "/add";
}
控制层:修改
@GetMapping("/edit/{studentId}")
public String edit(@PathVariable("studentId") Long studentId, ModelMap mmap)
{
mmap.put("student", studentService.selectStudentById(studentId));
mmap.put("sysClass",classService.selectSysClassAll());
return prefix + "/edit";
}
前端接收从后端获取的数据通过each 将数据循环出来
先引入select2
<th:block th:include="include :: select2-css" />
add :添加界面下拉框的样式
<div class="form-group">
<label class="col-xs-2 control-label">班级名称:</label>
<div class="col-xs-2">
<select id="sysClass" class="form-control select2-multiple" >
<option th:each="sysClass:${sysClass}" th:value="${sysClass.classId}" th:text="${sysClass.className}"></option>
</select>
</div>
</div>
edit 修改下拉框的样式
这个重点是在其中加入:th:field="*{classCid}"这个的作用就是修改默认选中
<div class="form-group">
<label class="col-xs-2 control-label">班级名称:</label>
<div class="col-xs-2">
<select id="sysClass" class="form-control select2-multiple" th:field="*{classCid}">
<option th:each="sysClass:${sysClass}" th:value="${sysClass.classId}" th:text="${sysClass.className}"></option>
</select>
</div>
</div>
我们保存时,将获取下拉框的值赋给data变量
function submitHandler() {
if ($.validate.form()) {
var data = $("#form-student-add").serializeArray();
var classCid = $.form.selectSelects("sysClass");
data.push({"name": "classCid", "value": classCid});
$.operate.save(prefix + "/add", data);
}
};
$(function() {
$('#sysClass').select2({
placeholder: "请选择班级",
allowClear: true,
});
})
上一篇: nodejs实现rest接口