PHuckeruser89,
Извините, но я не нашел там похожее.А зря, на сервере проще делать группировки...
Тогда будет делать на клиенте.
Чтобы ячейки не прыгали, надо сделать фиксированную ширину колонок. Для этого, в стилях таблицы задать layout и width
1.
2.
table-layout:fixed;
width:1290px;
Далее, сразу после <table>, пишем ширину каждой колонки <col width=”...”> <col width=”...”> <col width=”...”> ....
По каким столбцам идет группировка, по тем полям и надо сортировать в SQL.
Универсальный алгоритм, который делает любое количество групп (количество колонок в таблице минус 1)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
<!DOCTYPE html>
<html>
<head>
<style>
table {
table-layout:fixed;
width:1290px;
border-collapse:collapse;
font:400 10pt/19px Arial,'MS Sans Serif','sans-serif';
}
table th {
background:#4682B4;
color:#fff;
}
table td, th {
padding:3px;
border:1px solid #D3D3D3;
}
.treetable label a{
cursor:pointer;
color:#fff;
font-weight:bold;
padding-left:16px;
}
.treetable tr {
display:none;
}
.treetable thead tr {
display:table-row;
}
.treetable .lev1 {
background:#6E9ECA;
display:table-row;
}
.treetable .lev2 {background:#708090;}
.treetable .lev3 {background:#8FA0B0;}
.treetable .lev4 {background:#8FA0B0;}
.treetable .lev5 {background:#8FA0B0;}
input[type="checkbox"]{
display:none;
}
input + a {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
no-repeat 0px 2px;
}
input:checked + a{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
no-repeat 0px 2px;
}
</style>
</head>
<body>
Количество уровней:
<select id="cbo1">
<option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option>
</select>
<button onclick="MakeGroupTable();" id="cmdMakeGroup">Сгруппировать</button>
<button onclick="SwapAll(false);" id="cmdCollapseAll" disabled>Свернуть все</button>
<button onclick="SwapAll(true);" id="cmdExpandAll" disabled>Развернуть все</button>
<a href="extended.php"></a>
<br><br>
<table id="MyTable">
<col width=100> <col width=120> <col width=130> <col width=300> <col width=340> <col width=300>
<thead>
<tr>
<th>Номер Счетчика</th>
<th>ID</th>
<th>Fields</th>
<th>Description</th>
<th>
<form action="/192.168.144.6/example.php" method="get">
Введите дни(от 1 до 30):<input type="text" name="name"><br>
<input type="submit" value="Считать" style="margin:10px 0 5px 0;">
<a href="example.php" ><input type = "button" value = "Сброс" onclick=""></a>
</form>
</th>
<th>Значение</th>
</tr>
</thead>
<tbody>
<tr> <td>111111111</td> <td>1111-0000</td> <td>Dark Reign</td> <td>Защитить Исследовательский Центр Парения</td> <td>Освободить комплекс по добыче воды</td> <td>Уровни 6 и 5</td> </tr>
<tr> <td>111111111</td> <td>1111-0000</td> <td>Beasts and Bumpkins</td> <td>Действие игры происходит в сельской местности</td> <td>значительную роль играет ведение хозяйства</td> <td>Однако в игре есть и боевая составляющая</td> </tr>
<tr> <td>111111111</td> <td>1111-0000</td> <td>aa</td> <td>Д1111</td> <td>12sgf</td> <td>ettfgsds gsg</td> </tr>
<tr> <td>111111111</td> <td>1111-0000</td> <td>aa</td> <td>Д1111</td> <td>12sgf</td> <td>ettfgsds gsg</td> </tr>
<tr> <td>111111111</td> <td>1111-0000</td> <td>aa</td> <td>Д1111</td> <td>12sgf</td> <td>ettfgsds gsg</td> </tr>
<tr> <td>111111111</td> <td>1111-0000</td> <td>aa</td> <td>Д1111</td> <td>12sgf</td> <td>ettfgsds gsg</td> </tr>
<tr> <td>111111111</td> <td>1111-0000</td> <td>aa</td> <td>Д1111</td> <td>12sgf</td> <td>ettfgsds gsg</td> </tr>
<tr> <td>111111111</td> <td>1111-1111</td> <td>The Incredible Machine</td> <td>Замечательная логическая игра</td> <td>При помощи подручных средств, создаем самые невероятные механизмы</td> <td>Разработчик:Dynamix, Издательство:Sierra</td> </tr>
<tr> <td>111111111</td> <td>1111-1111</td> <td>Сапёр</td> <td>Компьютерная игра головоломка</td> <td>Сапёр для Windows имеет интерактивное поле</td> <td>Результат сильно зависит от расположения мин</td> </tr>
<tr> <td>111111111</td> <td>1111-1111</td> <td>Сапёр</td> <td>sdfgsd</td> <td>Сsdfsfе</td> <td>sdfds</td> </tr>
<tr> <td>111111111</td> <td>1111-2222</td> <td>The Incredible Machine - 2</td> <td>Замечательная логическая игра</td> <td>При помощи подручных средств, создаем самые невероятные механизмы</td> <td>Разработчик:Dynamix, Издательство:Sierra</td> </tr>
<tr> <td>111111111</td> <td>1111-2222</td> <td>Сапёр</td> <td>Компьютерная игра головоломка</td> <td>Сапёр для Windows имеет интерактивное поле</td> <td>Результат сильно зависит от расположения мин</td> </tr>
<tr> <td>222222222</td> <td>2222-0000</td> <td>The Asylum</td> <td>Вампиры против зомби</td> <td>Война миров Г.Д. Уэллса</td> <td>Король затерянного мира</td> </tr>
<tr> <td>222222222</td> <td>2222-0000</td> <td>20th Century Fox</td> <td>Звёздные войны</td> <td>Аватар</td> <td>Люди икс</td> </tr>
<tr> <td>222222222</td> <td>2222-1111</td> <td>Warner Bros.</td> <td>Хоббит</td> <td>Зачарованные</td> <td>Тайны Смолвилля</td> </tr>
<tr> <td>222222222</td> <td>2222-1111</td> <td>СТВ</td> <td>Алёша Попович и Тугарин Змей</td> <td>Добрыня Никитич и Змей Горыныч</td> <td>Илья Муромец и Соловей-Разбойник</td> </tr>
</tbody>
</table>
<script>
document.getElementById('cmdMakeGroup').disabled = false;
document.getElementById('cmdCollapseAll').disabled = true;
document.getElementById('cmdExpandAll').disabled = true;
function MakeGroupTable () {
var MyTable = document.getElementById('MyTable');
var cellCount = MyTable.rows[1].cells.length;
// Количесиво уровней в группировке (сокр. от CountLevelGroup)
var clg = document.getElementById('cbo1').value * 1;
if (clg == 0) {return;}
var gr = []; // массив
gr.length = clg;
for (j=0; j < clg; j++) {
gr[j] = MyTable.rows[1].cells[j].innerHTML + 'q'; // любая буква, чтобы было отличие в 1-й строке
}
var CurrentValue = gr[0];
var cnt = 0; // счетчик подряд встречающихся несовпадений
MyTable.className = 'treetable';
var idx = 1; // индекс текущей строки
while (idx < MyTable.rows.length) {
for (j=0; j < clg; j++) {
if (gr[j] != MyTable.rows[idx].cells[j].innerHTML) {
gr[j] = MyTable.rows[idx].cells[j].innerHTML;
MyTable.insertRow(idx);
MyTable.rows[idx].className = 'lev' + (j+1).toString();
for (i=0; i < cellCount; i++) {MyTable.rows[idx].insertCell(i);}
MyTable.rows[idx].cells[j].innerHTML = '<label><input type="checkbox"><a onclick="sh(this)">' + gr[j] + '</a></label>';
cnt++;
idx++;
} else {
MyTable.rows[idx].className = 'lev' + (clg+1).toString();
MyTable.rows[idx].style.background = '#fff';
continue;
}
}
// если все элементы массива <> текущей строке, то значит мы сделали только группирующие строки, и текущий индекс строки (idx) надо уменьшить, иначе ниже по тексту idx++ сделает "перепрыг" через хорошую строку с данными
if (cnt == clg) {idx = idx-1;}
cnt = 0;
idx++;
if (MyTable.rows[idx-1].className == 'lev' + (clg+1).toString()) {for (j=0; j < clg; j++) {MyTable.rows[idx-1].cells[j].innerHTML = '';}}
}
document.getElementById('cmdMakeGroup').disabled = true;
document.getElementById('cmdCollapseAll').disabled = false;
document.getElementById('cmdExpandAll').disabled = false;
}
function ResetAll() {
var cs = document.getElementsByTagName('input');
for (i=0; i < cs.length; i++) {
if (cs[i].type == 'checkbox') {
cs[i].checked = false;
}
}
}
function ShowLevel(row,lv) {
var tBody = row.parentNode;
var i = row.rowIndex;
row = tBody.rows[i]; // Попытка перейти к следующей строке
while (row && row.className.substring(3)*1 > lv) {
if (row.className.substring(3)*1 == lv+1) {
row.style.display = 'table-row';
if ((row.querySelector('td input')) && row.querySelector('td input').checked) {
ShowLevel(row,lv+1);
}
}
i+=1;
row = tBody.rows[i];
}
}
function HideLevel(row,lv) {
var i = row.rowIndex;
var tBody = row.parentNode;
row = tBody.rows[i]; // Попытка перейти к следующей строке
while (row && row.className.substring(3)*1 > lv) {
row.style.display = 'none';
i+=1;
row = tBody.rows[i];
}
}
function sh(el) {
var row = el.parentNode.parentNode.parentNode;
var lv = row.className.substring(3)*1; // Уровень строки, циферка после 'lev'
if (row.querySelector('td input').checked) {
HideLevel(row,lv);
} else {
ShowLevel(row,lv);
}
}
function SwapAll(b) {
var tbl = document.getElementsByClassName('treetable')[0];
for (i=1; i < tbl.rows.length; i++) {
if (tbl.rows[i].className != 'lev1') {
if (b) {tbl.rows[i].style.display = 'table-row';}
else {tbl.rows[i].style.display = 'none';}
}
if (tbl.rows[i].querySelector('td input')) {tbl.rows[i].querySelector('td input').checked = b;}
}
}
</script>
</body>
</html>
