Перейти к содержимому

Исходный код вики Sandbox Test Page 3

Версия 4.1 от Руслан Савельев на 2025/06/04 10:07
Последние авторы
1 {{html clean="false"}}
2 <style>
3 .report-table {
4 border-collapse: collapse;
5 width: 100%;
6 margin-top: 1em;
7 }
8 .report-table th, .report-table td {
9 border: 1px solid #ccc;
10 padding: 4px 8px;
11 text-align: left;
12 }
13 .hidden-col {
14 display: none;
15 }
16 </style>
17
18 <!-- Панель настроек -->
19 <b>Настройка столбцов:</b><br>
20
21 <!-- Реализация -->
22 <label>
23 <input type="checkbox" id="group-realization" onclick="toggleGroup('realization')"> Реализация
24 </label>
25 <div id="realization-options" style="margin-left: 1.5em; display: none;">
26 <label><input type="checkbox" class="realization-checkbox" onclick="toggleColumn('qty')"> Количество</label><br>
27 <label><input type="checkbox" class="realization-checkbox" onclick="toggleColumn('price')"> Цена</label><br>
28 <label><input type="checkbox" class="realization-checkbox" onclick="toggleColumn('sum')"> Сумма</label><br>
29 </div>
30
31 <!-- Поставки -->
32 <label>
33 <input type="checkbox" id="group-supply" onclick="toggleGroup('supply')"> Поставки
34 </label>
35 <div id="supply-options" style="margin-left: 1.5em; display: none;">
36 <label><input type="checkbox" class="supply-checkbox" onclick="toggleColumn('supplier')"> Поставщик</label><br>
37 <label><input type="checkbox" class="supply-checkbox" onclick="toggleColumn('arrival')"> Дата поступления</label><br>
38 </div>
39
40 <!-- Таблица -->
41 <table class="report-table">
42 <thead>
43 <tr>
44 <th>Товар</th>
45 <th class="col-qty hidden-col">Количество</th>
46 <th class="col-price hidden-col">Цена</th>
47 <th class="col-sum hidden-col">Сумма</th>
48 <th class="col-supplier hidden-col">Поставщик</th>
49 <th class="col-arrival hidden-col">Дата поступления</th>
50 </tr>
51 </thead>
52 <tbody>
53 <tr>
54 <td>Баллон газовый</td>
55 <td class="col-qty hidden-col">5</td>
56 <td class="col-price hidden-col">650.00</td>
57 <td class="col-sum hidden-col">3250.00</td>
58 <td class="col-supplier hidden-col">ГазСнаб</td>
59 <td class="col-arrival hidden-col">01.06.2025</td>
60 </tr>
61 <tr>
62 <td>Огнетушитель</td>
63 <td class="col-qty hidden-col">2</td>
64 <td class="col-price hidden-col">1200.00</td>
65 <td class="col-sum hidden-col">2400.00</td>
66 <td class="col-supplier hidden-col">Безопасность+</td>
67 <td class="col-arrival hidden-col">28.05.2025</td>
68 </tr>
69 </tbody>
70 </table>
71
72 <script type="text/javascript">
73 function toggleGroup(group) {
74 const groupBox = document.getElementById('group-' + group);
75 const options = document.getElementById(group + '-options');
76 const checkboxes = options.querySelectorAll('input[type=checkbox]');
77 if (groupBox.checked) {
78 options.style.display = 'block';
79 } else {
80 options.style.display = 'none';
81 checkboxes.forEach(cb => {
82 cb.checked = false;
83 toggleColumn(cb.parentNode.textContent.trim().toLowerCase(), false);
84 });
85 if (group === 'realization') {
86 toggleColumn('qty', false);
87 toggleColumn('price', false);
88 toggleColumn('sum', false);
89 }
90 if (group === 'supply') {
91 toggleColumn('supplier', false);
92 toggleColumn('arrival', false);
93 }
94 }
95 }
96
97 function toggleColumn(colName, force) {
98 const show = force !== undefined ? force : event.target.checked;
99 const cells = document.querySelectorAll('.col-' + colName);
100 cells.forEach(cell => {
101 if (show) {
102 cell.classList.remove('hidden-col');
103 } else {
104 cell.classList.add('hidden-col');
105 }
106 });
107 }
108 </script>
109 {{/html}}
110
111
112
113
114
115
116
117
118
119
120
121
122