columns.editField
自:Editor 1.4
定義欄位應觸發哪個欄位的編輯。
請注意 - 此屬性需要 DataTables 的 Editor 擴充功能。
描述
Editor 的 inline()
和 bubble()
方法會根據頁面上的特定元素(通常是表格儲存格)觸發個別欄位編輯,並嘗試根據給定的表格儲存格判斷應編輯 Editor 表單中的哪個欄位。
但是,自動偵測並非總是可行,尤其是在使用關聯資料庫表格時,在 DataTable 顯示欄中顯示標籤值很常見,但在編輯列的資料時編輯相關值(例如資料庫 ID 欄)。
此選項提供在透過 inline()
和 bubble()
啟動特定欄位進行編輯時,告知 Editor 應編輯哪個或哪些欄位的功能。
此選項可以接受的值由 Editor 表單使用的欄位名稱定義 (fields.name
)。在 Editor 實例中定義的任何欄位名稱都可以用作此處的值。
從 Editor 1.5 開始,對於 bubble()
編輯,此選項可以是欄位名稱陣列,以允許一次顯示多個欄位進行編輯。
類型
此選項可指定為下列類型:
預設值
- 值:
null
Editor 將嘗試根據 DataTables 的初始化選項自動判斷要編輯的欄位。如果無法判斷且未指定 columns.editField
選項,則會發出警告。
範例
使用 editField
選項為最後一欄進行表格內編輯 - 請注意,表格中顯示的資料是 sites.name
,而編輯的值是 users.site
$(document).ready(function () {
var editor = new DataTable.Editor({
ajax: '../php/join.php',
table: '#example',
fields: [
{
label: 'First name:',
name: 'users.first_name'
},
{
label: 'Last name:',
name: 'users.last_name'
},
{
label: 'Phone #:',
name: 'users.phone'
},
{
label: 'Site:',
name: 'users.site',
type: 'select'
}
]
});
// Activate an inline edit on click of a table cell
$('#example').on('click', 'tbody td', function (e) {
editor.inline(this);
});
new DataTable('#myTable', {
ajax: {
url: '../php/join.php',
type: 'POST'
},
columns: [
{ data: 'users.first_name' },
{ data: 'users.last_name' },
{ data: 'users.phone' },
{ data: 'sites.name', editField: 'users.site' }
]
});
});