使用BootStrap中的EditTable插件实现可编辑列表

业务需求：

  • 列表中某一列要求可以直接点击进行编辑保存

实现效果：

  • 点击序号列，出现弹窗实现编辑保存
    使用EditTable实现可编辑列表-编程知识网

具体功能实现

  • 下载环境所需的 js、css放到项目的静态资源目录下

百度云链接：
链接：https://pan.baidu.com/s/1u0Dvr2JgySGsM8MJtP03Wg
提取码：drr1

  • 页面中引入静态资源 （注：根据自己的静态资源文件位置改写下方代码）
<link href="/js/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="/js/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script type="text/javascript" src="/js/common/bootstrap-table-edittable.js"></script>
  • 修改对应页面的js文件
function imageinfoload() {//注意此处，将表单放在 bootstrapTable 方法体中$('#FormTableId').bootstrapTable({id: "FormTableId",type: 0, // 0 代表bootstrapTable 1代表bootstrapTreeTablemethod : 'get', // 服务器数据的请求方式 get or posturl: kpsfgcBasicinfoPrefix + "/toSubmitListData", // 服务器数据的加载地址iconSize : 'outline',toolbar : 'toolbar',striped : true, // 设置为true会有隔行变色效果dataType : "json", // 服务器返回的数据类型pagination : true, // 设置为true会在底部显示分页条// queryParamsType : "limit",// //设置为limit则会发送符合RESTFull格式的参数singleSelect : false, // 设置为true将禁止多选// contentType : "application/x-www-form-urlencoded",// //发送到服务器的数据编码类型pageSize : 10, // 如果设置了分页，每页数据条数pageNumber : 1, // 如果设置了分布，首页页码//search : true, // 是否显示搜索框showColumns : false, // 是否显示内容下拉框（选择显示的列）sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"queryParams : function(params) {return {limit: params.limit,offset:params.offset,unitName : $("#unitName").val(),principal : $("#principal").val(),sblb : $("#sblb").val(),declarationDate : $("#declarationDate").val()};},columns : [{checkbox : true},{field : 'codeIndex',title : '序号',color : '#FFFFFF',align: 'center',editable: {  //此处为序号编辑弹框及校验type: 'codeIndex',title: "序号",autohide : false,width : '30px',color : '#FFFFFF',validate: function (value) { //字段验证if (!$.trim(value)) {return '不能为空';}var r = /^\+?[1-9][0-9]*$/;　　//正整数if(!r.test(value) || value > 10000){return '请输入正确的序号';}}},formatter: function (value, row, index) {var htmlText = isNull(row.codeIndex) || row.codeIndex == '0' ? "编号" : row.codeIndex;return htmlText;}},{field: 'startTime',title: '起始日期',align: 'center',},{field: 'sblbName',title: '结束日期',align: 'center',},{field: 'deptName',title: '学术组织或机构名称',align: 'center',},{field: 'dutiesName',title: '职务',align: 'center',}],//点击后的回调函数onEditableSave: function (field, row, oldValue, $el) {//提交行内编辑数据$.ajax({cache : true,type : "POST",url : "更新接口",data : {id : row['id'],codeInde: row['codeInde']},async : false,success : function(data) {if (data.code == 0) {parent.layer.msg("操作成功");imageinfoload();//回调} else {parent.layer.alert(data.msg);imageinfoload();//回调}}});}});
}
  • 编辑后回调函数理解
/*
* editTable 编辑后执行保存函数的方式有两种
*///方式一: 可直接在每一个column中进行编辑保存
{field : 'codeIndex',title : '序号',color : '#FFFFFF',align: 'center',editable: {type: 'codeIndex',title: "序号",autohide : false,width : '30px',color : '#FFFFFF',validate: function (value) { //字段验证if (!$.trim(value)) {return '不能为空';}var r = /^\+?[1-9][0-9]*$/;　　//正整数if(!r.test(value) || value > 10000){return '请输入正确的序号';}}},url:'接口映射',        formatter: function (value, row, index) {var htmlText = isNull(row.codeIndex)|| row.codeIndex == '0' ? "编号" : row.codeIndex;return htmlText;
}//方式二： 使用onEditableSave 进行编辑保存 （注：上述代码使用方式二）onEditableSave: function (field, row, oldValue, $el) {//提交行内编辑数据$.ajax({cache : true,type : "POST",url : "更新接口",data : {id : row['id'],codeInde: row['codeInde']},async : false,success : function(data) {if (data.code == 0) {parent.layer.msg("操作成功");imageinfoload();//回调} else {parent.layer.alert(data.msg);imageinfoload();//回调}}});}});