bootstarp-table與editable整合記錄
阿新 • • 發佈:2018-11-30
bootstarp-table與editable整合記錄
在bootstrap-table的擴充套件示例中有關於editable的記錄,關於使用的例子似乎失效了,因此記錄下整合的過程。
要使用此功能需要引入的檔案
css/bootstrap.min.css
bootstrap-table/bootstrap-table.css
bootstrap3-editable/css/bootstrap-editable.css
js/jquery-2.1.0.min.js
js/bootstrap.min.js
bootstrap-table/bootstrap-table.js
bootstrap3-editable/js/bootstrap-editable.min.js
bootstrap-table/bootstrap-table-editable.js
bootstrap-table/locale/bootstrap-table-zh-CN.js
除此外還有一些字型檔案,就不列舉了。
關於程式碼結構一點說明
bootstrap-table-editable作為橋接檔案處理了將bootstrapTable中的editable屬性對映為editable控制元件,實際開發時應該修改。
部分程式碼如下:
$('#my_table_id').bootstrapTable(); <table id="my_table_id" data-url="data.json" data-id-field="ID" data-editable-emptytext="Default empty text." data-editable-url="/my/editable/update/path"> <thead> <tr> <th class="col-md-1" data-field="ID" data-sortable="true" data-align="center">#</th> <th class="col-md-4" data-field="Name" data-editable="true">Name</th> <th class="col-md-7" data-field="ParentName" data-editable="true" data-editable-emptytext="Custom empty text.">Description</th> </tr> </thead> </table>
頁面效果如下圖:
雖然控制元件提供了編輯功能,但是對於習慣於excel的使用者這樣的編輯方式可能仍然不滿意吧。