Изменения документа Sandbox Test Page 3

Сводка

• Свойства страницы (1 изменено, 0 добавлено, 0 удалено)

Подробности

Свойства страницы

Содержимое

...	...	@@ -1,78 +1,115 @@
1		-<!-- Чекбоксы управления -->
2		-<label><input type="checkbox" class="toggle-col" data-col="2" checked> Показать столбец 2</label>
3		-<label><input type="checkbox" class="toggle-col" data-col="3" checked> Показать столбец 3</label>
4		-<label><input type="checkbox" class="toggle-row" data-row="2" checked> Показать строку 2</label>
5		-<label><input type="checkbox" class="toggle-row" data-row="3" checked> Показать строку 3</label>
	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>
6	6
7		-<br><br>
	18	+<!-- Панель настроек -->
	19	+<b>Настройка столбцов:</b><br>
8	8
	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	+
9	9	<!-- Таблица -->
10		-<table id="myTable" border="1">
	41	+<table class="report-table">
11	11	<thead>
12	12	<tr>
13		- <th>Колонка 1</th>
14		- <th>Колонка 2</th>
15		- <th>Колонка 3</th>
	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>
16	16	</tr>
17	17	</thead>
18	18	<tbody>
19		- <tr data-row="1">
20		- <td>1-1</td><td>1-2</td><td>1-3</td>
	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>
21	21	</tr>
22		- <tr data-row="2">
23		- <td>2-1</td><td>2-2</td><td>2-3</td>
	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>
24	24	</tr>
25		- <tr data-row="3">
26		- <td>3-1</td><td>3-2</td><td>3-3</td>
27		- </tr>
28	28	</tbody>
29	29	</table>
30	30
31		-<script>
32		- // При загрузке страницы
33		- document.addEventListener('DOMContentLoaded', function() {
34		- const checkboxesCol = document.querySelectorAll('.toggle-col');
35		- const checkboxesRow = document.querySelectorAll('.toggle-row');
36		- const table = document.getElementById('myTable');
37		-
38		- function updateColumns() {
39		- checkboxesCol.forEach(cb => {
40		- const colIndex = parseInt(cb.getAttribute('data-col'), 10);
41		- const display = cb.checked ? '' : 'none';
42		-
43		- // Скрываем/показываем ячейки в каждой строке для нужного столбца
44		- table.querySelectorAll('tr').forEach(row => {
45		- const cells = row.children;
46		- if(cells.length >= colIndex) {
47		- cells[colIndex - 1].style.display = display;
48		- }
49		- });
	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);
50	50	});
	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	+ }
51	51	}
	95	+ }
52	52
53		- function updateRows() {
54		- checkboxesRow.forEach(cb => {
55		- const rowNum = cb.getAttribute('data-row');
56		- const display = cb.checked ? '' : 'none';
57		- const row = table.querySelector('tbody tr[data-row="' + rowNum + '"]');
58		- if (row) row.style.display = display;
59		- });
60		- }
	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}}
61	61
62		- // Навесить обработчики событий на чекбоксы
63		- checkboxesCol.forEach(cb => cb.addEventListener('change', () => {
64		- updateColumns();
65		- }));
66	66
67		- checkboxesRow.forEach(cb => cb.addEventListener('change', () => {
68		- updateRows();
69		- }));
70	70
71		- // Инициализация видимости
72		- updateColumns();
73		- updateRows();
74		- });
75		-</script>
76	76
77	77
78	78
...	...	@@ -80,3 +80,6 @@
80	80
81	81
82	82
	120	+
	121	+
	122	+