View on GitHub
Table Editable
Bootstrap TableのTable Editable拡張機能。
プラグインを使用： x-editable
Usage
<script src="extensions/editable/bootstrap-table-editable.js"></script>Options
editable
-
属性：
data-editable -
タイプ：
Boolean -
詳細
すべての列の編集を無効にする場合は、falseに設定します。
-
デフォルト：
true
Column options
alwaysUseFormatter
-
属性：
data-always-use-formatter -
タイプ：
Boolean -
詳細
列が既に編集されている場合でも、必ずフォーマッターを使用する場合は、
trueに設定します。 -
デフォルト：
false
editable
-
属性：
data-editable -
タイプ：
Object | Function -
詳細
x-editableの設定。オプションの全リスト： http://vitalets.github.io/x-editable/docs.html#editable。
関数のタイプの場合は、テーブルの各行のインデックス、行、要素を使用して呼び出されます。x-editable構成のオブジェクトを返す必要があります。
すべてのオプションは、
data-editable-*HTML属性を介して定義できます。テーブル全体オプションはすべての列で使用されますが、上書きできます。
<table id="my_table_id"
data-url="data/url.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="description" data-editable="true" data-editable-emptytext="Custom empty text.">Description</th>
</tr>
</thead>
</table>
例えば、編集不可の列を無効にするにはnoEditFormatterを使用できます
{
editable: {
noEditFormatter (value, row, index) {
if (value === 'noEdit') {
return 'No Edit'
}
return false
}
}
}
- デフォルト：
undefined
Events
onEditableInit(editable-init.bs.table)
$().editable()メソッドですべての列が初期化されると発生します。
onEditableSave(editable-save.bs.table)
編集可能なセルが保存されると発生します。
パラメーター：field、row、rowIndex、oldValue、$el
onEditableShown(editable-shown.bs.table)
編集可能なセルが編集のために開かれると発生します。
パラメーター：field、row、$el
onEditableHidden(editable-hidden.bs.table)
編集可能なセルが非表示または閉じた場合に発生します。
パラメーター：field、row、$el、reason
The existing problems
- 編集可能拡張機能は、selectタイプでの検索をサポートしていません。