</div>
</div>
</div>
- <div class="row align-items-center">
- <div class="col-md-3">
- <div class="row" style="display: flex;align-items: flex-start; position: relative;">
- <?= Html::label("год: 2025 неделя: 05") ?><br>
- <?= Html::label("январь - февраль") ?><br>
- <?= Html::label("Тип п-ма:") ?><br>
- <?= Html::label("Город:") ?><br>
- <?= Html::label("Регион:") ?><br>
- <?= Html::label("Район:") ?><br>
- <?= Html::label("Тип магазина:") ?><br>
- <?= Html::label("Тер. Уп.:") ?><br>
- <?= Html::label("КШФ:") ?><br>
+ <div class="table-wrapper">
+ <table class="table">
- <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 5px;">
- <?= Html::a('Auto', '#', ['class' => 'btn btn-success', 'style' => 'width:25%']) ?>
- <?= Html::a('Corrected', '#', ['class' => 'btn btn-success', 'style' => 'width:25%']) ?>
- </div>
- </div>
- </div>
- <div class="col-md-9" style="overflow-x: auto; white-space: nowrap; display: flex;">
- <?php foreach ($addresses as $address) { ?>
- <div class="col-md-2">
- <?= Html::label($address, null, [
- 'style' => 'writing-mode: sideways-lr; text-align: center; white-space: nowrap;
- font-weight: bold; transform-origin: left bottom; padding-right: 7%;'
- ]) ?>
- </div>
- <?php } ?>
- </div>
- </div>
- <div class="row">
- <div class="col-md-3">
- <div class="list-group">
- <!-- Срезка -->
- <a class="list-group-item list-group-item-action" data-bs-toggle="collapse" href="#cutting">Срезка ▲</a>
- <div class="collapse" id="cutting">
- <!-- Розы -->
- <a class="list-group-item list-group-item-action" data-bs-toggle="collapse" href="#roses">Розы ▶</a>
- <div class="collapse" id="roses">
- <a class="list-group-item list-group-item-action">Розы 40 Эк</a>
- <a class="list-group-item list-group-item-action">Розы 80 Эк</a>
+ <thead>
+ <tr class="head">
+ <th scope="col" style="text-align: left !important;">
+ <?= Html::label("год: 2025 неделя: 05") ?><br>
+ <?= Html::label("январь - февраль") ?><br>
+ <?= Html::label("Тип п-ма:") ?><br>
+ <?= Html::label("Город:") ?><br>
+ <?= Html::label("Регион:") ?><br>
+ <?= Html::label("Район:") ?><br>
+ <?= Html::label("Тип магазина:") ?><br>
+ <?= Html::label("Тер. Уп.:") ?><br>
+ <?= Html::label("КШФ:") ?><br>
+ <div class="buttons d-flex">
+ <?= Html::a('Auto', '#', ['class' => 'btn btn-success ml-auto']) ?>
+ <?= Html::a('Corrected', '#', ['class' => 'btn btn-success ml-auto']) ?>
</div>
- <!-- Экзотика -->
- <a class="list-group-item list-group-item-action">Экзотика</a>
- <!-- Зелень -->
- <a class="list-group-item list-group-item-action">Зелень</a>
- </div>
+ </th>
- <!-- Горшечные растения -->
- <a class="list-group-item list-group-item-action">Горшечные растения ▲</a>
- <!-- Сухоцветы -->
- <a class="list-group-item list-group-item-action">Сухоцветы ▲</a>
- <!-- Остальные категории -->
- <a class="list-group-item list-group-item-action">Остальные категории ▲</a>
- </div>
- </div>
- <div class="col-md-9" style="overflow-x: auto; white-space: nowrap; display: flex; padding-bottom: 12%;">
- <?php foreach ($addresses as $address) { ?>
- <div class="col-md-2 d-flex align-items-center">
- <div class="row">
- <div class="d-flex align-items-center">
- <div class="row">
- <div class="col-md-8">
- <?= Html::input('text', '', 50, [
- 'class' => 'btn btn-primary',
- 'data-bs-toggle' => 'tooltip',
- 'data-bs-placement' => 'top',
- 'title' => $tooltipText,
- 'style' => 'background:#e73535; width: 120%;'
- ]) ?>
- </div>
- <div class="col-md-4">
- <button style="border: none; background: transparent; cursor: pointer; margin-left: 5px;">
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
- viewBox="0 0 24 24">
- <path d="M20 11v5a1 1 0 0 1-2 0v-4H7.414l1.293 1.293a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.416l3-3a1 1 0 0 1 1.414 1.416L7.414 10H19a1 1 0 0 1 1 1z"
- fill="grey" stroke="none"/>
- </svg>
- </button>
- </div>
- </div>
+ <?php foreach ($addresses as $address) { ?>
+ <th scope="col" class="fixed-column">
+ <?= Html::label($address, null, [
+ 'style' => 'writing-mode: sideways-lr; text-align: center; white-space: nowrap;
+ font-weight: bold; transform-origin: left bottom; padding-right: 7%;'
+ ]) ?>
+ </th>
+ <?php } ?>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="category">
+ <a class="list-group-item list-group-item-action" data-bs-toggle="collapse" href="#cutting">Срезка
+ ▲</a>
+ </td>
+ </tr>
+ <tr>
+ <td class="subcategory">
+ <a class="list-group-item list-group-item-action" data-bs-toggle="collapse" href="#roses">Розы ▶</a>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <a class="list-group-item list-group-item-action">Розы 40 Эк</a>
+ </td>
+ <?php foreach ($addresses as $address) { ?>
+ <td class="items">
+ <div style="display: flex; align-items: center;">
+ <?= Html::input('text', '', 50, [
+ 'class' => 'btn btn-primary input',
+ 'data-bs-toggle' => 'tooltip',
+ 'data-bs-placement' => 'top',
+ 'title' => $tooltipText,
+ ]) ?>
+ <button style="border: none; background: transparent; cursor: pointer; margin-left: 5px;">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+ viewBox="0 0 24 24">
+ <path d="M20 11v5a1 1 0 0 1-2 0v-4H7.414l1.293 1.293a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.416l3-3a1 1 0 0 1 1.414 1.416L7.414 10H19a1 1 0 0 1 1 1z"
+ fill="grey" stroke="none"/>
+ </svg>
+ </button>
</div>
- <!-- <br>-->
- <div class="row">
- <div class="col-md-8">
- <?= Html::input('text', '', 50, [
- 'class' => 'btn btn-primary',
- 'data-bs-toggle' => 'tooltip',
- 'data-bs-placement' => 'top',
- 'title' => $tooltipText,
- 'style' => 'background:#e73535; width: 120%;'
- ]) ?>
- </div>
- <div class="col-md-4">
- <button style="border: none; background: transparent; cursor: pointer; margin-left: 5px;">
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
- viewBox="0 0 24 24">
- <path d="M20 11v5a1 1 0 0 1-2 0v-4H7.414l1.293 1.293a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.416l3-3a1 1 0 0 1 1.414 1.416L7.414 10H19a1 1 0 0 1 1 1z"
- fill="grey" stroke="none"/>
- </svg>
- </button>
- </div>
+ </td>
+ <?php } ?>
+ </tr>
+ <tr>
+ <td>
+ <a class="list-group-item list-group-item-action">Розы 80 Эк</a>
+ </td>
+ <?php foreach ($addresses as $address) { ?>
+ <td class="items">
+ <div style="display: flex; align-items: center;">
+ <?= Html::input('text', '', 50, [
+ 'class' => 'btn btn-primary input',
+ 'data-bs-toggle' => 'tooltip',
+ 'data-bs-placement' => 'top',
+ 'title' => $tooltipText,
+
+ ]) ?>
+ <button style="border: none; background: transparent; cursor: pointer; margin-left: 5px;">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+ viewBox="0 0 24 24">
+ <path d="M20 11v5a1 1 0 0 1-2 0v-4H7.414l1.293 1.293a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.416l3-3a1 1 0 0 1 1.414 1.416L7.414 10H19a1 1 0 0 1 1 1z"
+ fill="grey" stroke="none"/>
+ </svg>
+ </button>
</div>
- <!-- </div>-->
- </div>
- </div>
- <?php } ?>
- </div>
+ </td>
+ <?php } ?>
+ </tr>
+ <tr>
+ <td class="subcategory">
+ <a class="list-group-item list-group-item-action">Экзотика</a>
+ </td>
+ </tr>
+ <tr>
+ <td class="subcategory">
+ <a class="list-group-item list-group-item-action">Зелень</a>
+ </td>
+ </tr>
+ <tr>
+ <td class="category">
+ <a class="list-group-item list-group-item-action">Горшечные растения ▲</a>
+ </td>
+ </tr>
+ <tr>
+ <td class="category">
+ <a class="list-group-item list-group-item-action">Сухоцветы ▲</a>
+ </td>
+ </tr>
+ <tr>
+ <td class="category">
+ <a class="list-group-item list-group-item-action">Остальные категории ▲</a>
+ </td>
+ </tr>
+
+ </tbody>
+ </table>
</div>
</div>
+<script>
+ document.addEventListener("DOMContentLoaded", function () {
+ // Изначально скрываем все строки, кроме .category и .head
+ document.querySelectorAll("tr").forEach(row => {
+ if (!row.querySelector(".category") && !row.classList.contains("head")) {
+ row.style.display = "none";
+ }
+ });
+
+ // Обработчик кликов для категорий
+ document.querySelectorAll(".category").forEach(category => {
+ category.addEventListener("click", function () {
+ let isVisible = this.parentElement.nextElementSibling?.style.display === "table-row";
+ let nextRow = this.parentElement.nextElementSibling;
+
+ // Закрываем все вложенные элементы (subcategory + items)
+ while (nextRow && !nextRow.querySelector(".category")) {
+ nextRow.style.display = "none";
+ nextRow = nextRow.nextElementSibling;
+ }
+
+ // Если категория закрывалась, то открываем только подкатегории
+ if (!isVisible) {
+ nextRow = this.parentElement.nextElementSibling;
+ while (nextRow && !nextRow.querySelector(".category")) {
+ if (nextRow.querySelector(".subcategory")) {
+ nextRow.style.display = "table-row";
+ }
+ nextRow = nextRow.nextElementSibling;
+ }
+ }
+ });
+ });
+
+ let activeSubcategory = null; // Текущая открытая подкатегория
+
+ // Обработчик кликов для подкатегорий
+ document.querySelectorAll(".subcategory").forEach(subcategory => {
+ subcategory.addEventListener("click", function () {
+ let isOpening = activeSubcategory !== this;
+
+ // Закрываем текущую открытую подкатегорию и её items
+ if (activeSubcategory) {
+ let prevRow = activeSubcategory.parentElement.nextElementSibling;
+ while (prevRow && !prevRow.querySelector(".subcategory") && !prevRow.querySelector(".category")) {
+ prevRow.style.display = "none";
+ prevRow = prevRow.nextElementSibling;
+ }
+ }
+
+ // Если открываем новую, показываем её items
+ if (isOpening) {
+ let nextRow = this.parentElement.nextElementSibling;
+ while (nextRow && !nextRow.querySelector(".subcategory") && !nextRow.querySelector(".category")) {
+ nextRow.style.display = "table-row";
+ nextRow = nextRow.nextElementSibling;
+ }
+ activeSubcategory = this;
+ } else {
+ activeSubcategory = null;
+ }
+ });
+ });
+ });
+</script>
+
+<style>
+ /* Стили для таблицы */
+ .table {
+ width: 100%;
+ table-layout: fixed; /* Это позволяет фиксировать ширину колонок */
+ overflow-x: auto; /* Это позволяет прокручивать таблицу по горизонтали */
+ border-collapse: collapse; /* Чтобы не было промежутков между ячейками */
+ }
+
+ /* Первая колонка будет фиксированной */
+ .fixed-column {
+ width: 170px; /* Устанавливаем фиксированную ширину для первой колонки */
+ white-space: nowrap; /* Запрещаем перенос текста в ячейке */
+ border-right: 1px solid #ddd; /* Вертикальная линия между колонками */
+ }
+
+ /* Для остальных колонок можно установить фиксированную ширину, если нужно */
+ th, td {
+ width: 300px; /* Пример для остальных колонок */
+ text-align: center; /* Центрируем текст */
+ padding: 10px; /* Немного отступов для улучшения внешнего вида */
+ border-right: 1px solid #ddd; /* Вертикальная линия между колонками */
+ }
+
+ .items .input {
+ width: 100%;
+ }
+
+ .table-wrapper {
+ overflow-x: auto;
+ max-width: 100%;
+ position: relative;
+ }
+
+ .fixed-column {
+ position: sticky;
+ left: 0;
+ background: white;
+ z-index: 2;
+ border-right: 2px solid #ddd;
+ }
+</style>
\ No newline at end of file
projects / erp24_rep / yii-erp24 / .git / commitdiff