建设一个完整网站技术路线,安徽淮北发现一例,linux系统怎么做网站,百度推广在哪里能看到layui实现数据表格双击编辑数据更新
在使用layui加载后端数据请求时#xff0c;对数据选项框进行双击即可实现数据的输入编辑更改 代码块 var form layui.form, table layui.table,layer parent.layer undefined ? layui.layer : parent.layer,laypage layui.laypag…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 classlayui-btn layui-btn-xs lay-eventediti classlayui-icon layui-icon-edit编辑/i/button button classlayui-btn layui-bg-red layui-btn-xs lay-eventdeletei classlayui-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 idgetCategoryByIdresultTypelayui.library.manager.project.entity.CategoryEntitySELECT *FROM tb_book_categorywhere cateId #{cateId}/select!--数据更新--update idupdateCategory parameterTypelayui.library.manager.project.entity.CategoryEntityupdate tb_book_categorysetif testcategoryName!nullcategoryName#{categoryName},/ifif testcategoryDesc!nullcategoryDesc#{categoryDesc},/ifif testcategoryDate!nullcategoryDate#{categoryDate}/if/setwhere cateId#{cateId}/update
