11. 編輯器:無法自動從來源判斷欄位。

編輯器的 bubble()inline() 方法在啟動時,會自動嘗試找出作為第一個參數傳遞給函數的元素,在欄位中對應的欄位。如果無法做到,編輯器會發出以下錯誤

無法自動從來源判斷欄位。請指定欄位名稱

自動偵測

bubble()inline() 僅使用單一參數時,編輯器會讀取作為第一個參數給定的資料儲存格的資料來源屬性 (範例將說明這一點)。接著,它會迴圈瀏覽可用的欄位列表,以尋找具有符合資料來源屬性的欄位,並將其用作要編輯的欄位。

範例

請考慮以下編輯器和 DataTables 初始化

var editor = new $.fn.dataTable.Editor( {
    ajax: "../php/staff.php",
    table: "#example",
    fields: [ {
            label: "First name:",
            name: "first_name"
        }, {
            label: "Last name:",
            name: "last_name"
        }, {
            label: "Manager:",
            name: "manager.id"
        }
    ]
} );

$('#example').DataTable( {
    ajax: "../php/staff.php",
    columns: [
        { data: "first_name" },
        { data: "last_name" },
        { data: "manager.name" }
    ]
} );

用於此初始化的 JSON 資料結構會如下所示

{
    "first_name": "Fiona",
    "last_name":  "Green",
    "manager": {
        "name": "Chris White",
        "id":   3
    }
}

請注意表格中的前兩個欄位如何直接對應到編輯器表單中的前兩個欄位。然而,「經理」欄位沒有這種直接的關聯性。

請考慮以下

editor.inline( $('#example tbody tr:first-child td:first-child') );

這裡的選擇器會選擇表格第一列的第一個儲存格。編輯器將能夠自動判斷該欄位的資料來自資料屬性 first_name,並且由於表單中存在具有該名稱的欄位,它會自動使用該欄位。

現在考慮

editor.inline( $('#example tbody tr:first-child td:last-child') );

在這種情況下,我們選擇第一列的最後一個儲存格 - 經理的姓名。編輯器表單中沒有 manager.name 欄位,因此會觸發錯誤。

解決方案

要解決此錯誤,有兩個選項

editField 屬性

最簡單的方法是在 DataTable 欄位中新增一個 editField 選項,其中包含當在該欄位上啟用編輯時要編輯的欄位名稱。在上面的範例中,DataTables 初始化將會被修改為

$('#example').DataTable( {
    ajax: "../php/staff.php",
    columns: [
        { data: "first_name" },
        { data: "last_name" },
        { data: "manager.name", editField: "manager.id" }
    ]
} );

請注意在第三個欄位的欄位配置中增加了 editField: "manager.id",讓編輯器能夠判斷應編輯哪個欄位。

方法呼叫

第二個選項是將您想要編輯的欄位名稱作為第二個參數傳遞給 bubble()inline()

在上面的範例中,程式碼將會被修改為

editor.inline( $('#example tbody tr:first-child td:last-child'), 'manager.id' );

請注意在函數呼叫中增加了 manager.id 字串,以明確告訴編輯器要編輯哪個欄位。