javascript - jQuery - 如何填充(数据注入(inject))嵌套 SheepIt 表单

Question

我有一个 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但可以在这里找到:https://yt074.addons.la/js/jquery.sheepItPlugin-modified.js

注入(inject)(数据填充)代码是 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);
                            }
                        }

                    }
                }
            }

        });


    }

这是一个 fiddle ，显示了我的停止日期未填充的问题:https://jsfiddle.net/z31fr2xk/5/

Answer 1

您有这些“表格”:

• 家长表格 — 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/数据如下图:

[{ // 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 .

通过示例字段(“注释”和“停止日期”字段)，您的 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 ，也许？)，但您需要自己进行修复.. =)