bootstrapTable 实现指定字段行内编辑,无弹窗,自动保存
最近做一个项目时,使用bootstrapTable 作为表格进行数据展示,客户要求对数量字段更直观的行内编辑,研究了一下网上的方案并参考了下面的文章 bootstrapTable行内动态编辑行中某列字段数据(优化版:无需弹框,直接在行内更新)
,对文中的代码进行改进,消除了bug,实现了双击行内编辑,自动保存的效果如下图。
实现思路参照 bootstrapTable API 中的 onDblClickCell 和updateCell 方法
本项目采用ruoyi框架,在ry-ui.js 中的 $('#bootstrap-table').bootstrapTable({ 中加入 js代码如下
onDblClickCell : function(field,value,row,$element){ var upIndex = $element[0].parentElement.rowIndex -1; if(field == options.editFiled){ $element[0].innerHTML="<input id='inputCell' type='text' name='inputCell' style ='width: 40px' value='"+value+"'>"; $("#inputCell").focus(); $("#inputCell").blur(function(){ var newValue = $("#inputCell").val(); row[field] = newValue; $(this).remove(); $('#bootstrap-table').bootstrapTable('updateCell', { index: upIndex, field:field, value: newValue }); $.operate.rowedit(row); // updateExbEnt(); }); }
双击单元格后触发onDblClickCell 事件,获取到行号,插入input元素即可行内编辑,编辑完后触发updateCell 方法更新单元格数据。
下面是js封装的操作函数,用于提交数据,返回操作结果。
// 操作封装处理 operate: { // post请求传输 post: function(url, data) { $.operate.submit(url, "post", "json", data); }, // 修改行 rowedit: function(row) { $.modal.loading("正在处理中,请稍后..."); var url = $.table._option.roweditUrl; var config = { url: url, type: "post", dataType: "json", data: row, success: function(result) { $.operate.ajaxSuccess(result); } }; $.ajax(config) }, // 保存结果弹出msg刷新table表格 ajaxSuccess: function (result) { if (result.code == web_status.SUCCESS) { $.modal.msgSuccess(result.msg); $.table.refresh(); } else { $.modal.alertError(result.msg); } $.modal.closeLoading(); } }
上面是js封装的操作函数,用于提交数据,返回操作结果。
在html页面文件的
$(function () {
var options = {
editFiled:"shuliang", //加入需要编辑的属性字段名称
后端代码可以直接用保存编辑的接口。
@PostMapping("/edit") @ResponseBody public AjaxResult editSave(Yuce yuce) { yuce.setUpdateBy(ShiroUtils.getLoginName()); return toAjax(yuceService.updateYuce(yuce)); }
本需求只需编辑一个字段。如果需要编辑多个字段,需修改上面的js代码,动态传递多个字段参数即可。
如需权限控制,可增加开关按钮,并在js增加使能参数。如下所示。
