jQuery-如何填充（數據注入）嵌套的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插件的文件已根據我之前的StackOverflow問題進行了修改，但可以在以下位置找到： 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/

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 數組中讀取{DATA KEY}值（如果有）。

因此， 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和演示。

補充筆記

• 在演示中，我僅鏈接到修改后的 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 ，也許嗎？），但是您需要自己進行修復。.=）