ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как сделать список раскрывающимся?
25 сообщений из 74, страница 1 из 3
  1  все
как сделать список раскрывающимся?
    #38653136
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
27.05.2014, 12:55
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38653168
anvano
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
anvano
Участник
Вы не тот форум выбрали.
Это к JavaScript относится больше.

А по теме - присвоить всем "одинаковым" одинаковый идентификатор. А в JS в цикле перебирать элементы и раскрывать.
JQuery вроде может селекторами делать это автоматически, без необходимости городить вручную циклы перебора.
...
Рейтинг: 0 / 0
27.05.2014, 13:11
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38653217
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
27.05.2014, 13:38
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38653226
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
теперь, как сделать с этим это: в первом столбце есть значения. в нем есть много одинаковых. и нужно сделать кнопку для всех значений только по одной каждому. то есть когда нажать допустим
на 37130550488 то этот список раскрывался и выводились все 37130550488. и так дальше.
И значение других столбцов должно меняться соответственно этому столбцу.

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

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

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

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

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

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

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

у каждой строки должен быть признак, который отвечает за уровень в группе. Или через ID (типа 1_1, 1_2, 1_3, 2_1, 2_2) или
через класс (lev1, lev2)
Потом двигаемся вниз от строки по которой щелкнули, пока соблюдается условие по ID (или классу)
Далее у строки display = 'none' или display = 'table-row' ...
...
Рейтинг: 0 / 0
28.05.2014, 08:47
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38654101
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
28.05.2014, 09:41
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38654102
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
уже неделю голову ломаю. Я просто новичок и трудновато мне
...
Рейтинг: 0 / 0
28.05.2014, 09:42
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38654202
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
28.05.2014, 10:59
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38654257
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
id first Это с CSS :)(ну вы это поняли) да, можно и в class'е задать. Мне кинули такую идею: "я бы обработал изначально данные перед выводом. сгруппировав их в массив, по этому самому номеру, и потом выводил в таблице согласно группам, а группу можно вывести в отдельном диве или любом другом удобном элементе, и отображать скрывать его сколько угодно."

что на это скажете? :)
...
Рейтинг: 0 / 0
28.05.2014, 11:40
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38654272
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
28.05.2014, 11:44
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38654298
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
carrotik
Участник
PHucker,

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

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

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

... может вам посмотреть реализации баянов, то бишь, accordeon :) ??? ... По-моему, это больше подходит ....
...
Рейтинг: 0 / 0
28.05.2014, 12:31
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38654338
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
28.05.2014, 12:34
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38654347
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
круууть! :) да! вот так! с этой таблице нужно сделать такое же)) вот только не знаю как ((((
...
Рейтинг: 0 / 0
28.05.2014, 12:40
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38654351
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
28.05.2014, 12:43
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38654510
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
PHucker,

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

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

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

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

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

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

да, первый столбец называется meternum. я могу сделать сортировку, но с вашим кодом вряд ли могу воспользоваться. покажите на моем коде пожалуйста
...
Рейтинг: 0 / 0
29.05.2014, 06:06
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38655207
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
то есть можете на примере показать как вставить в ваш код?
...
Рейтинг: 0 / 0
29.05.2014, 06:13
| Ответить | Цитировать | Написать  
как сделать список раскрывающимся?
    #38655208
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
29.05.2014, 06:22
| Ответить | Цитировать | Написать  
25 сообщений из 74, страница 1 из 3
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как сделать список раскрывающимся?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38655207&tid=1447012]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 42ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 77ms
get tp. blocked users:
 1ms
others: 255ms
total:  412ms
созд. / загр.: 412ms
x
x
Закрыть


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