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

Сводка

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

Подробности

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

Содержимое

...	...	@@ -1,128 +1,77 @@
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!
	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>
2	2
3		-= Here's some dummy text to show you what the page looks like =
	7	+<br><br>
4	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	47	<!-- Таблица -->
48		-<table class="report-table">
	10	+<table id="myTable" border="1">
49	49	<thead>
50	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>
	13	+ <th>Колонка 1</th>
	14	+ <th>Колонка 2</th>
	15	+ <th>Колонка 3</th>
57	57	</tr>
58	58	</thead>
59	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>
	19	+ <tr data-row="1">
	20	+ <td>1-1</td><td>1-2</td><td>1-3</td>
67	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>
	22	+ <tr data-row="2">
	23	+ <td>2-1</td><td>2-2</td><td>2-3</td>
75	75	</tr>
	25	+ <tr data-row="3">
	26	+ <td>3-1</td><td>3-2</td><td>3-3</td>
	27	+ </tr>
76	76	</tbody>
77	77	</table>
78	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	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}}
	32	+<script>
	33	+ // При загрузке страницы
	34	+ document.addEventListener('DOMContentLoaded', function() {
	35	+ const checkboxesCol = document.querySelectorAll('.toggle-col');
	36	+ const checkboxesRow = document.querySelectorAll('.toggle-row');
	37	+ const table = document.getElementById('myTable');
117	117
	39	+ function updateColumns() {
	40	+ checkboxesCol.forEach(cb => {
	41	+ const colIndex = parseInt(cb.getAttribute('data-col'), 10);
	42	+ const display = cb.checked ? '' : 'none';
118	118
	44	+ // Скрываем/показываем ячейки в каждой строке для нужного столбца
	45	+ table.querySelectorAll('tr').forEach(row => {
	46	+ const cells = row.children;
	47	+ if(cells.length >= colIndex) {
	48	+ cells[colIndex - 1].style.display = display;
	49	+ }
	50	+ });
	51	+ });
	52	+ }
119	119
	54	+ function updateRows() {
	55	+ checkboxesRow.forEach(cb => {
	56	+ const rowNum = cb.getAttribute('data-row');
	57	+ const display = cb.checked ? '' : 'none';
	58	+ const row = table.querySelector('tbody tr[data-row="' + rowNum + '"]');
	59	+ if (row) row.style.display = display;
	60	+ });
	61	+ }
120	120
	63	+ // Навесить обработчики событий на чекбоксы
	64	+ checkboxesCol.forEach(cb => cb.addEventListener('change', () => {
	65	+ updateColumns();
	66	+ }));
121	121
	68	+ checkboxesRow.forEach(cb => cb.addEventListener('change', () => {
	69	+ updateRows();
	70	+ }));
122	122
	72	+ // Инициализация видимости
	73	+ updateColumns();
	74	+ updateRows();
	75	+ });
	76	+</script>
123	123
124		-
125		-
126		-
127		-
128		-