数据回显怎么做 springboot数据回显与修改提交
-
-
剑无名 这家伙很懒，还没有设置简介...
0 人点赞了该文章 · 8 浏览
主要分为两个过程，第一步根据id的值获取当前记录，并回显的页面；第二步，编辑修改数据后提交。
一、前台编辑按钮
(layEvent === 'edit') { layer.open({ type: 2, title: "编辑员工", area: ['80%', '80%'], shadeClose: true, content: '/'+data.id }); }二、controller
@GetMapping("/{id}")public String getEmpById(@PathVariable("id") Integer id, Model model) { Txl emp = txlService.getEmpById(id); model.addAttribute("emp", emp); return "emp/empEdit"; }三、service
public Txl getEmpById(Integer id) {return txlMapper.getEmpById(id); }四、mapper
public Txl getEmpById(Integer id);五、mapper.xml
<select id="getEmpById" parameterType="Integer" resultType="com.gl.model.Txl">select * from txl where id=#{id}</select>六、在controlle中跳转到emp/empEdit.html
回显页面中使用了th:object="${emp}"获取域对象数据；使用<input type="hidden" th:field="*{id}">，传递id的值；th:field="*{xm}"，回显name和id的值。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>修改更新数据</title><link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}"media="all"><link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}"media="all"></head><body><div class="layui-form" lay-filter="layuiadmin-app-form-list"id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;" th:object="${emp}"><input type="hidden" th:field="*{id}"><div class="layui-form-item"><label class="layui-form-label">姓名</label><div class="layui-input-inline"><input type="text" th:field="*{xm}" lay-verify="required"placeholder="请输入姓名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">联系电话</label><div class="layui-input-inline"><input type="text" th:field="*{lxdh}"lay-verify="required"placeholder="请输入号码" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">出生日期</label><div class="layui-input-inline"><input type="text" th:field="*{csrq}" lay-verify="required"placeholder="请输入号码" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button id="btn-submit" class="layui-btn" lay-submitlay-filter="layuiadmin-app-form-submit">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></div><scriptth:src="@{/layuiadmin/lib/jquery-3.6.0.min.js}"></script><script th:src="@{/layuiadmin/layui/layui.js}"></script><script th:inline="javascript"> layui.use(['laydate', 'table', 'form'], function () { var laydate = layui.laydate; var table = layui.table; var form = layui.form; var $ = layui.$; laydate.render({ elem: '[name="csrq"]' }); form.on('submit(layuiadmin-app-form-submit)', function (data) { console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} $("#btn-submit").attr("disabled", "disabled").addClass("layui-btn-disabled"); //提交数据 var url = "/edit"; $.post(url, data.field, function (response) { if (response.success) { //成功提示 layer.msg(response.msg, { icon: 1, time: 1000 //1秒关闭（如果不配置，默认是3秒） }, function(){ //关闭窗口,刷新数据表格 //parent.refreshTable(); //var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 //parent.layer.close(index); //再执行关闭 var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级 window.parent.location.reload();//刷新父页面 parent.layer.close(index);//关闭弹出层 }); } else { $("#btn-submit").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled"); //失败则提示错误消息,窗口不关闭 layer.msg('新增失败,请联系管理员', { icon: 2, time: 2000, //2秒关闭（如果不配置，默认是3秒） anim: 6 }, function(){ //do something }); } }) //关掉窗口并刷新 //失败则提示错误信息 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 }); });</script></body></html>七、 //提交数据 var url = "/edit";控制器edit
@ResponseBody@RequestMapping("/edit")public JSONObject edit(Txl txl) throws Exception { JSONObject result = new JSONObject(); txlService.updateEmp(txl); result.put("success", true); result.put("msg", "修改成功"); return result; }八、service
// 编辑修改记录public int updateEmp(Txl txl) { return txlMapper.updateEmp(txl); }九、mapper
//编辑修改记录public int updateEmp(Txl txl); }十、mapper.xml
<update id="updateEmp" parameterType="com.gl.model.Txl"> update txl set xm = #{xm},lxdh=#{lxdh},csrq=#{csrq} where id = #{id} </update>至此，使用springboot+mybatis+layui+pagehelper，完成基本的增删改查操作
