11. 编辑器:无法自动从源确定字段。
如果激活了 Editor 的 bubble()
和 inline()
方法,将自动尝试发现作为第一个参数提供给函数的元素与字段在字段中相关的部分。如果无法执行此操作,Editor 会发出以下错误
无法自动从源确定字段。请指定字段名称
自动检测
当 bubble()
和 inline()
仅使用一个参数时,Editor 将读取作为第一个参数提供的数据单元的数据源属性(示例将说明这一点)。然后它将循环列表中可用的字段,以查找具有匹配数据源属性的字段,并将其用作要编辑的字段。
示例
考虑以下 Editor 和 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 窗体中的前两个字段。但是,Manager 字段没有这种直接关联。
考虑以下内容
editor.inline( $('#example tbody tr:first-child td:first-child') );
此处的选择将选择表中的第一行中的第一个第一个单元格。Editor 将能够自动确定该列中的数据来自数据属性 first_name
,并且由于窗体中有一个名称为该名称的字段,因此它将自动使用该字段。
现在考虑
editor.inline( $('#example tbody tr:first-child td:last-child') );
在本例中,我们选择第一行中的最后一个单元格 - 管理员姓名。Editor 窗体中没有 manager.name
字段,因此会触发错误。
解决方案
要解决此错误,有两种选择
editField
属性
最简单的方法向 DataTables 列添加一个 `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`,以向编辑器明确说明要编辑哪个字段。