jQuery - Como preencher (injeção de dados) uma forma hierárquica SheepIt

votos
0

I tem uma forma SheepIt de veículos, cada um dos quais pode ter qualquer número (0 - infinito) de pára. Um veículo tem um tipo, notas e (qualquer número de) pára. A parada tem uma data, hora e local.

Este é meu código 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']
            }
        ]
        });

O ponto crucial aqui é que dataelemento no final. Eu simplesmente não consigo descobrir como formatar o JSON dataelemento para preencher corretamente.

O arquivo que estou usando para o meu plugin jQuery foi modificado com base em minhas perguntas StackOverflow anteriores , mas possa ser encontrada aqui: https://yt074.addons.la/js/jquery.sheepItPlugin-modified.js

O código de injecção (população de dados) é a fillFormfunção de, na linha 977de que a função. Eu incluí a própria função a seguir:

    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);
                            }
                        }

                    }
                }
            }

        });


    }

Aqui está um violino que mostra o meu problema da parada datas não preencher: https://jsfiddle.net/z31fr2xk/5/

Publicado 20/09/2018 em 04:35
fonte usuário
Em outras línguas...                            


1 respostas

votos
1

Você tem estas "formas":

  • Formulário pai - ID: vehicle_types; Nível 1

  • Formulário filho - ID: vehicle_types_#index#_stops; Nível: 2 (aninhado em forma o Nível 1 de)

Em cada forma, o plug-in SheepIt espera que cada campo de formulário (por exemplo, um <input>) para ter a sua idneste formato: {FORM ID}_{INDEX FORMAT}_{DATA KEY}; por exemplo, vehicle_types_#index#_notespara o campo "Notes", onde {FORM ID}é vehicle_types, {INDEX FORMAT}é #index#, e {DATA KEY}é notes.

E o plugin irá ler o {DATA KEY}valor, se houver, a partir da data matriz .

Assim, o dataformato é:

[{ // Item 1
  '{DATA KEY}': 'value',
  '{DATA KEY}': 'value',
  ...
},
{ // Item 2
  '{DATA KEY}': 'value',
  '{DATA KEY}': 'value',
  ...
},
...]

Para cada / form aninhados criança, basta adicionar um aninhadas array/ dados como mostrado abaixo:

[{ // Item 1
  '{DATA KEY}': 'value',
  '{DATA KEY}': 'value',
  ...
  '{CHILD FORM ID}': [{
    '{DATA KEY}': 'value',
    '{DATA KEY}': 'value',
    ...
  },
  ...]
},
...]

A {CHILD FORM ID}é obrigatório, e no seu caso, é vehicle_types_#index#_stops.

Assim, por exemplo, o iddo campo de data parada é vehicle_types_#index#_stops_#index_stops#_stop_date, que significa que o {DATA KEY}seja stop_date.

E com os campos de exemplo (as "Notas" e "Parar data" campos), o seu dataleque ficaria assim:

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

Veja a completa datae uma demonstração aqui .

Notas Adicionais

  • Na demo, eu ligada apenas à modificado plug-in SheepIt - você ligados a ambas as versões modificadas e originais do plugin. Mas note que eu tinha não realmente fazer quaisquer modificações para o plugin SheepIt.

  • Eu corrigiu o fore iddo campo "Modelo de veículo" - você usou vehicles_#index#_typee eu mudei para vehicle_types_#index#_type. A mesma coisa com o campo "Stop Type" (na criança / form aninhados) - você usou vehicle_stop_types_#index#_#index_stops#e eu mudei para vehicle_types_#index#_stops_#index_stops#_stop_type. Pode haver outras correções necessárias (os campos ocultos id, talvez?), Mas você precisa fazer as correções em seu próprio .. =)

Respondeu 24/09/2018 em 07:36
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more