Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как сделать список раскрывающимся? / 25 сообщений из 74, страница 1 из 3
  1  все
27.05.2014, 12:55
    #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, 13:11
    #38653168
anvano
anvano
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать список раскрывающимся?
Вы не тот форум выбрали.
Это к JavaScript относится больше.

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

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

...вам фильтр в заголовках таблицы а-ля Эксель сделать нужно? ... вообще-то knockout.js это может, но не так просто ...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.05.2014, 14:09
    #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
| Ответить | Цитировать | Написать  
28.05.2014, 06:31
    #38653993
PHucker
PHucker
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать список раскрывающимся?
user89,

Да, хорошая идея. Но у меня тут все почти готово. Осталось только сделать кнопку которая скрывает\раскрывает сгруппированные записи в таблице из БД. Только я не знаю как это сделать. ((
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.05.2014, 08:47
    #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, 09:41
    #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:42
    #38654102
PHucker
PHucker
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать список раскрывающимся?
уже неделю голову ломаю. Я просто новичок и трудновато мне
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.05.2014, 10:59
    #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, 11:40
    #38654257
PHucker
PHucker
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать список раскрывающимся?
id first Это с CSS :)(ну вы это поняли) да, можно и в class'е задать. Мне кинули такую идею: "я бы обработал изначально данные перед выводом. сгруппировав их в массив, по этому самому номеру, и потом выводил в таблице согласно группам, а группу можно вывести в отдельном диве или любом другом удобном элементе, и отображать скрывать его сколько угодно."

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

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

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

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

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

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

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

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

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

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

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

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


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