использование jquery.multipleInput.js без yii2 😅

uzkurama commented 3 years ago

Я знаю может я задаю оффтоп вопрос но я не нашёл документацию по js файлу.

Пилю проект на Laravel 8, но ярый кодер на yii2. Встала задача сделать мульти-форму. Естественно готовых решений нет, и я додумался использовать ваш js файл. Вы ее сами писали или есть источник где бы я мог подробно понять js.

Например у меня проблемы с итерацией select2 и других js библиотек. Вроде даю template и jsTemplates с индексом, но при добавлении колонки js крашится.

Было бы хорошо если бы помогли или сделали бы подробную информацию по самой js файла тоже.

Честно говоря я и сам js, jQuery особо сильно не знаю. Но отправляю кусок кода.

jQuery('#orders_table').multipleInput({
            "id":"orders_table",
            "inputId":"orders-details",
            "template": '<tr><td><input class=\"form-control\" type=\"text\" name=\"contract_date_[{multiple_index_orders-table}]\" id=\"contract_date_{multiple_index_orders-table}\"></td><td><select name=\"market_ids_[{multiple_index_orders-table}][]\" multiple id=\"market_ids_{multiple_index_orders-table}\" class=\"form-control select2bs4\" data-placeholder=\"Выберите\"><option></option></select></td><td><input class=\"form-control select2bs4\" type=\"text\" multiple name=\"inventory_ids_[{multiple_index_orders-table}][]\" id=\"inventory_ids_{multiple_index_orders-table}\" data-placeholder=\"Выберите\"></td><td class=\"list-cell__button\"><div class=\"multiple-input-list__btn js-input-clone btn btn-info\"><i class=\"fa fa-clone\"></i></div></td><<td class=\"list-cell__button\"><div class=\"multiple-input-list__btn js-input-remove btn btn-danger\"><i class=\"fa fa-trash\"></i></div></td></tr>',
            "indexPlaceholder":"multiple_index_orders-table",
            "prepend":false,
            "max":99,
            "min":1,
            "attributes":{"pages-title-language":[],"pages-title-text":[]},
            "jsTemplates": ["var daterangepicker_params = { timePicker: false, autoUpdateInput: false, locale: { format: 'DD/MM/Y', \"applyLabel\": \"Принять\", \"cancelLabel\": \"Отменить\", \"fromLabel\": \"От\", \"toLabel\": \"До\", \"daysOfWeek\": [ \"ВС\", \"ПН\", \"ВТ\", \"СР\", \"ЧТ\", \"ПТ\", \"СБ\" ], \"monthNames\": [ \"Январь\", \"Февраль\", \"Март\", \"Апрель\", \"Май\", \"Июнь\", \"Июль\", \"Август\", \"Сентябрь\", \"Октябрь\", \"Ноябрь\", \"Декябрь\" ] } }; $(\"#contract_date_0\").daterangepicker(daterangepicker_params); $('#contract_date_0').on('apply.daterangepicker', function (ev, picker) { $(this).val(picker.startDate.format('DD.MM.Y') + ' - ' +picker.endDate.format('DD.MM.Y')); $('#start_date_0').val(picker.startDate.format('DD.MM.Y')); $('#end_date_0').val(picker.endDate.format('DD.MM.Y')) }); $('#contract_date_0').on('cancel.daterangepicker', function (ev, picker) { $(this).val(''); $('#start_date_0').val(''); $('#end_date_0').val(''); }); var market_params = { theme: 'bootstrap4', width: null, data: JSON.parse('{!! str_replace('"', '\"', json_encode($markets)) !!}') }; $('#market_ids_{multiple_index_orders-table}').select2(market_params); var inventory_params = { theme: 'bootstrap4', templateResult: statusColor, ajax: { method: 'post', url: '/orders/inventory-search', data: function (params) { var state = $('#contract_date_0').val() !== '' ? 1 : 0; var query = { _token: '{{ csrf_token() }}', text: params.term, date: state }; return query; }, processResults: function (data) { json = JSON.parse(data); return json; } }, minimumInputLength: 4, width: null, }; if ($('#inventory_ids_{multiple_index_orders-table}').data('select2-id')) { $('#inventory_ids_{multiple_index_orders-table}').select2('destroy'); $('#inventory_ids_{multiple_index_orders-table}').select2(inventory_params); }"],
        });

unclead commented 3 years ago

Без yii будет довольно проблематично запустить, ибо много завязок на внутренности фреймворка. Разве в ларавеле не проще сделать тоже самое на vue или lifewire?

Но если нужна информация по тому как работает виджет, то все довольно просто:

на стороне пхп разработчик прописывает настройки колонок
дальше на основе этого мы генерируем html шаблон строки таблицы (в базовом случае используется табличная верстка), который будем использовать для генерации новы строк через js
также на стороне пхп виджет собирает информацию о js коде, который подключается на страницу во время обработки колонок. Этот массив также используется для динамического подключения во время добавления новой строки таблицы

по сути это вся логика виджета. Дальше идет уже надстройка

кидание js событий, на которые можно подписаться в коде и навесить свою экстра логику
интеграция с yii active form для отображения ошибок валидации

unclead commented 3 years ago

@uzkurama будут более конкретные вопросы?

Например у меня проблемы с итерацией select2 и других js библиотек. Вроде даю template и jsTemplates с индексом, но при добавлении колонки js крашится.

надо смотреть с какой ошибкой крашится

uzkurama commented 3 years ago

настолько измучился на laravel (а точнее с jquery), что переделываю проект на yii2.

Однако благодарю за такой удобный extension, respect 😎

unclead / yii2-multiple-input

использование jquery.multipleInput.js без yii2 😅 #344