? ? ? Bootstrap-table是我目前使用過比好的Web前端表格框架，在實際工作也帶了很多的實現便利，關于Bootstap-table基本的介紹可參考我之前的文章《基于Bootstrap-Table的Web表格教程》，本文將介紹Bootstrap-Table擴展功能---實時編輯。

一、使用Bootstrap-Table實現實時編輯步驟

? ? ? 在詳細介紹實現實時編輯前，先說說基本實現過程，wenzhixin(文翼)大牛開發的Bootstrap-Table本身是不支持實時編輯的，由于工作中項目的需要，需要對大量的字段內容進行增刪改查，本來想使用Form表單來解決，但表單不太靈活特別是在出現大量輸入字段時，操作保存任何字段值都要刷新整個頁面，其用戶體驗差，先上圖看看我們的一個實現的效果：

使用Bootstrap-table實現表單編輯功能

使用Bootstrap-table實現動態添加行與合并單元格

二、實現步驟如下：

1.加載表格擴展功能bootstrap-table-editable與插件x-editable

2.初始化動態創建Table表單

3.監聽表格保存事件實現實時保存

下面將介紹實現過程：

1、加載表格擴展功能bootstrap-table-editable與插件x-editable

? ? ? ? Bootstrap-table是通過擴展bootstrap-table-editable來實現單元格的編輯功能的，bootstrap-table-editable會引用第三方強大的Bootstrap的插件x-editable功能，所以也需要在html中一并引入如下圖：

在html中引用bootstrap-table-editable與插件x-editable

注意：bootstrap-table-editable只引用x-editable的部分功能，x-editable的功能很強大如果大家有興趣也可以研究一下：X-editable Home

2、初始化動態創建Table表單

? ? ? ? ?1). 先定義一個類似表單的表格，先定義表格的屬性與表頭的結構、表結構的定義可參考我之前的基礎教程，詳細定義如下，此樣例是定義在模態框中，當然大家也可以直接定義在當前的某個頁面中：

表格在html中的定義

定義表頭的結構

注意：showHeader:false表示影藏表頭，這樣看起來更像表單，editable:{}屬性定義了單元格編輯屬性，"inline"表示在表格內顯示編輯框還有另一種模式是"popup"即彈出模態，"textarea"：表示是一個文本域框。詳細請參考x-editable插件的說明：x-editable編輯插件的屬性定義

2).通過Bootstrap-table的append方法來動態初始化表格的行

append方法來動態初始化表格的行

從上到下一行行初始化表格每一行、并通過appen的方法來添加到表格中。

3)當添加完成后你可能還需要對一些單元格進行合并，即Merge操作，如下函數代碼：

對一些單元格進行合并，其實現效果參考前面的圖《使用Bootstrap-table實現的動態添加行與合并單元格》

合并單元格使用'mergeCells'方法。append與mergeCells的定義與樣例可參考bootstrap-table的官方文檔。append方法官方例子、mergeCells方法官方例子

3.監聽表格保存事件實現實時保存

1).添加一個【editable-save.bs.table】事件監聽器，監聽用戶的保存操作，當用戶輸入內容并點擊確認按鈕即那個帶打勾的按鈕后就會促發監聽器。

監聽用戶的保存操作

在使用on方法調用off方法是為了防止多次添加同事件監聽，所以先刪除監聽再添加監聽。回調函數的詳細介紹請此鏈接：bootstrap-table-editable擴展功能

2).在監聽器中通過Ajax調用將數據實時保存到后臺服務：

通過Ajax調用將數據實時保存到后臺

三、總結：

? ? ? ?本文只是bootstrap-table的一個應用實踐經驗但不一定是很好的表格實時編輯解決方案，如果大家有興趣的話除了也可以嘗試著使用強大的X-editable來實現同樣的功能。PS:本人不是專業的Web端開發人員，只是拋磚引玉，如有相關Web開發的概念錯誤敬請見諒。