使用EditTable实现可编辑列表

使用BootStrap中的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代表bootstrapTreeTable
            method : 'get', // 服务器数据的请求方式 get or post
            url: 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: 'text',
                        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();//回调
                    }
                 }
           });
        }
   });