powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как сделать список раскрывающимся?
74 сообщений из 74, показаны все 3 страниц
как сделать список раскрывающимся?
    #38653136
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
нужно вывести таблицу в случае совпадения значений в первом столбе в нескольких подряд идущих строках (возможно, данные следует отсортировать по этому значению, и думаю там не хронологический порядок) выводить только первую строку, остальные скрыть, с возможностью открывания по упомянутой строке.


Сгенерировал такую разметку


<table id="data-table">
<tr><td class="clicker" data-id="g12">12</td><td>...</td></tr>
<tbody id="g12" class="hidden">
<tr><td>12</td><td>...</td></tr>
<tr><td>12</td><td>...</td></tr>
</tbody>
<tr><td class="clicker" data-id="g14">14</td><td>...</td></tr>
<tbody id="g14" class="hidden">
<tr><td>14</td><td>...</td></tr>
<tr><td>14</td><td>...</td></tr>
</tbody>
</table>


взял код JS
$("#data-table").on('click', '.clicker', function(){
var relId = $(this).data('id);
$('#' + relId).toggle();
});



и CSS конечно.
.hidden { display: none; }



вроде бы все есть. только вот как сделать с этим это: в первом столбце есть значения. в нем есть много одинаковых. и нужно сделать кнопку для всех значений только по одной каждому. то есть когда нажать допустим
на 37130550488 то этот список раскрывался и выводились все 37130550488. и так дальше.
И значение других столбцов должно меняться соответственно этому столбцу.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38653168
anvano
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Вы не тот форум выбрали.
Это к JavaScript относится больше.

А по теме - присвоить всем "одинаковым" одинаковый идентификатор. А в JS в цикле перебирать элементы и раскрывать.
JQuery вроде может селекторами делать это автоматически, без необходимости городить вручную циклы перебора.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38653217
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
вы не правильно поняли.
вот мой код. думаю правильно поймете чего я не могу сделать :)

Код: html
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.
<html>
    <head>
    <title>Extended Report</title>
    <link href="css/frombase.css" type="text/css" rel="stylesheet">
     </head>
	<body>
    <center>
    <table border="1" height="" width="" id="table1">
            
             <tr >
                <td id="first">НомерСчетчика</td> 
                <td id="first">ID</td>
                <td id="first">Fields</td>
                <td id="first">Description</td>
                <td id="first">

                        <form action="<?=$_SERVER["PHP_SELF"]?>" method="get">
                            Введите дни(от 1 до 30):
                            <input type="text" name="name"><br>
                        <input type = "submit" value = "Считать">
                        <input type = "button" value = "Сброс" onclick="">
                        </form>
                        </td>
                <td id="first">Значение</td>
                
             </tr>
	<?php
  $connect = mysql_connect("********", "*******", "*******")  or die("Ошибка соединения!");
    mysql_select_db("smartvend", $connect);
  
 
if (isset($_GET["name"]))
{
  $name = $_GET["name"];
  $query ="SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
 FROM
 amr_fields fields, amr_read_history history
 WHERE
 fields.ID=history.FieldName AND ExecDate>= SUBDATE(CURRENT_DATE, INTERVAL $name DAY) 
 ORDER BY ExecDate ASC";
}
else {
        $result = mysql_query("SELECT  history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue 
                        FROM  
                            amr_fields fields, amr_read_history history 
                        WHERE 
                            fields.ID=history.FieldName AND ExecDate>= '(CURDATE()'
                            ORDER BY execdate DESC",$connect);
                         
        while ($data = mysql_fetch_row($result))
        {
            echo"<tr>";
             echo"<td>{$data[0]}</td>";
             echo"<td>{$data[1]}</td>";
             echo"<td>{$data[2]}</td>";
             echo"<td>{$data[3]}</td>";
             echo"<td>{$data[4]}</td>";
             echo"<td>{$data[5]}</td>";
            echo"</tr>";
        }    
        }
 
$sql = mysql_query($query) or die("<p>Выберите дни</p>");
 
while ($data = mysql_fetch_row($sql))
{
  echo"<tr>";
  echo"<td>{$data[0]}</td>";  
  echo"<td>{$data[1]}</td>";
  echo"<td>{$data[2]}</td>";
  echo"<td>{$data[3]}</td>";
  echo"<td>{$data[4]}</td>";
  echo"<td>{$data[5]}</td>";
  echo"</tr>";
}
mysql_close();
 

    ?>
    </table>
    </center>
	</body>
</html>
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38653226
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
теперь, как сделать с этим это: в первом столбце есть значения. в нем есть много одинаковых. и нужно сделать кнопку для всех значений только по одной каждому. то есть когда нажать допустим
на 37130550488 то этот список раскрывался и выводились все 37130550488. и так дальше.
И значение других столбцов должно меняться соответственно этому столбцу.

Модератор: Тема перенесена из форума "PHP, Perl, Python".
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38653229
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
вот скрин того что у меня есть
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38653232
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
вот скрин того что у меня есть
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38653284
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

...вам фильтр в заголовках таблицы а-ля Эксель сделать нужно? ... вообще-то knockout.js это может, но не так просто ...
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38653295
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

решал похожие задачи. Правда серверную часть делал не на PHP, а на Delphi (обычный ISAPI-модуль). Алгоритм такой:
- делаем выборку из базу
- сортируем по первым столбцам (те, которые будут в группе) В зависимости от ситуации, сортировать можно и на сервере...
- двигаемся по отсортированному Recordset и формируем HTML, как в этом шаблоне http://jsfiddle.net/NZaw4/10/

Достоинства метода:
- простая верстка (обычная плоская таблица)
- легко формируется на сервере (например из SQL-запроса)
- минимум JavaScript
В моем случае, 4 тыс. строк формировались за секунду, конечный HTML был ~ 150 Кб. Скорость высокая, манагеры довольны :)

Еще как вариант использовать продвинутую библиотеку, например Kendo . Здесь в примере, достаточно мышью перетащить любые заголовки, для получения группировок.

З.Ы. Эти таблицы с группировками умеют делать отчетные системы типа MS Reporting, Oracle BI и т.д.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38653993
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
user89,

Да, хорошая идея. Но у меня тут все почти готово. Осталось только сделать кнопку которая скрывает\раскрывает сгруппированные записи в таблице из БД. Только я не знаю как это сделать. ((
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654047
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

у каждой строки должен быть признак, который отвечает за уровень в группе. Или через ID (типа 1_1, 1_2, 1_3, 2_1, 2_2) или
через класс (lev1, lev2)
Потом двигаемся вниз от строки по которой щелкнули, пока соблюдается условие по ID (или классу)
Далее у строки display = 'none' или display = 'table-row' ...
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654101
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
user89,

вот если бы я мог присвоить ID каждой строке(. у меня оно автоматически выходит через
Код: php
1.
2.
3.
4.
5.
6.
7.
8.
 echo"<tr>";
             echo"<td>{$data[0]}</td>";
             echo"<td>{$data[1]}</td>";
             echo"<td>{$data[2]}</td>";
             echo"<td>{$data[3]}</td>";
             echo"<td>{$data[4]}</td>";
             echo"<td>{$data[5]}</td>";
            echo"</tr>";



и у меня нет никаких вариантов.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654102
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
уже неделю голову ломаю. Я просто новичок и трудновато мне
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654202
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

у Вас во втором сообщении есть длинный код, где повторяется id="first"
Код: html
1.
2.
3.
4.
5.
6.
<td id="first">НомерСчетчика</td> 
                <td id="first">ID</td>
                <td id="first">Fields</td>
                <td id="first">Description</td>
                <td id="first">
...

id в коде документа должен быть в единственном экземпляре , иными словами, встречаться только один раз. Скорее всего должно быть <td class="first">
Далее идет правильный select с сортировкой. PHP я не знаю, вот псевдокод, надо перевести на PHP. Смысл такой: двигаемся по отсортированной выборке и формируем таблицу. В 1-м столбце сравниваем текущую ячейку и предыдущую. Если отличаются, то это 1-й уровень. Если совпадают - то второй уровень.
Код: php
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
CurrentValue = '';
while ($data = mysql_fetch_row($result)) {
  if $data[0] <> CurrentValue then {
    CurrentValue = $data[0];
    echo"<tr class=lev1>";
    echo"<td>&#160;</td>";
    echo"<td>&#160;</td>";
    echo"</tr>";
  } else {
    echo"<tr class=lev2>";
    echo"<td>{$data[1]}</td>";
    echo"<td>{$data[2]}</td>";
    echo"</tr>";
  }
}


Цель: вместо
Код: php
1.
echo"<tr>";

сделать
Код: php
1.
2.
3.
echo"<tr class=lev1>";
...
echo"<tr class=lev2>";

и воспользоваться скриптиком из http://jsfiddle.net/NZaw4/10/
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654257
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
id first Это с CSS :)(ну вы это поняли) да, можно и в class'е задать. Мне кинули такую идею: "я бы обработал изначально данные перед выводом. сгруппировав их в массив, по этому самому номеру, и потом выводил в таблице согласно группам, а группу можно вывести в отдельном диве или любом другом удобном элементе, и отображать скрывать его сколько угодно."

что на это скажете? :)
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654272
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
а "скриптик" я взял такой:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<script type="text/javascript">
           
            function showHide(element_id) {
                //Если элемент с id-шником element_id существует
                if (document.getElementById(element_id)) { 
                    //Записываем ссылку на элемент в переменную obj
                    var obj = document.getElementById(element_id); 
                    //Если css-свойство display не block, то: 
                    if (obj.style.display != "block") { 
                        obj.style.display = "block"; //Показываем элемент
                    }
                    else obj.style.display = "none"; //Скрываем элемент
                }
                //Если элемент с id-шником element_id не найден, то выводим сообщение
                else alert("Элемент с id: " + element_id + " не найден!"); 
            }   
        </script>
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654298
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

...вы не хотите просто вставить в заголовки таблицы dropdown-списки, которые будут формироваться запросом к SQL 'select DISTINCT' ... ?
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654305
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
...вы не хотите просто вставить в заголовки таблицы dropdown-списки, которые будут формироваться запросом к SQL 'select DISTINCT' ... ? вот мы и поняли друг-друга :)

я хочу dropdown-списки поставить на строку. допустим если у меня в списке 15 одинаковых значений(допустим цифру 123456), то взять 1 из них и сделать раскрывающийся кнопкой, а остальные 14 скрыть. И при нажатии на эту кнопку они раскрывались и при еще одном клике обратно скрыть. :)
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654332
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker...вы не хотите просто вставить в заголовки таблицы dropdown-списки, которые будут формироваться запросом к SQL 'select DISTINCT' ... ? вот мы и поняли друг-друга :)

я хочу dropdown-списки поставить на строку. допустим если у меня в списке 15 одинаковых значений(допустим цифру 123456), то взять 1 из них и сделать раскрывающийся кнопкой, а остальные 14 скрыть. И при нажатии на эту кнопку они раскрывались и при еще одном клике обратно скрыть. :)

... может вам посмотреть реализации баянов, то бишь, accordeon :) ??? ... По-моему, это больше подходит ....
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654338
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,
На JavaScript. Обычная таблица становится группирующей
Код: html
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.
<!DOCTYPE html>
<html>
<head>
<style>
table {
	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;
}
input[type="checkbox"]{
	display:none;
}
input + a {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 5px;
}
input:checked + a{
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 5px;
}
td+td+td {text-align:right;}
</style>
</head>
<body>
<button onclick="MakeGroupTable();" id="cmdMakeGroup">Сгруппировать</button>
<button onclick="SwapAll(false);" id="cmdCollapseAll" disabled>Свернуть все</button>
<button onclick="SwapAll(true);" id="cmdExpandAll" disabled>Развернуть все</button>
<br><br>
<table id="MyTable">
<col width=100> <col width=150>
<thead>
	<tr><th>ФИО</th> <th>Задача</th> <th>&#160; План &#160;</th> <th>&#160; Факт &#160;</th> </tr>
</thead>
<tr> <td>Иванов</td> <td>Легкая задача</td> <td>10</td> <td>20</td> </tr>
<tr> <td>Иванов</td> <td>Средняя задача</td> <td>8</td> <td>21</td> </tr>
<tr> <td>Иванов</td> <td>Сложная задача</td> <td>14</td> <td>17</td> </tr>

<tr> <td>Петров</td> <td>Непростой алгоритм</td> <td>100</td> <td>200</td> </tr>
<tr> <td>Петров</td> <td>Сверхурочные затраты</td> <td>80</td> <td>210</td> </tr>

<tr> <td>Сидоров</td> <td>Анализ</td> <td>5</td> <td>7</td> </tr>
<tr> <td>Сидоров</td> <td>Доработка</td> <td>15</td> <td>14</td> </tr>
<tr> <td>Сидоров</td> <td>Тестирование</td> <td>25</td> <td>22</td> </tr>
</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 rowCount = MyTable.rows.length;
	var cellCount = MyTable.rows[1].cells.length;
	var idx = 1;
	var CurrentValue = '';

	MyTable.className = 'treetable';

	while (idx < rowCount) {
		if (CurrentValue != MyTable.rows[idx].cells[0].innerHTML) {
			CurrentValue = MyTable.rows[idx].cells[0].innerHTML;
			MyTable.insertRow(idx);
			MyTable.rows[idx].className = 'lev1';
			for (i=0; i < cellCount; i++) {MyTable.rows[idx].insertCell(i);}
			MyTable.rows[idx].cells[0].innerHTML = '<label><input type="checkbox"><a onclick="sh(this)">' + CurrentValue + '</a></label>';			
		} else {
			MyTable.rows[idx].className = 'lev2';
			MyTable.rows[idx].cells[0].innerHTML = '&#160;';
		}
		idx++;
		rowCount = MyTable.rows.length;
	}
	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>

...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654347
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
круууть! :) да! вот так! с этой таблице нужно сделать такое же)) вот только не знаю как ((((
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654351
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
проблема в том что у меня данные берутся из БД и выводятся в таблицу с этим кодом:
Код: php
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.
<?php
  $connect = mysql_connect("192.168.144.6:6299", "report_user", "661610")  or die("Ошибка соединения!");
    mysql_select_db("smartvend", $connect);
  
 
if (isset($_GET["name"]))
{
  $name = $_GET["name"];
  $query ="SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
 FROM
 amr_fields fields, amr_read_history history
 WHERE
 fields.ID=history.FieldName AND ExecDate>= SUBDATE(CURRENT_DATE, INTERVAL $name DAY) 
 ORDER BY ExecDate ASC";
}
else {
        $result = mysql_query("SELECT  history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue 
                        FROM  
                            amr_fields fields, amr_read_history history 
                        WHERE 
                            fields.ID=history.FieldName AND ExecDate>= '(CURDATE()'
                            ORDER BY execdate DESC",$connect);
                         
        while ($data = mysql_fetch_row($result))
        {
            echo"<tr>";
             echo"<td>{$data[0]}</td>";
             echo"<td>{$data[1]}</td>";
             echo"<td>{$data[2]}</td>";
             echo"<td>{$data[3]}</td>";
             echo"<td>{$data[4]}</td>";
             echo"<td>{$data[5]}</td>";
            echo"</tr>";
        }    
        }
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38654510
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

а первый столбец называется history.MeterNum ? Если да, то сделайте сортировку
Код: sql
1.
ORDER BY MeterNum asc, execdate DESC

Цель: получить на клиенте отсортированную таблицу по первому столбцу (у меня шла сортировка по столбцу - ФИО)

Подключите CSS и Script из моего примера. И всё! Javascript сам пройдет по отсортированной таблице и расставит группы.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655206
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
user89PHucker,

а первый столбец называется history.MeterNum ? Если да, то сделайте сортировку
Код: sql
1.
ORDER BY MeterNum asc, execdate DESC

Цель: получить на клиенте отсортированную таблицу по первому столбцу (у меня шла сортировка по столбцу - ФИО)

Подключите CSS и Script из моего примера. И всё! Javascript сам пройдет по отсортированной таблице и расставит группы.

да, первый столбец называется meternum. я могу сделать сортировку, но с вашим кодом вряд ли могу воспользоваться. покажите на моем коде пожалуйста
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655207
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
то есть можете на примере показать как вставить в ваш код?
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655208
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
попробовал вот так:
Код: html
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.
212.
213.
214.
215.
216.
217.
218.
219.
220.
<!DOCTYPE html>
<html>
<head>
<style>
table {
	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;
}
input[type="checkbox"]{
	display:none;
}
input + a {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 5px;
}
input:checked + a{
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 5px;
}
td+td+td {text-align:right;}
</style>
</head>
<body><script>
document.getElementById('cmdMakeGroup').disabled = false;
document.getElementById('cmdCollapseAll').disabled = true;
document.getElementById('cmdExpandAll').disabled = true;

function MakeGroupTable () {
	var MyTable = document.getElementById('MyTable');
	var rowCount = MyTable.rows.length;
	var cellCount = MyTable.rows[1].cells.length;
	var idx = 1;
	var CurrentValue = '';

	MyTable.className = 'treetable';

	while (idx < rowCount) {
		if (CurrentValue != MyTable.rows[idx].cells[0].innerHTML) {
			CurrentValue = MyTable.rows[idx].cells[0].innerHTML;
			MyTable.insertRow(idx);
			MyTable.rows[idx].className = 'lev1';
			for (i=0; i < cellCount; i++) {MyTable.rows[idx].insertCell(i);}
			MyTable.rows[idx].cells[0].innerHTML = '<label><input type="checkbox"><a onclick="sh(this)">' + CurrentValue + '</a></label>';			
		} else {
			MyTable.rows[idx].className = 'lev2';
			MyTable.rows[idx].cells[0].innerHTML = '&#160;';
		}
		idx++;
		rowCount = MyTable.rows.length;
	}
	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>
<button onclick="MakeGroupTable();" id="cmdMakeGroup">Сгруппировать</button>
<button onclick="SwapAll(false);" id="cmdCollapseAll" disabled>Свернуть все</button>
<button onclick="SwapAll(true);" id="cmdExpandAll" disabled>Развернуть все</button>
<br><br>
<table id="MyTable">
<col width=100> <col width=150>
<thead>
	<tr><th>ФИО</th> <th>Задача</th> <th>&#160; План &#160;</th> <th>&#160; Факт &#160;</th> </tr>
</thead>
<tr> <td>Иванов</td> <td>Легкая задача</td> <td>10</td> <td>20</td> </tr>
<tr> <td>Иванов</td> <td>Средняя задача</td> <td>8</td> <td>21</td> </tr>
<tr> <td>Иванов</td> <td>Сложная задача</td> <td>14</td> <td>17</td> </tr>

<tr> <td>Петров</td> <td>Непростой алгоритм</td> <td>100</td> <td>200</td> </tr>
<tr> <td>Петров</td> <td>Сверхурочные затраты</td> <td>80</td> <td>210</td> </tr>

<tr> <td>Сидоров</td> <td>Анализ</td> <td>5</td> <td>7</td> </tr>
<tr> <td>Сидоров</td> <td>Доработка</td> <td>15</td> <td>14</td> </tr>
<tr> <td>Сидоров</td> <td>Тестирование</td> <td>25</td> <td>22</td> </tr>


<?php
  $connect = mysql_connect("192.168.144.6:6299", "report_user", "661610")  or die("Ошибка соединения!");
    mysql_select_db("smartvend", $connect);
  
 
if (isset($_GET["name"]))
{
  $name = $_GET["name"];
  $query ="SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
 FROM
 amr_fields fields, amr_read_history history
 WHERE
 fields.ID=history.FieldName AND ExecDate>= SUBDATE(CURRENT_DATE, INTERVAL $name DAY) 
 ORDER BY ExecDate ASC";
}
else {
        $result = mysql_query("SELECT  history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue 
                        FROM  
                            amr_fields fields, amr_read_history history 
                        WHERE 
                            fields.ID=history.FieldName AND ExecDate>= '(CURDATE()'
                            ORDER BY MeterNum asc, execdate DESC",$connect);
                         
        while ($data = mysql_fetch_row($result))
        {
            echo"<tr>";
            echo"<td>";
            echo"</td>";
             echo"<td>{$data[0]}</td>";
             echo"<td>{$data[1]}</td>";
             echo"<td>{$data[2]}</td>";
             echo"<td>{$data[3]}</td>";
             echo"<td>{$data[4]}</td>";
             echo"<td>{$data[5]}</td>";
             
            echo"</tr>";
            
        }    
        }
 
$sql = mysql_query($query) or die("<p>Выберите дни</p>");
 
while ($data = mysql_fetch_row($sql))
{
  echo"<tr>";
  echo"<td>{$data[0]}</td>";  
  echo"<td>{$data[1]}</td>";
  echo"<td>{$data[2]}</td>";
  echo"<td>{$data[3]}</td>";
  echo"<td>{$data[4]}</td>";
  echo"<td>{$data[5]}</td>";
  echo"</tr>";
}
mysql_close();
 

    ?>
</table>


</body>
</html>
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655209
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
получилось вот так. и слишком медленно работает. а то и зависает((
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655210
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
оказывается не зависает, а не скрывается :D
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655212
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
получается потихоньку)) только вот когда все столбцы без интервала времени стоят, когда нажимаю сгруппировать, он показывает пустую таблицу. ((
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655214
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
все работает!)) только вот скрыть не получается(
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655216
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
вот что получилось))
<!DOCTYPE html>
<html>
<head>
<style>
body{

}
table {
background-color: #D5EEEE;
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;
}
input[type="checkbox"]{
display:none;
}
input + a {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
no-repeat 0px 5px;
}
input:checked + a{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
no-repeat 0px 5px;
}
td+td+td {text-align:right;}
</style>
</head>
<body><center><script>
document.getElementById('cmdMakeGroup').disabled = false;
document.getElementById('cmdCollapseAll').disabled = false;
document.getElementById('cmdExpandAll').disabled = true;

function MakeGroupTable () {
var MyTable = document.getElementById('MyTable');
var rowCount = MyTable.rows.length;
var cellCount = MyTable.rows[1].cells.length;
var idx = 1;
var CurrentValue = '';

MyTable.className = 'treetable';

while (idx < rowCount) {
if (CurrentValue != MyTable.rows[idx].cells[0].innerHTML) {
CurrentValue = MyTable.rows[idx].cells[0].innerHTML;
MyTable.insertRow(idx);
MyTable.rows[idx].className = 'lev1';
for (i=0; i < cellCount; i++) {MyTable.rows[idx].insertCell(i);}
MyTable.rows[idx].cells[0].innerHTML = '<label><input type="checkbox"><a onclick="sh(this)">' + CurrentValue + '</a></label>';
} else {
MyTable.rows[idx].className = 'lev2';
MyTable.rows[idx].cells[0].innerHTML = ' ';
}
idx++;
rowCount = MyTable.rows.length;
}
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>
<button onclick="MakeGroupTable();" id="cmdMakeGroup">Сгруппировать</button>
<button onclick="SwapAll(true);" id="cmdCollapseAll" disabled>Свернуть все</button>
<button onclick="SwapAll(true);" id="cmdExpandAll" disabled>Развернуть все</button>
<br><br>
<table id="MyTable">
<col width=100> <col width=150>
<thead>
<tr>
<th>Номер Счетчика</th>
<th>ID</th>
<th>  Fields  </th>
<th>  Description  </th>
<th>  <form action="<?=$_SERVER["PHP_SELF"]?>" method="get">
Введите дни(от 1 до 30):
<input type="text" name="name"><br>
<input type = "submit" value = "Считать">
<a href="example.php" ><input type = "button" value = "Сброс" onclick=""></a>
</form> </th>
<th>  Значение  </th>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>

</tr>



<?php
$connect = mysql_connect("192.168.144.6:6299", "report_user", "661610") or die("Ошибка соединения!");
mysql_select_db("smartvend", $connect);


if (isset($_GET["name"]))
{
$name = $_GET["name"];
$query ="SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
FROM
amr_fields fields, amr_read_history history
WHERE
fields.ID=history.FieldName AND ExecDate>= SUBDATE(CURRENT_DATE, INTERVAL $name DAY)
ORDER BY ExecDate ASC";
}
else {
$result = mysql_query("SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
FROM
amr_fields fields, amr_read_history history
WHERE
fields.ID=history.FieldName AND ExecDate>= '(CURDATE()'
ORDER BY MeterNum asc, execdate DESC",$connect);

while ($data = mysql_fetch_row($result))
{
echo"<tr>";;
echo"<td>{$data[0]}</td>";
echo"<td>{$data[1]}</td>";
echo"<td>{$data[2]}</td>";
echo"<td>{$data[3]}</td>";
echo"<td>{$data[4]}</td>";
echo"<td>{$data[5]}</td>";

echo"</tr>";

}
}

$sql = mysql_query($query) or die("<p>Выберите дни</p>");

while ($data = mysql_fetch_row($sql))
{
echo"<tr>";
echo"<td>{$data[0]}</td>";
echo"<td>{$data[1]}</td>";
echo"<td>{$data[2]}</td>";
echo"<td>{$data[3]}</td>";
echo"<td>{$data[4]}</td>";
echo"<td>{$data[5]}</td>";
echo"</tr>";
}
mysql_close();


?>
</table>

</center>
</body>
</html>
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655217
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
только обратно не скрывается(. попробовал посмотреть ваш код, получится ли у вас скрыть. оказалось что у вас тоже не скрывается(
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655218
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
свернуть и свернуть все не работает. (
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655242
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHuckerтолько обратно не скрывается(. попробовал посмотреть ваш код, получится ли у вас скрыть. оказалось что у вас тоже не скрывается(
свернуть и свернуть все не работает. (В моем примере работает   Смотрим еще раз 16084604   Сначала идет CSS, потом <body>, и только потом <script>

У вас здесь 16088948   скрипт расположен наверху. Переместите содержимое <script>...</script> в самый низ, после body, и всё заработает.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655294
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
после body сгруппировать не работает. поэтому пришлось вверх переместить :D вот посмотрите еще)):
<!DOCTYPE html>
<html>
<head>
<style>

table {
background-color: #D5EEEE;
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;
}
input[type="checkbox"]{
display:none;
}
input + a {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
no-repeat 0px 5px;
}
input:checked + a{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
no-repeat 0px 5px;
}
td+td+td {text-align:right;}
</style>
</head>
<body><center>

<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"><button >Сгруппировать по дате</button></a>
<br><br>
<table id="MyTable">

<col width=100> <col width=150>
<thead>
<tr>
<th> Номер Счетчика </th>
<th> ID </th>
<th>  Fields  </th>
<th>  Description  </th>
<th>  <form action="<?=$_SERVER["PHP_SELF"]?>" method="get">
Введите дни(от 1 до 30):
<input type="text" name="name"><br>
<input type = "submit" value = "Считать">
<a href="example.php" ><input type = "button" value = "Сброс" onclick=""></a>
</form> </th>
<th>  Значение  </th>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>

</tr>



<?php
$connect = mysql_connect("192.168.144.6:6299", "report_user", "661610") or die("Ошибка соединения!");
mysql_select_db("smartvend", $connect);


if (isset($_GET["name"]))
{
$name = $_GET["name"];
$query ="SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
FROM
amr_fields fields, amr_read_history history
WHERE
fields.ID=history.FieldName AND ExecDate>= SUBDATE(CURRENT_DATE, INTERVAL $name DAY)
ORDER BY MeterNum asc, ExecDate ASC";
}
else {
$result = mysql_query("SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
FROM
amr_fields fields, amr_read_history history
WHERE
fields.ID=history.FieldName AND ExecDate>= '(CURDATE()'
ORDER BY MeterNum asc, execdate DESC",$connect);

while ($data = mysql_fetch_row($result))
{
echo"<tr>";;
echo"<td>{$data[0]}</td>";
echo"<td>{$data[1]}</td>";
echo"<td>{$data[2]}</td>";
echo"<td>{$data[3]}</td>";
echo"<td>{$data[4]}</td>";
echo"<td>{$data[5]}</td>";

echo"</tr>";

}
}

$sql = mysql_query($query) or die("<p></p>");

while ($data = mysql_fetch_row($sql))
{
echo"<tr>";
echo"<td>{$data[0]}</td>";
echo"<td>{$data[1]}</td>";
echo"<td>{$data[2]}</td>";
echo"<td>{$data[3]}</td>";
echo"<td>{$data[4]}</td>";
echo"<td>{$data[5]}</td>";
echo"</tr>";
}
mysql_close();


?>
</table>

</center>
</body><script>
document.getElementById('cmdMakeGroup').disabled = false;
document.getElementById('cmdCollapseAll').disabled = true;
document.getElementById('cmdExpandAll').disabled = true;

function MakeGroupTable () {
var MyTable = document.getElementById('MyTable');
var rowCount = MyTable.rows.length;
var cellCount = MyTable.rows[1].cells.length;
var idx = 1;
var CurrentValue = '';

MyTable.className = 'treetable';

while (idx < rowCount) {
if (CurrentValue != MyTable.rows[idx].cells[0].innerHTML) {
CurrentValue = MyTable.rows[idx].cells[0].innerHTML;
MyTable.insertRow(idx);
MyTable.rows[idx].className = 'lev1';
for (i=0; i < cellCount; i++) {MyTable.rows[idx].insertCell(i);}
MyTable.rows[idx].cells[0].innerHTML = '<label><input type="checkbox"><a onclick="sh(this)">' + CurrentValue + '</a></label>';
} else {
MyTable.rows[idx].className = 'lev2';
MyTable.rows[idx].cells[0].innerHTML = ' ';
}
idx++;
rowCount = MyTable.rows.length;
}
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>
</html>
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655472
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

я Ваш код скопировал. Всё нормально, скрипт внизу, кнопки работают.
GIF. Последовательное нажатие Сгруппировать - Развернуть все - Свернуть все

А скрипт должен быть внизу. Об этом много написано в гугле, да и здесь на форуме была тема (сайт неправильно работал, пока скрипт не переместили вниз).
Еще попробуйте закрывающий тег </body> переместить после закрывающего тега </script>, чтобы было так:
Код: html
1.
2.
3.
</script>
</body>
</html>
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655500
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
у вас работает у меня нет(( может из-за того что слишком много записей? я попробовал сократить записи и сгруппировать, работает. а почему свернуть не работает у меня? помогите пожалуйста
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655559
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

зависит от сортировки, от объема - нет (у меня в одном проекте 9 тыс. записей почти без задержек).
В принципе, кнопка Сгруппировать не нужна, её можно вообще удалить, и сделать группировку сразу в body
Код: html
1.
<body onload="MakeGroupTable()">


В функции SwapAll , которая отвечает за массовое сворачивание, разворачивание, сделать alert . Что он покажет?
Код: javascript
1.
2.
3.
4.
function SwapAll(b) {
 var tbl = document.getElementsByClassName('treetable')[0];
alert (tbl);
...


По идее, лучше всего отлаживать в Мозилле (нажать F12 , посмотреть ошибки в Консоле , или потрудиться в Отладчике )
alert - тоже сойдет для простой отладки на начальных этапах...
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655589
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Спасибо что отзываетесь. Но не реагирует(. то есть я нажимаю на "Сгруппировать" клик и нет реакции. А давайте сделаем так: я скрипт обратно вверх и сделаем так чтобы кнопка "свернуть" работало?)
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655617
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
разворачиваю и знак + все равно остается.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655658
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

знаки + − меняются в зависимости от CSS-свойства input:checked . Работает даже в IE9 (проверьте, нет ли режима совместимости). Уберите display:none; чтобы посмотреть на "галочки"
Код: css
1.
2.
3.
input[type="checkbox"]{
 display:none;
}


А отладка через консоль или alert обязательно нужна.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655673
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
user89,

появился "реальный" checkbox)) отмечаю птичкой появляется знак -. и работает сворачивание. без галочки не работает.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655750
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

щелкать надо не в сам CheckBox , а левее - в само наименование (курсор должен принять символ руки).

Последнее, что я могу сделать. Выложите "живой" HTML страницы. Мозилла точно умеет делать (вроде через обычное сохранение страницы)
То, что было выше 16089121 , это не "живой" HTML. Не должно быть никаких <php , $data и прочих серверных вставок.
Нужно содержимое текстовой страницы с данными.

Код будет длинный, поэтому оберните в spoiler
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655753
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

щелкать надо не в сам CheckBox , а правее - в само наименование (курсор должен принять символ руки).

Последнее, что я могу сделать. Выложите "живой" HTML страницы. Мозилла точно умеет делать (вроде через обычное сохранение страницы)
То, что было выше 16089121 , это не "живой" HTML. Не должно быть никаких <php , $data и прочих серверных вставок.
Нужно содержимое текстовой страницы с данными.

Код будет длинный, поэтому оберните в spoiler
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655765
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
<!DOCTYPE html>
<html>
<head>
<style>

table {
background-color: #D5EEEE;
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;
}
input[type="checkbox"]{
display:none;
}
input + a {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
no-repeat 0px 5px;
}
input:checked + a{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
no-repeat 0px 5px;
}
td+td+td {text-align:right;}
</style>
</head>
<body><center>

<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"><button >Сгруппировать по дате</button></a>
<br><br>
<table id="MyTable">

<col width=100> <col width=150>
<thead>
<tr>
<th> Номер Счетчика </th>
<th> ID </th>
<th>  Fields  </th>
<th>  Description  </th>
<th>  <form action="<?=$_SERVER["PHP_SELF"]?>" method="get">
Введите дни(от 1 до 30):
<input type="text" name="name"><br>
<input type = "submit" value = "Считать">
<a href="example.php" ><input type = "button" value = "Сброс" onclick=""></a>
</form> </th>
<th>  Значение  </th>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>

</tr>



<?php
$connect = mysql_connect("192.168.144.6:6299", "report_user", "661610") or die("Ошибка соединения!");
mysql_select_db("smartvend", $connect);


if (isset($_GET["name"]))
{
$name = $_GET["name"];
$query ="SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
FROM
amr_fields fields, amr_read_history history
WHERE
fields.ID=history.FieldName AND ExecDate>= SUBDATE(CURRENT_DATE, INTERVAL $name DAY)
ORDER BY MeterNum asc, ExecDate ASC";
}
else {
$result = mysql_query("SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
FROM
amr_fields fields, amr_read_history history
WHERE
fields.ID=history.FieldName AND ExecDate>= '(CURDATE()'
ORDER BY MeterNum asc, execdate DESC",$connect);

while ($data = mysql_fetch_row($result))
{
echo"<tr>";;
echo"<td>{$data[0]}</td>";
echo"<td>{$data[1]}</td>";
echo"<td>{$data[2]}</td>";
echo"<td>{$data[3]}</td>";
echo"<td>{$data[4]}</td>";
echo"<td>{$data[5]}</td>";

echo"</tr>";

}
}

$sql = mysql_query($query) or die("<p></p>");

while ($data = mysql_fetch_row($sql))
{
echo"<tr>";
echo"<td>{$data[0]}</td>";
echo"<td>{$data[1]}</td>";
echo"<td>{$data[2]}</td>";
echo"<td>{$data[3]}</td>";
echo"<td>{$data[4]}</td>";
echo"<td>{$data[5]}</td>";
echo"</tr>";
}
mysql_close();


?>
</table>

</center>
<script>
document.getElementById('cmdMakeGroup').disabled = false;
document.getElementById('cmdCollapseAll').disabled = true;
document.getElementById('cmdExpandAll').disabled = true;

function MakeGroupTable () {
var MyTable = document.getElementById('MyTable');
var rowCount = MyTable.rows.length;
var cellCount = MyTable.rows[1].cells.length;
var idx = 1;
var CurrentValue = '';

MyTable.className = 'treetable';

while (idx < rowCount) {
if (CurrentValue != MyTable.rows[idx].cells[0].innerHTML) {
CurrentValue = MyTable.rows[idx].cells[0].innerHTML;
MyTable.insertRow(idx);
MyTable.rows[idx].className = 'lev1';
for (i=0; i < cellCount; i++) {MyTable.rows[idx].insertCell(i);}
MyTable.rows[idx].cells[0].innerHTML = '<label><input type="checkbox"><a onclick="sh(this)">' + CurrentValue + '</a></label>';
} else {
MyTable.rows[idx].className = 'lev2';
MyTable.rows[idx].cells[0].innerHTML = ' ';
}
idx++;
rowCount = MyTable.rows.length;
}
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>
PS когда скрипт находится "выше", все здорово работает, только не сворачивается. вот и вся проблема. а когда снизу, то сгруппировать не получается и свернуть тоже(
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38655869
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

я же просил HTML c данными. А тут серверный блок.
Вместо этого, нужны "живые" данные в <tr> <td>, которые отображаются на с странице
Код: php
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.
<?php
 $connect = mysql_connect("192.168.144.6:6299", "report_user", "661610") or die("Ошибка соединения!");
 mysql_select_db("smartvend", $connect);

if (isset($_GET["name"]))
{
 $name = $_GET["name"];
 $query ="SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue
 FROM
 amr_fields fields, amr_read_history history
 WHERE
 fields.ID=history.FieldName AND ExecDate>= SUBDATE(CURRENT_DATE, INTERVAL $name DAY) 
 ORDER BY MeterNum asc, ExecDate ASC";
}
else {
 $result = mysql_query("SELECT history.MeterNum, fields.ID, history.FieldName, fields.Description, history.ExecDate, history.FieldValue 
 FROM 
 amr_fields fields, amr_read_history history 
 WHERE 
 fields.ID=history.FieldName AND ExecDate>= '(CURDATE()'
 ORDER BY MeterNum asc, execdate DESC",$connect);

 while ($data = mysql_fetch_row($result))
 {
 echo"<tr>";;
 echo"<td>{$data[0]}</td>";
 echo"<td>{$data[1]}</td>";
 echo"<td>{$data[2]}</td>";
 echo"<td>{$data[3]}</td>";
 echo"<td>{$data[4]}</td>";
 echo"<td>{$data[5]}</td>";

 echo"</tr>";

 } 
 }

$sql = mysql_query($query) or die("<p></p>");

while ($data = mysql_fetch_row($sql))
{
 echo"<tr>";
 echo"<td>{$data[0]}</td>"; 
 echo"<td>{$data[1]}</td>";
 echo"<td>{$data[2]}</td>";
 echo"<td>{$data[3]}</td>";
 echo"<td>{$data[4]}</td>";
 echo"<td>{$data[5]}</td>";
 echo"</tr>";
}
mysql_close();

 ?>

...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38656578
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
я вас не понял)) и опять е понял))
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38656631
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

вместо блока
Код: php
1.
2.
3.
4.
5.
6.
<?php
 $connect = mysql_connect("192.168.144.6:6299", "report_user", "661610") or die("Ошибка соединения!");
 mysql_select_db("smartvend", $connect);
...
...
?>


мне нужно
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<table id="MyTable">
<col width=100> <col width=150>
<tr> <td>Данные</td> <td>Данные</td> <td>Данные</td> <td>Данные</td> </tr>
<tr> <td>Данные</td> <td>Данные</td> <td>Данные</td> <td>Данные</td> </tr>
<tr> <td>Данные</td> <td>Данные</td> <td>Данные</td> <td>Данные</td> </tr>
<tr> <td>Данные</td> <td>Данные</td> <td>Данные</td> <td>Данные</td> </tr>
...
</table>

т.е. HTML страница, которую видит пользователь на экране.
Мозилла точно умеет сохранять в правильном виде. Приложите файл к сообщению в виде архива. Гляну.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38656804
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
спасибо!!! Вот :)
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38656866
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

скачал я файл, а там PHP код :(

Попробуем такой вариант.
Выше Вы приводили хороший скриншот 16079301   Мне нужен HTML этого скриншота.
1. Выводим в Мозилле нашу страницу
2. Никакие кнопки не жмем
3. Сохраняем в формате HTML
Итого, в результате мы будем иметь не example.php , а example.html
Я этот example.html запущу у себя, и увижу таблицу, которую Вы привели выше 16079301
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38656913
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
вот
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38656915
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
PHucker,

только это с использованием вашего кода))
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38656997
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
у меня в navicat показывает 10949 строк. а в браузере сколько строк помещается? может из-за того что слишком много записей?
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38657015
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

вот, теперь правильный файл. В течение часа гляну.

>>> у меня в navicat показывает 10949 строк. а в браузере сколько строк помещается? может из-за того что слишком много записей?
В браузер можно и миллион запихнуть   Главное, чтобы строки были отсортированы в SQL-запросе.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38657026
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
проблема оказалась в браузере. я через Яндекс выводил. Через IE работает
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38657081
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
еще продолжим нашу тему user89)) на этом еще не закончили)) но за то, что отзываетесь огромное спасибо))
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38657086
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

хорошо, что проблема решилась. Ваш файл отработал у меня без ошибок. Единственное, задайте всем столбцам в таблице, нужную ширину через атрибут <col> .
Это ускорит вывод таблицы на экран, да и покрасивше будет
Код: html
1.
<col width=100> <col width=150> и т.д.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38657423
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
автор>>> у меня в navicat показывает 10949 строк. а в браузере сколько строк помещается? может из-за того что слишком много записей?
В браузер можно и миллион запихнуть
ну за такое количество строк для отображения юзеру надо голову отвернуть.
это бессмысленное количесство, которое невозможно проанализировать, даже если использовать расскрывающийся список.
потому как если расскрыть и пролистать до конца расскрытого, то потом надо обратно вернуться чтоб свернуть...
...
я ошибся, сворачивание головы слишком мягкое наказание.

это первое...
тс явно не владеет основами работы с базами, ajax, и прочими новейшими технологиями и не стримится их осмыслить.
не говоря уж о эргономике юзабилити.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38657427
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ГЫЫЫ
так так будет правильнее (от возмущения пропустил..)
ну за такое количество строк, для отображения юзеру, надо голову отвернуть.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38658228
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
вадя,

у меня там выборка по интервалу есть))

WHERE
fields.ID=history.FieldName AND ExecDate>= SUBDATE(CURRENT_DATE, INTERVAL $name DAY)
ORDER BY MeterNum asc, ExecDate ASC"
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38658247
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
если при любой выборке у клиента на больше чем 2 экрана строк - данные выводить бессмысленно.
можно помечать что-то цветом, только для беглой оценки всех данных.
тут надо применять фильтры грамотно, и вся фильтрация - на сервере
на экране фильтры (поля для выбора условий фильтрации) должны быть доступны без скролинга чего-либо
а твой вариант - для получения знаний по html может и годится , но для нормальной, эффективной работы малопригоден.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38658257
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
вадя,

согласен, буду усовершенствовать свои знания по web-программированию. я еще чайник))
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38658350
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
продолжаем тему))) у меня возник такой вопрос: как можно сделать чтобы в строке была дата а при разворачивании были еще время вместе с датой чтения. я форму с датой сделал раскрывающимся. но в строке время до секунды аж. а мне нужно как вышенаписанное))
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38658364
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
да, сначала нужно преобразовать date-time в date. но вот при разворачивании нужно сделать так, чтобы были данные с date-time.
то есть примерно так:
(например раскрыл список)


2014-05-27
10:05:45 03000002 Current total kWh 37130551866 2768.20
10:05:45 03000002 Current total kWh 37130551866 2466.20
10:05:45 03000002 Current total kWh 37130551866 2123.50

2014-05-28
10:05:45 03000002 Current total kWh 37130551866 2768.20
10:05:45 03000002 Current total kWh 37130551866 2466.20
10:05:45 03000002 Current total kWh 37130551866 2123.50

а при свернутом виде так:

2014-05-27
2014-05-28
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38658504
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

на сервере, функциями MySQL , столбец ExecDate расщепить на два столбца:
- первый столбец содержит только дату
- второй столбец содержит только время

На клиенте, группировать по первому столбцу, который содержит только дату.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38658617
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
user89,
как я не догадался)))) спасибо user89!)) ща попробую))
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38658821
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
сделал как вы и сказали. только проблема появилась. когда нажимаю на "сгруппировать" то группировка берет и время тоже. взгляните на это:
Код: php
1.
2.
3.
4.
5.
6.
$result = mysql_query("SELECT  history.ExecDate, time(execdate), fields.ID, history.FieldName, fields.Description, history.MeterNum, history.FieldValue 
                        FROM  
                            amr_fields fields, amr_read_history history 
                        WHERE 
                            fields.ID=history.FieldName AND ExecDate>= '(CURDATE()'
                            ORDER BY date(Execdate) DESC",$connect);
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38658888
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

я c MySQL не работал. Посмотрите в справке по вашей верии MySQL как извлекать дату и время.
Попробуйте по аналогии:
Код: sql
1.
SELECT  date(ExecDate), time(execdate), fields ...

или через преобразование
Код: sql
1.
SELECT  cast(ExecDate as date), time(execdate), fields ...


В итоге, select-запрос должен вернуть 2 столбца: один только с датой, второй только со временем
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38659509
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
user89,

Да, у меня тоже два столбца. Один дату берет, другой время. Но когда делаю ORDER BY date(ExecDate) он все равно показывает время.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38659531
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
сделал! Работает)))!!! Спасибо user89! Огромное спасибо!))
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38662140
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
user89

у меня появился такой вопрос. Можно ли сделать раскрывающийся список под раскрывающимся списком? Потребовалось необходимость. У меня в столбце "ID счетчика" много одинаковых значений. Было бы хорошо если сделали его раскрывающимся))
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38662146
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHucker,

как здесь? http://jsfiddle.net/NZaw4/10/
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38662161
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
user89,

Извините, но я не нашел там похожее. Взгляните на рисунок. только на значения внимание не обращайте, только на форму.
...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38662831
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PHuckeruser89,
Извините, но я не нашел там похожее.А зря, на сервере проще делать группировки...

Тогда будет делать на клиенте.
Чтобы ячейки не прыгали, надо сделать фиксированную ширину колонок. Для этого, в стилях таблицы задать layout и width
Код: css
1.
2.
table-layout:fixed;
width:1290px;

Далее, сразу после <table>, пишем ширину каждой колонки <col width=”...”> <col width=”...”> <col width=”...”> ....

По каким столбцам идет группировка, по тем полям и надо сортировать в SQL.
Универсальный алгоритм, который делает любое количество групп (количество колонок в таблице минус 1)
Код: html
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>

...
Рейтинг: 0 / 0
как сделать список раскрывающимся?
    #38663472
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Спасибо user89!)) Ваш вариант мне понравился. Мне бы только на один уровень ниже).
...
Рейтинг: 0 / 0
74 сообщений из 74, показаны все 3 страниц
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как сделать список раскрывающимся?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]