欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 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,
			});
		})
相关标签: 若依框架