layui+ssm实现数据表格双击编辑更新数据

layui实现数据表格双击编辑数据更新

在使用layui加载后端数据请求时，对数据选项框进行双击即可实现数据的输入编辑更改
在这里插入图片描述

代码块

    var form = layui.form, table = layui.table,layer = parent.layer === undefined ? layui.layer : parent.layer,laypage = layui.laypage;var util = layui.util;$ = layui.jquery;//数据表格table.render({id: 'categoryList',elem: '#categoryList',url: ctx + "/book/getCategoryList", //数据接口cellMinWidth: 80,toolbar: '#toolbar',editTrigger: 'dblclick',// 触发编辑的事件类型（默认 click ）limit: 10,//每页条数limits: [10, 20, 30, 40],layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],css: [// 对开启了编辑的单元格追加样式'.layui-table-view td[data-edit]{color: #16B777;}'].join(''),cols: [[ //表头{type: 'numbers', title: '序号', width: 80},//序号列{field: 'categoryName', title: '类别名称', align: 'center', edit: 'textarea'},// edit: 'textarea'主要标记当前项是否启用编辑{field: 'categoryDesc', title: '类别说明', align: 'center', edit: 'textarea'},{field: 'categoryDate',title: '创建时间',sort: true,align: 'center',templet: '<div>{{ formatTime(d.categoryDate,"yyyy-MM-dd hh:mm:ss")}}</div>'},{fixed: 'right', title: '操作', align: 'center', templet: function (d) {return '<button class="layui-btn  layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">编辑</i></button>'+ '<button class="layui-btn layui-bg-red layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete">删除</i></button>';}},]],page: true});/** 单元格双击编辑事件* */table.on('edit(categoryList)', function (obj) {var field = obj.field; // 得到修改的字段var value = obj.value // 得到修改后的值var cateId = obj.data.cateId; // 获取当前修改数据的id// 值的校验if (value.replace(/\s/g, '') === '') {layer.msg('修改值不能为空！');return obj.reedit(); // 重新编辑}// 编辑后续操作，如提交更新请求，以完成真实的数据更新var index = top.layer.msg('正在将新数据写入数据库，请稍候...', {icon: 16, time: false, shade: 0.8});var msg;setTimeout(function () {$.ajax({type: "POST",url: ctx + "/book/updateCate",data: {cateId: cateId, // 获取当前修改数据的idfield: field,// 得到修改的字段value: value,// 得到修改后的值},success: function (d) {if (d.code == 0) {msg = d.msg;} else {msg = d.msg;}},error: function (jqXHR, textStatus, errorThrown) {layer.msg("获取数据失败！ 先检查sql 及 Tomcat Localhost Log 的输出");}}).done(function () {top.layer.close(index);top.layer.msg(msg);layer.closeAll("iframe");setTimeout(function () {parent.location.reload();}, 1000);});}, 2000);});});在这里插入代码片

这里只要使用layui和后端ssm框架实现，所以后端代码
controller代码

 /** 数据更新操作* */// 更新分类信息的接口@RequestMapping("/updateCate")@ResponseBody//根据前端提供的id,更改的字段，更改的值进行查询更新public ResultUtil updateCate(Integer cateId, String field, String value) throws ParseException {// 打印传入的分类ID、字段和值/*  System.out.println(cateId);System.out.println(value);System.out.println(field);*/// 根据分类ID获取分类实体CategoryEntity categoryEntity = bookService.getCategoryById(cateId);// 打印获取到的分类实体System.out.println(categoryEntity);// 插入当前时间作为修改时间Date data = new Date();// 创建一个SimpleDateFormat对象，用于格式化日期SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");// 使用SimpleDateFormat对象将Date对象转换为字符串格式的日期String nowTime = simpleDateFormat.format(data);// 使用SimpleDateFormat对象将字符串格式的日期解析为Date对象Date date1 = simpleDateFormat.parse(nowTime);// 如果获取到的分类实体不为空if (categoryEntity != null) {// 根据字段名进行相应的操作switch (field) {case "categoryDesc":categoryEntity.setCategoryDesc(value);break;case "categoryName":categoryEntity.setCategoryName(value);break;default:// 如果字段名不符合要求，返回错误信息return ResultUtil.error("提交的数据有问题，请检查！");}// 设置修改时间categoryEntity.setCategoryDate(date1);// 更新分类实体bookService.updateCategory(categoryEntity);// 返回成功信息return ResultUtil.ok("数据信息更新成功！");}// 如果获取到的分类实体为空，返回错误信息return ResultUtil.error("提交的数据有问题，请检查！");}

service

    /** 数据更新* */void updateCategory(CategoryEntity categoryEntity);/** 根据id机型查询数据** */CategoryEntity getCategoryById(Integer cateId);

serviceImpl

    /** 数据更新* */@Overridepublic void updateCategory(CategoryEntity categoryEntity) {categoryDao.updateCategory(categoryEntity);}/** 根据id查询数据* */@Overridepublic CategoryEntity getCategoryById(Integer cateId) {return categoryDao.getCategoryById(cateId);}

dao

  /** 数据更新updateCategory* */void updateCategory(CategoryEntity categoryEntity);/** 根据id查询数据* */CategoryEntity getCategoryById(Integer cateId);

mapper.xml

 <!--根据id查询数据--><select id="getCategoryById"resultType="layui.library.manager.project.entity.CategoryEntity">SELECT *FROM tb_book_categorywhere cateId = #{cateId}</select><!--数据更新--><update id="updateCategory" parameterType="layui.library.manager.project.entity.CategoryEntity">update tb_book_category<set><if test="categoryName!=null">categoryName=#{categoryName},</if><if test="categoryDesc!=null">categoryDesc=#{categoryDesc},</if><if test="categoryDate!=null">categoryDate=#{categoryDate}</if></set>where cateId=#{cateId}</update>