{hero}

編輯

自:Editor 1.5.0 起

一個按鈕,將使用 Editor 編輯一個或多個現有的列。
請注意 - 此屬性需要 DataTables 的 Editor 擴充功能。

描述

Editor 將 edit 按鈕類型新增至 DataTables,並提供一個預先定義的按鈕,該按鈕將呼叫 edit() 方法以觸發 DataTable 中選定列的編輯。

它使用 DataTables 的 Select 擴充功能來確定 DataTable 中選取的資料,並將該資訊提供給 edit() 方法以編輯該資料。

所有可用的選項,用於 edit() 方法的表單選項,都可透過按鈕選項使用(即 formButtonsformMessageformTitle)。

此按鈕需要設定 editor 選項,該選項會告知按鈕在啟用時要對哪個 Editor 執行個體進行操作。透過這種方式,如果需要,可以將多個 Editor 執行個體附加到單個 DataTable。

選項

除了所有按鈕可用的選項之外(例如 buttons.buttons.text),此按鈕可以在其配置物件中設定以下選項來自訂其動作和顯示。

範例

用於 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;
			}
		}
	]
});