我有一个SheepIt形式的车辆，每个车辆可以有任意数量（0-无限）的站点。车辆具有类型，注释和（任意数量）停靠点。站点有日期，时间和位置。
这是我的SheepIt代码：
var sheepit_vehicles = jQuery("#vehicle_types").sheepIt({
separator: '',
allowRemoveLast: true,
allowRemoveCurrent: true,
allowAdd: true,
// Limits
minFormsCount: 1,
iniFormsCount: 1,
nestedForms: [
{
id: 'vehicle_types_#index#_stops',
options: {
separator: "",
indexFormat: '#index_stops#',
minFormsCount: 2,
iniFormsCount: 2,
afterAdd: function(source, newForm) {
addStop(source, newForm);
jQuery(".timepicker").timepicker({interval: 15, timeFormat: 'h:mm p'});
}
}
}
]
,
data: [{
'lead_vehicle_id': '34',
'vehicle_type': '1028',
'vehicle_note': '',
'vehicle_stop_dates[#index#][#index_stops#]': ['2018-08-26', '2018-08-26', '2018-08-26']
}, {
'lead_vehicle_id': '35',
'vehicle_type': '1027',
'vehicle_note': 'ABC',
'vehicle_stop_dates[#index#][#index_stops#]': ['2018-08-27', '2018-08-27']
}
]
});
这里的关键是最后的
data元素。我根本无法弄清楚如何格式化JSON data元素以正确填充。我用于jQuery插件的文件已被修改based upon my previous StackOverflow questions，但可在此处找到cna：https://yt074.addons.la/js/jquery.sheepItPlugin-modified.js
注入（数据填充）代码是该函数的
fillForm行中的977函数。我在下面包括了函数本身： function fillForm(form, data)
{
var x = 0;
// For each element, try to get the correct field or fields
$.each(data, function(index, value) {
var formId = source.attr('id');
var formIndex = form.data('formIndex');
// Replace form Id and form Index with current values
if (index.indexOf('#form#') != -1 || index.indexOf('#index#') != -1) {
index = index.replace('#form#', formId);
index = index.replace('#index#', formIndex);
} else {
index = formId + '_' + formIndex + '_' + index;
}
/**
* Search for field (by id, by name, etc)
*/
// Search by id
var field = form.find(':input[id="' + index + '"]');
// Search by name
if (field.length == 0) {
// Search by name
field = form.find(':input[name="' + index + '"]');
if (field.length == 0) {
// Search by name array format
field = form.find(':input[name="' + index + '[]"]');
}
// Search by name without the form data (Michael Yingling hack for broken radio buttons)
if(field.length == 0) {
var name = index.replace(formId, '').replace('_'+formIndex+'_', '');
field = form.find(':input[name="' + name + 's[' + formIndex + ']"]');
}
}
if (field.length == 0) {
field = form.find('select[id="' + index + '"]');
if (field.length == 0) {
var last_underscore = index.lastIndexOf("_")+1;
var token = index.substring(last_underscore, index.indexOf("-", last_underscore));
field = form.find('select[id="' + index.replace(token+'-value-trigger', 'trigger-trigger-'+token) + '"]');
}
}
// Field was found
if (field.length > 0) {
// Multiple values?
var mv = false;
if (typeof(value) == 'object') {
mv = true;
}
// Multiple fields?
var mf = false;
if (field.length > 1) {
mf = true;
}
if (mf) {
if (mv) {
var fieldsToFill = [];
fieldsToFill['fields'] = [];
fieldsToFill['values'] = [];
x = 0;
for (x in value) {
fieldsToFill['fields'].push(field.filter('[value="'+ value[x] +'"]'));
fieldsToFill['values'].push(value[x]);
}
x = 0;
for (x in fieldsToFill['fields']) {
fillFormField(fieldsToFill['fields'][x] , fieldsToFill['values'][x]);
}
} else {
fillFormField( field.filter('[value="'+ value +'"]', value) );
}
} else {
if (mv) {
x = 0;
for (x in value) {
fillFormField(field, value[x]);
}
} else {
fillFormField(field, value);
}
}
}
// Field not found in this form try search inside nested forms
else {
if ( typeof(form.data('nestedForms')) != 'undefined') {
if (form.data('nestedForms').length > 0) {
x = 0;
for (x in form.data('nestedForms')) {
if (index == form.data('nestedForms')[x].attr('id') && typeof(value) == 'object') {
form.data('nestedForms')[x].inject(value);
}
}
}
}
}
});
}
这是一个小提琴，显示了我的停止日期未填充的问题：https://jsfiddle.net/z31fr2xk/5/
最佳答案
您具有以下“表格”：
父表单-ID：vehicle_types； 1级
子表单-ID：vehicle_types_#index#_stops；等级：2（以等级1的形式嵌套）
在每种表单中，SheepIt插件都希望每个表单字段（例如<input>）的id格式如下：{FORM ID}_{INDEX FORMAT}_{DATA KEY};例如“备注”字段的vehicle_types_#index#_notes，其中{FORM ID}是vehicle_types，{INDEX FORMAT}是#index#，并且{DATA KEY}是notes。
插件将从{DATA KEY}数组中读取data值（如果有）。
因此，data格式为：
[{ // Item 1
'{DATA KEY}': 'value',
'{DATA KEY}': 'value',
...
},
{ // Item 2
'{DATA KEY}': 'value',
'{DATA KEY}': 'value',
...
},
...]
对于每个子表格/嵌套表格，只需添加嵌套的
array / data，如下所示：[{ // Item 1
'{DATA KEY}': 'value',
'{DATA KEY}': 'value',
...
'{CHILD FORM ID}': [{
'{DATA KEY}': 'value',
'{DATA KEY}': 'value',
...
},
...]
},
...]
{CHILD FORM ID}是必需的，在您的情况下，它是vehicle_types_#index#_stops。因此，例如，终止日期字段的
id是vehicle_types_#index#_stops_#index_stops#_stop_date，这意味着{DATA KEY}是stop_date。通过示例字段（“ Notes”和“ Stop Date”字段），您的
data数组如下所示：[{
'notes': 'Notes 1',
'vehicle_types_#index#_stops': [{
'stop_date': '2018-09-24'
}, {
'stop_date': '2018-09-25'
}]
}, {
'notes': 'Notes 2',
'vehicle_types_#index#_stops': [{
'stop_date': '2018-09-23'
}]
}]
查看完整的
data和演示here。补充笔记
在演示中，我仅链接到modified SheepIt插件-您同时链接了该插件的修改版和原始版。但是请注意，我实际上并未对SheepIt插件进行任何修改。
我更正了“车辆类型”字段的
for和id-您使用了vehicles_#index#_type，并将其更改为vehicle_types_#index#_type。与“停止类型”字段（子/嵌套形式）相同—您使用了vehicle_stop_types_#index#_#index_stops#，我将其更改为vehicle_types_#index#_stops_#index_stops#_stop_type。可能还需要其他修复（隐藏字段的id，也许吗？），但是您需要自己进行修复。.=）关于javascript - jQuery-如何填充(数据注入(inject))嵌套的SheepIt表单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52417657/