2015-10-21 2 views
3

У меня есть древовидная структура, и я использую jstree jquery plugin к ней.Обратное древовидная структура

Я в основном хочу обратить вспять структуру. enter image description here

Структура должна выглядеть примерно так. Я отредактировал это в MS-слове, поэтому у него нет вида папки, как в первом изображении. В принципе, первым элементом должен быть только «Друг», но он должен начинаться со дна. Пожалуйста, измените abs на abc. Пожалуйста, помогите мне с этим. Заранее спасибо

enter image description here

<!DOCTYPE html> 
    <html> 
    <script type="text/javascript" src='..../jquery-1.10.2.min.js'></script> 
    <script type="text/javascript" src='.../jstree.min.js'></script> 
    <link rel='stylesheet' type="text/css" href='...../style.min.css' /> 
    <script type="text/javascript" src="..../jquery.easyui.min.js"></script> 
    <script src="tree.js"></script> 

    <head> 
     <meta charset="ISO-8859-1"> 
     <title>Insert title here</title> 
    </head> 

    <body> 
     <button id="idClickMe">Click me</button> 
     <div id='jstree'> 
     </div> 
    </body> 
    </html> 

расслоение плотной Код:

$(document).ready(function(){ 

    $('#idClickMe').click(function(){ 
    var resultant="<ul><li data-jstree='{'selected' : true, 'opened' : true }><span>Friend</span><ul><li>abc</li></ul></li><li><span>Wife</span></li><li><span>Company</span></li></ul>"; 
    $("#jstree").jstree('destroy').html(resultant); 
    $("#jstree").jstree(); 

    //$("#jstree").jstree("refresh"); 
    }); 
}); 
+1

Почему вы не можете переключить позиции в вашей HTML строки? – charlietfl

+0

Это будет сложно по мере увеличения иерархии. Также структура динамична. Мне нужна структура parent -child и структура child -parent. Поэтому мне нужно отменить предыдущую структуру. –

+0

Хорошо, что в вопросительном коде нет ничего динамического, поэтому мы понятия не имеем, как он создается. Пожалуйста, отредактируйте вопрос и включите все соответствующие коды и информацию – charlietfl

ответ

0

я вижу и использовать HTML для этого поэтому, возможно, этот обратный пропущено из HTML помогу и:

$top = $('div#thatTopDiv'); 
$top.children('div').slice(1).each(function() { 
    $(this).insertBefore($top.children().eq(0)); 
}); 
0

Если обратите внимание на помощь: переверните дерево DIV вверх дном и переверните вверх дном текст на каждом листе дерева.

CSS: http://www.w3schools.com/cssref/css3_pr_transform.asp

+0

Спасибо всем ... @pavel Я попытался перевернуться и фактически восстановил структуру. Точно так, как я хотел. Из диаграммы «Компания» появился сверху и «Друг» внизу. Однако теперь алфавиты также перевернуты. Есть ли способ CSS для инвертирования определенных значений? Спасибо за помощь –

+0

Я использовал этот код для инверсии структуры: -moz-transform: scale (1, -1); -o-transform: шкала (1, -1); -webkit-transform: масштаб (1, -1); transform: масштаб (1, -1); –

+0

Я рад, что помог. Если у вас еще нет решения, вставьте текст в span (или div display: inline) и установите его класс, чтобы текст вверх -> превратил текст назад, как двойной поворот на половину. Включите текст, например 'var leaf = ' Друзья';' вместо 'var leaf = 'Friends';' –

Смежные вопросы