代码之家 › 专栏 › 技术社区 › Bing

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

sheepit json jquery javascript

0

Bing · 技术社区 · 7 年前

我有一个羊坑形式的车辆,其中每一个可能有任何数量(0-无限)的站。车辆有类型、注释和(任意数量的)停车位。车站有日期、时间和地点。

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 数据 元素以正确填充。

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/

1 回复 | 直到 7 年前

1

Sally CJ 7 年前

你有这些“表格”:

父窗体-ID: vehicle_types
子窗体-ID: vehicle_types_#index#_stops ; 级别:2(嵌套在级别1的窗体中)

在每个表单中,SheepIt插件都需要每个表单字段(例如 <input> id 以这种格式: {FORM ID}_{INDEX FORMAT}_{DATA KEY} ; 例如 vehicle_types_#index#_notes 对于“注释”字段,其中 {FORM ID} 是 车辆类型 , {INDEX FORMAT} 是 #index# ,和 {DATA KEY} 是 notes .

插件会读取 {数据键} 值(如果有) 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_#index_stops#_stop_date ,这意味着是 stop_date .

数据 数组如下所示:

[{
  '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'
  }]
}]

查看完整的还有一个演示 here .

附加说明

modified SheepIt插件-你链接到插件的修改版本和原始版本。但请注意我做到了不对SheepIt插件进行任何修改。
for 和在“车辆类型”字段中-您使用 vehicles_#index#_type 我把它改成了 vehicle_types_#index#_type . 与“Stop Type”字段(在子/嵌套表单中)的情况相同—您使用了 vehicle_stop_types_#index#_#index_stops# 我把它改成了 vehicle_types_#index#_stops_#index_stops#_stop_type . 可能需要其他修复(隐藏字段的 身份证件 ,也许?),但您需要自己进行修复….=)