logo标签列表

反转树结构

javascriptjqueryhtml
3
我有一个树形结构，我正在使用jstree jquery插件进行操作。 基本上，我想要反转这个结构。enter image description here 该结构应该看起来像这样。我在MS Word中编辑了它，所以它没有像第一张图片中那样的文件夹视图。基本上，第一个元素应该只是“Friend”，但必须从底部开始。请将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>

js 代码：

 $(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
随着层次的增加，这将变得困难。而且结构是动态的。我想要一个父子结构和一个子父结构。因此，我需要反转之前的结构。 - Partha Kalita
问题代码中没有显示任何动态内容，因此我们不知道它是如何创建的。请编辑问题并包括所有相关的代码和信息。 - charlietfl
如果您从数据库中获取信息，请将项目放入数组中并使用数组反转。 - brandelizer
2个回答
0
谢谢大家... @pavel 我尝试了倒置，它实际上反转了结构。正是我想要的方式。从图表中，“公司”出现在顶部，“朋友”出现在底部。然而，字母现在也被倒置了。有没有CSS方法来倒置特定的值？感谢您的帮助。 - Partha Kalita
我使用了以下代码来翻转结构： -moz-transform: scale(1,-1); -o-transform: scale(1,-1); -webkit-transform: scale(1,-1); transform:scale(1,-1); - Partha Kalita
我很高兴能够提供帮助。如果你还没有解决这个问题，可以将文本插入到 span 标签中（或 div 标签中，并设置其类为 upsite-down text），这样文本就会像双倍半旋转一样翻转回来。在代码中使用类似于 var leaf = '<span class="HalfRotation">朋友们</span>'; 的文本，而不是 var leaf = '朋友们';。 - Pavel Kučera
嘿，Pavel，非常感谢你，兄弟...它起作用了...准确的结构和准确的元素。基本上，我添加了这一行。<span style='-ms-transform:rotateX(-180deg)'>" + localRowID + "</span>"。其次，我还向HTML文件中添加了以下行。.#treeViewOfWhereUsed {-moz-transform: scale(1,-1); -o-transform: scale(1,-1); -webkit-transform: scale(1,-1); transform:scale(1,-1); } 感谢大家... - Partha Kalita
0

我看到你使用了HTML，也许这个HTML反转片段可以帮助你：

$top = $('div#thatTopDiv');
$top.children('div').slice(1).each(function() {
    $(this).insertBefore($top.children().eq(0));
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接