ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
直接在单元格中编辑并保存信息, 该功能依赖 ``` <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); } ```