編輯
一個按鈕,將使用 Editor 編輯一個或多個現有的列。
請注意 - 此屬性需要 DataTables 的 Editor 擴充功能。
描述
Editor 將 edit
按鈕類型新增至 DataTables,並提供一個預先定義的按鈕,該按鈕將呼叫 edit()
方法以觸發 DataTable 中選定列的編輯。
它使用 DataTables 的 Select 擴充功能來確定 DataTable 中選取的資料,並將該資訊提供給 edit()
方法以編輯該資料。
所有可用的選項,用於 edit()
方法的表單選項,都可透過按鈕選項使用(即 formButtons
、formMessage
和 formTitle
)。
此按鈕需要設定 editor
選項,該選項會告知按鈕在啟用時要對哪個 Editor 執行個體進行操作。透過這種方式,如果需要,可以將多個 Editor 執行個體附加到單個 DataTable。
選項
除了所有按鈕可用的選項之外(例如 buttons.buttons.text
),此按鈕可以在其配置物件中設定以下選項來自訂其動作和顯示。
名稱 | 類型 | 預設值 |
---|---|---|
editor | ||
當啟用時,此按鈕應對其操作的 Editor 執行個體。 | ||
formButtons | ||
當由 此處給定的值將直接傳遞給 | ||
formMessage | ||
要在編輯表單中顯示的訊息。這可以是簡單的字串,也可以是將計算要顯示字串的函式(當按鈕啟用時)。 此處給定的值將直接傳遞給 | ||
formOptions | ||
用於配置表單行為的表單選項 - 請參閱 | ||
formTitle | ||
要給編輯表單的標題。這可以是簡單的字串,也可以是將計算要顯示字串的函式(當按鈕啟用時)。 此處給定的值將直接傳遞給 |
範例
用於 Editor 執行個體 myEditor
的單個簡單編輯按鈕
new DataTable('#myTable', {
buttons: [
{
extend: 'edit',
editor: myEditor
}
]
});
建立、編輯和移除按鈕,全部使用預設選項
new DataTable('#myTable', {
buttons: [
{ extend: 'create', editor: myEditor },
{ extend: 'edit', editor: myEditor },
{ extend: 'remove', editor: myEditor }
]
});
具有取消按鈕的編輯按鈕
new DataTable('#myTable', {
buttons: [
{
extend: 'edit',
editor: myEditor,
formButtons: [
{
label: 'Cancel',
fn: function () {
this.close();
}
},
'Save row'
]
}
]
});
具有使用函式的自訂標題的編輯按鈕
new DataTable('#myTable', {
buttons: [
{
extend: 'edit',
editor: myEditor,
formTitle: function (editor, dt) {
// Get the data for the row and use a property from it in the
// form title
var rowData = dt.row({ selected: true }).data();
return 'Editing data for ' + rowData.first_name;
}
}
]
});