直接在单元格中编辑并保存信息,
该功能依赖
```
<link href="static/bootstrap3-editable-1.5.1/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="static/bootstrap3-editable-1.5.1/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="static/bootstrap-table/bootstrap-table-master/dist/extensions/editable/bootstrap-table-editable.js"></script>
```
## 开启编辑功能
### 设置属性:
editable:true
### 配置允许编辑的列
属性columns中找到需要开启编辑,设置editable属性,其值为一个对象。
type:
- text 表示编辑的是文本
- number 表示数字
- select 在列表中选择值
source: 当type为select时需要指定的选项。为对象列表如:
```
source: [{ value:1, text:"开发部" }, { value:2, text:"销售部" }, {value:3,text:"行政部"}],
```
参考:https://www.cnblogs.com/landeanfen/p/5821192.html
mode:编辑框模式
- inline 行内编辑
- popup 弹框编辑(这个功能暂时没有实现成功)
validate:为一个方法,返回错误信息来阻止保存,没有任何返回表示不阻止保存。
```
function(v)
{
if(v == '')return '不得为空';
}
```
url: 点击保存时调用
传参 name,value,pk
success:url请求地址的响应回调。
## 相关事件
onEditableShown
显示编辑框状态时触发
```
function (field, row, $el, editable) {
// field 是点击单元格所在列的field字段名
// row 是点击单元格所在行的所有数据
// $el 点击的元素
// editable 包含弹出框一些元素
}
```
onEditableHidden
隐藏编辑框时触发
```
function(field, row, $el, reason)
{
console.log("onEditableHidden",row);
},
```
onEditableSave
成功保存时触发
```
function (field, row, oldValue, $el)
{
console.log("onEditableSave",row);
}
```