1. 程式人生 > >bootstarp-table與editable整合記錄

bootstarp-table與editable整合記錄

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的使用者這樣的編輯方式可能仍然不滿意吧。