Два разных ряда под одной формой повторителя - PullRequest
0 голосов
/ 23 февраля 2019

Я мм, пытаясь создать повторитель Forom с помощью 2 кнопки добавления.Добавить A или Добавить B. Когда я нажимаю кнопку «Добавить», повторяется форма A, а при нажатии кнопки «Добавить B» повторяется форма B

Вот изображение Form repeater design

А вот HTML, который у меня есть

<div id="m_repeater">
                                        <div id="m_repeater_1">
                                            <div class="form-group  m-form__group row" id="m_repeater_1">
                                                <label class="col-lg-2 col-form-label">Contacts:</label>
                                                <div data-repeater-list="group-a" class="col-lg-10">
                                                    <div data-repeater-item class="form-group m-form__group row align-items-center">
                                                        <div class="col-md-3">
                                                            <div class="m-form__group m-form__group--inline">
                                                                <div class="m-form__label">
                                                                    <label>AName:</label>
                                                                </div>
                                                                <div class="m-form__control">
                                                                    <input type="email" class="form-control m-input">
                                                                </div>
                                                            </div>
                                                            <div class="d-md-none m--margin-bottom-10"></div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="m-form__group m-form__group--inline">
                                                                <div class="m-form__label">
                                                                    <label class="m-label m-label--single">ANumber:</label>
                                                                </div>
                                                                <div class="m-form__control">
                                                                    <input type="email" class="form-control m-input">
                                                                </div>
                                                            </div>
                                                            <div class="d-md-none m--margin-bottom-10"></div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="m-form__group m-form__group--inline">
                                                                <div class="m-form__label">
                                                                    <label class="m-label m-label--single">Order:</label>
                                                                </div>
                                                                <div class="m-form__control">
                                                                    <input type="email" class="form-control m-input">
                                                                </div>
                                                            </div>
                                                            <div class="d-md-none m--margin-bottom-10"></div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div data-repeater-delete="" class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill">
                                                                <span>
                                                                    <i class="la la-trash-o"></i>
                                                                    <span>Delete</span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div id="m_repeater_11">
                                            <div class="form-group  m-form__group row" id="m_repeater_11">
                                                <label class="col-lg-2 col-form-label"></label>
                                                <div data-repeater-list="group-b" class="col-lg-10">
                                                    <div data-repeater-item class="form-group m-form__group row align-items-center">
                                                        <div class="col-md-3">
                                                            <div class="m-form__group m-form__group--inline">
                                                                <div class="m-form__label">
                                                                    <label>BName:</label>
                                                                </div>
                                                                <div class="m-form__control">
                                                                    <input type="email" class="form-control m-input">
                                                                </div>
                                                            </div>
                                                            <div class="d-md-none m--margin-bottom-10"></div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="m-radio-inline">
                                                                <label class="m-checkbox m-checkbox--state-success">
                                                                    <input type="checkbox">Necessary
                                                                    <span></span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="m-form__group m-form__group--inline">
                                                                <div class="m-form__label">
                                                                    <label class="m-label m-label--single">Order:</label>
                                                                </div>
                                                                <div class="m-form__control">
                                                                    <input type="email" class="form-control m-input">
                                                                </div>
                                                            </div>
                                                            <div class="d-md-none m--margin-bottom-10"></div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div data-repeater-delete="TFBO" class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill">
                                                                <span>
                                                                    <i class="la la-trash-o"></i>
                                                                    <span>Delete</span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                        <div class="m-form__group form-group row">
                                            <label class="col-lg-2 col-form-label"></label>
                                            <div class="col-lg-4">
                                                <div data-repeater-create="tour" class="btn btn btn-sm btn-brand m-btn m-btn--icon m-btn--pill m-btn--wide">
                                                    <span>
                                                        <i class="la la-plus"></i>
                                                        <span>Add A</span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div data-repeater-create="TFBO" class="btn btn btn-sm btn-brand m-btn m-btn--icon m-btn--pill m-btn--wide">
                                                    <span>
                                                        <i class="la la-plus"></i>
                                                        <span>Add B</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

А вот js

    var FormRepeater = {
    init: function() {
        $("#m_repeater").repeater({
            initEmpty: !1,
            defaultValues: {
                "text-input": "foo"
            },
            show: function() {
                $(this).slideDown()
            },
            hide: function(e) {
                $(this).slideUp(e)
            }
        }),
        $("#m_repeater_1").repeater({
            initEmpty: !1,
            defaultValues: {
                "text-input": "foo"
            },
            show: function() {
                $(this).slideDown()
            },
            hide: function(e) {
                $(this).slideUp(e)
            }
        }),
        $("#m_repeater_11").repeater({
            initEmpty: !1,
            defaultValues: {
                "text-input": "foo"
            },
            show: function() {
                $(this).slideDown()
            },
            hide: function(e) {
                $(this).slideUp(e)
            }
        })
    }
};
jQuery(document).ready(function() {
    FormRepeater.init()
});

Я знаю, что это можно сделать с двумя разными повторителями формы.Но дело лучше контролирует вещи, которые мы сохраняем.

Я попробовал несколько версий, но моя информация js не слишком хороша, но я неправильно поступаю с html-частью.Я пробовал разные варианты, но я не мог.

Я также проверил в сети, есть ли подобный вопросЕдинственное, что я обнаружил, - это использование двух разных репатеров форм на одной странице.Так что это не было моим решением.

Мне нужно сообщить, что этот дизайн я получил из шаблона администратора metronic.

Вот ссылка Повторитель формы Metrnic

...