Форум АСУ в Україні

форум з автоматизації для викладачів, студентів та спеціалістів
Сьогодні: 23 липня 2019, 14:50

Часовий пояс UTC + 2 годин [ DST ]




Створити нову тему Відповісти  [ 2 повідомлень ] 
Автор Повідомлення
 Тема повідомлення: Дані у вигляді дерев та JQery
ПовідомленняДодано: 24 травня 2014, 15:57 
Офлайн
Викладач

З нами з: 29 листопада 2013, 17:11
Повідомлення: 4979
Колись довелося трохи заглянути в JQery, та нічого на ньому не пробував. До сих пір оминав цю тему, але для форуму (і не тільки) прийдеться займатися ієрархічними деревами для відображення даних. Судячи по всьому, ця тема добре пророблена в плагінах для JQery. Так що вперед.
У цій темі буду робити короткий конспект про JQery та побудову дерев за допомогою плагінів.
http://learn.javascript.ru/jquery-intro
http://jquery.page2page.ru/index.php5/% ... %B2_jQuery

Дерева
JsTree- http://habrahabr.ru/post/151239/
Є ще така реалізація на базі DOM


Догори
 Профіль  
 
 Тема повідомлення: Re: Дані у вигляді дерев та JQery
ПовідомленняДодано: 29 травня 2014, 14:49 
Офлайн
Викладач

З нами з: 29 листопада 2013, 17:11
Повідомлення: 4979
Закончил я с деревом. от jstree отказался в пользу вот такого подхода. Автору респект.
Тем не менее пришлось поработать над темой.
Вот что получилось.
Как реализовал:
BBcode
Код:
[tree={TEXT1}]{TEXT2}[/tree]

<script type="text/javascript">
function tree_toggle(event) {
event = event || window.event
var clickedElem = event.target || event.srcElement
if (!hasClass(clickedElem, 'Expand')) {
return // клик не там
}
// Node, на который кликнули
var node = clickedElem.parentNode
if (hasClass(node, 'ExpandLeaf')) {
return // клик на листе
}
// определить новый класс для узла
var newClass = hasClass(node, 'ExpandOpen') ? 'ExpandClosed' : 'ExpandOpen'
// заменить текущий класс на newClass
// регексп находит отдельно стоящий open|close и меняет на newClass
var re = /(^|\s)(ExpandOpen|ExpandClosed)(\s|$)/;
var str='\u0024' + '1'+newClass+'\u0024'+'3';
node.className = node.className.replace(re, str);
}
function hasClass(elem, className) {
var exp=new RegExp('(^|' +'\u005c' + 's)'+className+'(' + '\u005c' + 's|$)');
return exp.test(elem.className);
}
</script>
<style type="text/css">
.Container {padding: 0;margin: 0;}
.Container li {list-style-type: none;}
/* indent for all tree children excepts root */
.Node {background-image : url(/images/ranks3/iasu_ukrbb_net/tree_i.gif);background-position : top left;background-repeat : repeat-y;margin-left: 18px;zoom: 1;}
.IsRoot {margin-left: 0;}
/* left vertical line (grid) for all nodes */
.IsLast {background-image: url(/images/ranks3/iasu_ukrbb_net/tree_i_half.gif);background-repeat : no-repeat;}
.ExpandOpen .Expand {background-image: url(/images/ranks3/iasu_ukrbb_net/tree_expand_minus.gif);}
/* closed is higher priority than open */
.ExpandClosed .Expand {background-image: url(/images/ranks3/iasu_ukrbb_net/tree_expand_plus.gif);}
/* highest priority */
.ExpandLeaf .Expand {background-image: url(/images/ranks3/iasu_ukrbb_net/tree_expand_leaf.gif);}
.Content {min-height: 18px;margin-left:18px;}
* html .Content {height: 18px;}
.Expand {width: 18px;height: 18px;float: left;}
.ExpandOpen .Container {display: block;}
.ExpandClosed .Container {display: none;}
.ExpandOpen .Expand, .ExpandClosed .Expand {cursor: pointer;}
.ExpandLeaf .Expand {cursor: auto;}
</style>
<div onclick="tree_toggle(arguments[0])">
<div>{TEXT1}</div>
<ul class="Container" id="Tree{TEXT1}">
</ul>
</div>
<script type="text/javascript">
//<(> - NodeStart начало ветви, псоле которого идет название
//<+> - NodeEnter начинается содержимое ветви
//<)> - NodeEnd конец ветви
//<*> - LiveStart начало листа
//</> - LiveEnd конец листа
//<.*> - LastLiveStart начало последнего листа
//<.(> - LastNodeStart начало последней ветви
var text1= "{TEXT2}";
var NodeStart='<li class="Node ExpandClosed"><div class="Expand"></div><div class="Content">';
var LastNodeStart='<li class="Node IsLast ExpandClosed "><div class="Expand"></div><div class="Content">';
var NodeEnter = '</div><ul class="Container">';
var NodeEnd = '</ul></li>';
var LiveStart='<li class="Node ExpandLeaf"><div class="Expand"></div><div class="Content">';
var LastLiveStart='<li class="Node IsLast ExpandLeaf"><div class="Expand"></div><div class="Content">';
var LiveEnd = '</div></li>';
var text2=text1.replace(/<br \/>/g,'');//убираем переводы
text2=text2.replace (/&lt;&#40;&gt;/g,NodeStart); //<(>
text2=text2.replace (/&lt;.&#40;&gt;/g,LastNodeStart); //<.(>
text2=text2.replace (/&lt;\+&gt;/g,NodeEnter);//<+>
text2=text2.replace (/&lt;&#41;&gt;/g,NodeEnd);//<)>
text2=text2.replace (/&lt;\*&gt;/g,LiveStart);//<*>
text2=text2.replace (/&lt;.\*&gt;/g,LastLiveStart);//<*>
text2=text2.replace (/&lt;\/&gt;/g,LiveEnd);//</>
//дальше в середине чистый HTML, меняем обратно на < и >
text2=text2.replace (/&lt;/g,'<');
text2=text2.replace (/&gt;/g,'>');
document.getElementById('Tree{TEXT1}').innerHTML=text2;
</script>

Тут нужно скачать картинки и записать их в картинки с теми же названиями и поменять на свои url-ки в стилях.

Правила формирования структуры:

<(> - NodeStart начало ветви, псоле которого идет название
<+> - NodeEnter начинается содержимое ветви
<)> - NodeEnd конец ветви
<*> - LiveStart начало листа
</> - LiveEnd конец листа
<.*> - LastLiveStart начало последнего листа
<.(> - LastNodeStart начало последней ветви
все внутреннее содержание папок и листов формируется HTML-разметкой.
Фрагмент приведенного примера
Код:
<(>ВНТУ (Вінницький національний технічний університет), <a href=http://vntu.edu.ua> сторінка </a> <+>
<(>IнАЕКСУ (Інститут автоматики, електроніки та комп'ютерних систем управління), <a href=http://inaeksu.vntu.edu.ua/> сторінка </a><+>
<*>МПА (кафедра Метрології та промислової автоматики) <a href=http://mpa.vntu.edu.ua/> сторінка </a> </>
<*>КСУ(Кафедра комп’ютерних систем управління ) <a href=http://www.ksu.vntu.edu.ua> сторінка </a> </>
<.*>АІВТ(Кафедра автоматики та інформаційно-вимірювальної техніки) <a href=http://aivt.inaeksu.vntu.edu.ua/> сторінка </a> </><)>
<(>ІнЕЕЕМ (Інститут електроенергетики та електромеханіки ), <a href=http://ineeem.vntu.edu.ua/> сторінка </a> <+>
<.*>ЕМКА (КАФЕДРА ЕЛЕКТРОМЕХАНІЧНИХ СИСТЕМ АВТОМАТИЗАЦІЇ В ПРОМИСЛОВОСТІ І НА ТРАНСПОРТІ) <a href=http://emca.ineeem.vntu.edu.ua> сторінка </a> </><)>
<.(>IнІТКІ (Інститут інформаційних технологій та комп'ютерної інженерії), <a href=http://initki.vntu.edu.ua/> сторінка </a> <+>
<.*>КПЗ (кафедра Програмного забезпечення) <a href=http://pmos.webro.com.ua/> сторінка </a>  </><)>
<)>


Догори
 Профіль  
 
Відображати повідомлення за:  Сортувати за  
Створити нову тему Відповісти  [ 2 повідомлень ] 

Часовий пояс UTC + 2 годин [ DST ]



Хто зараз онлайн

Зараз переглядають цей форум: Немає зареєстрованих користувачів і 1 гість


Ви не можете створювати нові теми у цьому форумі
Ви не можете відповідати на теми у цьому форумі
Ви не можете редагувати ваші повідомлення у цьому форумі
Ви не можете видаляти ваші повідомлення у цьому форумі
Ви не можете додавати файли у цьому форумі

Знайти:
Вперед:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Вы можете бесплатно создать форум PHPBB2 на MyBB2.ru, Также возможно создать форум бесплатно PHPBB3 на Getbb.ru
Український переклад © 2005-2007 Українська підтримка phpBB