Исходный код вики Sandbox Test Page 3
Версия 2.1 от Руслан Савельев на 2025/06/04 09:59
Последние авторы
| author | version | line-number | content |
|---|---|---|---|
| 1 | Click on **"Edit"** and modify the contents of this page, then click on **"Save & View"** to see how they look like on your page! | ||
| 2 | |||
| 3 | = Here's some dummy text to show you what the page looks like = | ||
| 4 | |||
| 5 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | ||
| 6 | |||
| 7 | |||
| 8 | {{html clean="false"}} | ||
| 9 | <style> | ||
| 10 | .report-table { | ||
| 11 | border-collapse: collapse; | ||
| 12 | width: 100%; | ||
| 13 | margin-top: 1em; | ||
| 14 | } | ||
| 15 | .report-table th, .report-table td { | ||
| 16 | border: 1px solid #ccc; | ||
| 17 | padding: 4px 8px; | ||
| 18 | text-align: left; | ||
| 19 | } | ||
| 20 | .hidden-col { | ||
| 21 | display: none; | ||
| 22 | } | ||
| 23 | </style> | ||
| 24 | |||
| 25 | <!-- Панель настроек --> | ||
| 26 | <b>Настройка столбцов:</b><br> | ||
| 27 | |||
| 28 | <!-- Реализация --> | ||
| 29 | <label> | ||
| 30 | <input type="checkbox" id="group-realization" onclick="toggleGroup('realization')"> Реализация | ||
| 31 | </label> | ||
| 32 | <div id="realization-options" style="margin-left: 1.5em; display: none;"> | ||
| 33 | <label><input type="checkbox" class="realization-checkbox" onclick="toggleColumn('qty')"> Количество</label><br> | ||
| 34 | <label><input type="checkbox" class="realization-checkbox" onclick="toggleColumn('price')"> Цена</label><br> | ||
| 35 | <label><input type="checkbox" class="realization-checkbox" onclick="toggleColumn('sum')"> Сумма</label><br> | ||
| 36 | </div> | ||
| 37 | |||
| 38 | <!-- Поставки --> | ||
| 39 | <label> | ||
| 40 | <input type="checkbox" id="group-supply" onclick="toggleGroup('supply')"> Поставки | ||
| 41 | </label> | ||
| 42 | <div id="supply-options" style="margin-left: 1.5em; display: none;"> | ||
| 43 | <label><input type="checkbox" class="supply-checkbox" onclick="toggleColumn('supplier')"> Поставщик</label><br> | ||
| 44 | <label><input type="checkbox" class="supply-checkbox" onclick="toggleColumn('arrival')"> Дата поступления</label><br> | ||
| 45 | </div> | ||
| 46 | |||
| 47 | <!-- Таблица --> | ||
| 48 | <table class="report-table"> | ||
| 49 | <thead> | ||
| 50 | <tr> | ||
| 51 | <th>Товар</th> | ||
| 52 | <th class="col-qty hidden-col">Количество</th> | ||
| 53 | <th class="col-price hidden-col">Цена</th> | ||
| 54 | <th class="col-sum hidden-col">Сумма</th> | ||
| 55 | <th class="col-supplier hidden-col">Поставщик</th> | ||
| 56 | <th class="col-arrival hidden-col">Дата поступления</th> | ||
| 57 | </tr> | ||
| 58 | </thead> | ||
| 59 | <tbody> | ||
| 60 | <tr> | ||
| 61 | <td>Баллон газовый</td> | ||
| 62 | <td class="col-qty hidden-col">5</td> | ||
| 63 | <td class="col-price hidden-col">650.00</td> | ||
| 64 | <td class="col-sum hidden-col">3250.00</td> | ||
| 65 | <td class="col-supplier hidden-col">ГазСнаб</td> | ||
| 66 | <td class="col-arrival hidden-col">01.06.2025</td> | ||
| 67 | </tr> | ||
| 68 | <tr> | ||
| 69 | <td>Огнетушитель</td> | ||
| 70 | <td class="col-qty hidden-col">2</td> | ||
| 71 | <td class="col-price hidden-col">1200.00</td> | ||
| 72 | <td class="col-sum hidden-col">2400.00</td> | ||
| 73 | <td class="col-supplier hidden-col">Безопасность+</td> | ||
| 74 | <td class="col-arrival hidden-col">28.05.2025</td> | ||
| 75 | </tr> | ||
| 76 | </tbody> | ||
| 77 | </table> | ||
| 78 | |||
| 79 | <script type="text/javascript"> | ||
| 80 | function toggleGroup(group) { | ||
| 81 | const groupBox = document.getElementById('group-' + group); | ||
| 82 | const options = document.getElementById(group + '-options'); | ||
| 83 | const checkboxes = options.querySelectorAll('input[type=checkbox]'); | ||
| 84 | if (groupBox.checked) { | ||
| 85 | options.style.display = 'block'; | ||
| 86 | } else { | ||
| 87 | options.style.display = 'none'; | ||
| 88 | checkboxes.forEach(cb => { | ||
| 89 | cb.checked = false; | ||
| 90 | toggleColumn(cb.parentNode.textContent.trim().toLowerCase(), false); | ||
| 91 | }); | ||
| 92 | if (group === 'realization') { | ||
| 93 | toggleColumn('qty', false); | ||
| 94 | toggleColumn('price', false); | ||
| 95 | toggleColumn('sum', false); | ||
| 96 | } | ||
| 97 | if (group === 'supply') { | ||
| 98 | toggleColumn('supplier', false); | ||
| 99 | toggleColumn('arrival', false); | ||
| 100 | } | ||
| 101 | } | ||
| 102 | } | ||
| 103 | |||
| 104 | function toggleColumn(colName, force) { | ||
| 105 | const show = force !== undefined ? force : event.target.checked; | ||
| 106 | const cells = document.querySelectorAll('.col-' + colName); | ||
| 107 | cells.forEach(cell => { | ||
| 108 | if (show) { | ||
| 109 | cell.classList.remove('hidden-col'); | ||
| 110 | } else { | ||
| 111 | cell.classList.add('hidden-col'); | ||
| 112 | } | ||
| 113 | }); | ||
| 114 | } | ||
| 115 | </script> | ||
| 116 | {{/html}} |