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

Сводка

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

Подробности

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

Содержимое

...	...	@@ -1,115 +1,78 @@
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>
	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>
17	17
18		-<!-- Панель настроек -->
19		-<b>Настройка столбцов:</b><br>
	7	+<br><br>
20	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	40	<!-- Таблица -->
41		-<table class="report-table">
	10	+<table id="myTable" border="1">
42	42	<thead>
43	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>
	13	+ <th>Колонка 1</th>
	14	+ <th>Колонка 2</th>
	15	+ <th>Колонка 3</th>
50	50	</tr>
51	51	</thead>
52	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>
	19	+ <tr data-row="1">
	20	+ <td>1-1</td><td>1-2</td><td>1-3</td>
60	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>
	22	+ <tr data-row="2">
	23	+ <td>2-1</td><td>2-2</td><td>2-3</td>
68	68	</tr>
	25	+ <tr data-row="3">
	26	+ <td>3-1</td><td>3-2</td><td>3-3</td>
	27	+ </tr>
69	69	</tbody>
70	70	</table>
71	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);
	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	+ });
84	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	94	}
95		- }
96	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}}
	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	+ }
110	110
	62	+ // Навесить обработчики событий на чекбоксы
	63	+ checkboxesCol.forEach(cb => cb.addEventListener('change', () => {
	64	+ updateColumns();
	65	+ }));
111	111
	67	+ checkboxesRow.forEach(cb => cb.addEventListener('change', () => {
	68	+ updateRows();
	69	+ }));
112	112
	71	+ // Инициализация видимости
	72	+ updateColumns();
	73	+ updateRows();
	74	+ });
	75	+</script>
113	113
114	114
115	115
...	...	@@ -117,6 +117,3 @@
117	117
118	118
119	119
120		-
121		-
122		-