基于若依框架,班级下拉框查询

在这里插入图片描述
第一步:先在后端查询出班级表中的内容,就是在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,
			});
		})
Logo

快速构建 Web 应用程序

更多推荐