Bootstrap 行内编辑并保存

这里内容主要依据与https://blog.csdn.net/wuminglq/article/details/83009664，如果看完可以，就没必要往下看了。

先将行内编辑的代码复制

 1 /**
 2  * bootstrap API中的 onDblClickCell 方法，当用户双击某一列的时候触发
 3  * @param field:点击列的 field 名称
 4  * @param value:点击列的 value 值
 5  * @param row:点击列的整行数据
 6  * @param $element:td 元素
 7  */
 8 onDblClickCell : function (field, value, row, $element) {
 9     // $element[0]: <td style="">0</td> 当前表格的内容
10     // $element[0].parentElement: <tr data-index="0">...</tr> 表格父级tr
11     // $element[0].parentElement.rowIndex: 1 返回某一行在表格的行集合中的位置，这是官方解释，通俗就是第几行
12     // upIndex: 0 行索引，用于更新时确认行索引，-1是因为这里返回第一行为1，更新时索引第一行为0
13     var upIndex = $element[0].parentElement.rowIndex - 1;
14     // options.editFiled：需要编辑的属性，及列名，这里可动态配置多列
15     if (field == options.editFiled) {
16         // 将表格<td></td>中间内容替换为一个如下input
17         // innerHTML 设置或返回表格行的开始和结束标签之间的HTML，官方解释，简单说就是获取或者替换表格内容
18         $element[0].innerHTML =
19                 "<input id=‘inputCell‘ type=‘text‘ name=‘inputCell‘ style =‘width: 40px‘ value=‘" + value    + "‘>";
20         // 获取焦点，鼠标点击
21         $("#inputCell").focus();
22         // 失去焦点，鼠标点击其他位置，离开输入区域，默认为输入结束，进行保存
23         $("#inputCell").blur(function () {
24             // 获取输入内容
25             var newValue = $("#inputCell").val();
26             // 这里可以对内容进行校验，是否为空、数字、长度等
27             // 将修改后的结果设置到行中
28             row[field] = newValue;
29             // 移除鼠标点击事件
30             $(this).remove();
31             /**
32              * bootstrap API中的 updateCell 方法 更新一个单元格
33              * @params index: 行索引 这里就是上边需要-1
34              * @param field: 字段名称
35              * @param value: 新字段值
36              */
37             $(‘#bootstrap-table‘).bootstrapTable(‘updateCell‘, {
38                 index: upIndex,
39                 field: field,
40                 value: newValue
41             });
42             // 封装方法，对编辑后的结果进行处理
43             $.operate.rowedit(row);
44         });
45     }
46 }

以上是这段代码的全部注释，其中未包含的，动态设置编辑列代码如下：

1 $(function () {
2     var options = {
3         editFiled: ‘编辑名称‘,
4         editFiled_1: ‘多个‘
5     }
6 })

 封装的方法如下：

 1 // 操作封装处理
 2 operate: {
 3     // post请求传输
 4     post: function (url, data) {
 5         $.operate.submit(url, "post", "json", data);
 6     }
 7 ,
 8     // 修改行
 9     rowedit: function (row) {
10         $.modal.loading("正在处理中，请稍后...");
11         var url = $.table._option.roweditUrl;
12         var config = {
13             url: url,
14             type: "post",
15             dataType: "json",
16             data: row,
17             success: function (result) {
18                 $.operate.ajaxSuccess(result);
19             }
20         };
21         $.ajax(config)
22     }
23 ,
24     // 保存结果弹出msg刷新table表格
25     ajaxSuccess: function (result) {
26         if (result.code == web_status.SUCCESS) {
27             $.modal.msgSuccess(result.msg);
28             $.table.refresh();
29         } else {
30             $.modal.alertError(result.msg);
31         }
32         $.modal.closeLoading();
33     }
34 }

这是复制的，个人实际使用的如下：

 1 function rowedit(row) {
 2     jp.post(
 3             "",
 4             {
 5                 id: row.id,
 6                 field: row.field
 7             },
 8             function (data) {
 9                 if (data.success) {
10                     refresh();
11                     jp.toastr_success(data.msg);
12                 } else {
13                     jp.toastr_error(data.msg);
14                 }
15             })
16 }

这个就按各自需求做处理了。