直接在單元格中編輯并保存信息， 該功能依賴 ``` <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); } ```