2016-05-12 3 views
1

Я пытаюсь создать jstree на лету при нажатии кнопки. У меня есть один jstree, и пользователь будет выбирать объекты из этого дерева. И я хотел бы показать это дерево на выбранной вкладке в самом формате дерева.Создание jstree на лету

Таким образом, код ниже подходит, если я использую переменную aka такой, какой есть. Но я просто хочу показать первое имя из этой строки, потому что я формирую его в формате jstree json. Тогда это не работает. Но я попытался скопировать и вставить сгенерированный текст в другой jstree, тогда он работает. Значит, это не отображение нового дерева на ходу, а на другой странице, если я передаю одну и ту же строку, тогда он показывает мне дерево.

вот мой код

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>JSP Page</title> 
     <style> 
      html { margin:0; padding:0; font-size:62.5%; } 
      body { font-size:14px; font-size:1.4em; } 
      h1 { font-size:1.8em; } 
      .demo { overflow:auto; border:1px solid silver; min-height:100px;min-width: 400px;float: left } 
      .demo1 { overflow:auto; border:1px solid silver; min-height:100px;min-width: 400px; float: right} 
     </style> 
     <link rel="stylesheet" href="style.min.css" /> 
    </head> 

    <body><div id="frmt" class="demo"></div> 
     <div id="frmt1" class="demo1"></div> 
     <script> 
      function callGraph(akn) { 
       var c = akn + ""; 
       var spl = c.split("!"); 
       var dt = "[{\"text\":\"DC=test,DC=in\",\"children\":["; 
       var cnt = spl.length - 1; 
       for (q = 0; q < cnt; q++) { 
        if (spl[q].startsWith(",")) 
         dt += "{\"text\":\"" + spl[q].split(",")[1] + "\"},"; 
        else 
         dt += "{\"text\":\"" + spl[q].split(",")[0] + "\"},"; 
       } 
       dt += "]}]"; 
       console.log(dt); 

       $('#frmt1').jstree({ 
        'core': { 
         'data': dt; 
        }, 
        "checkbox": { 
         "whole_node": false, 
         "keep_selected_style": true, 
         "three_state": true, 
         "tie_selection": false 
        }, "search": { 
         "fuzzy": true 
        }, "plugins": ["checkbox", "search"] 
       }); 
       $('#frmt1').jstree(true).settings.core.data = dt; 
       $('#frmt1').jstree(true).refresh(); 
      } 
     </script> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script src="jstree.min.js"></script> 
     <button>>></button> 

     <script> 
      $('#html').jstree(); 
      $('#frmt').jstree({ 
       'core': { 
        'data':<%= session.getAttribute("PATH")%> 
       }, 
       "checkbox": { 
        "whole_node": false, 
        "keep_selected_style": true, 
        "three_state": true, 
        "tie_selection": false 
       }, "search": { 
        "fuzzy": true 
       }, "plugins": ["checkbox", "search"] 
      }); 

      $('button').on('click', function() { 
       a = $('#frmt').jstree("get_checked"); 
       callGraph(a); 
       // window.location = "read.jsp?name="+a; 
      }); 

     </script> 

    </body> 
</html> 

ответ

1

Вы должны удалить двойные кавычки рядом с обратной косой черты и двойные кавычки рядом с DT. Следующее поможет вам.

var dt = [{"text":"DC=test,DC=in","children":[; 
       var cnt = spl.length - 1; 
       for (q = 0; q < cnt; q++) { 
        if (spl[q].startsWith(",")) 
         dt += {"text":" + spl[q].split(",")[1] + "},; 
        else 
         dt += {"text":" + spl[q].split(",")[0] + "},; 
       } 
       dt += ]}]; 
+0

Спасибо, приятель ... Теперь он работает отлично :) –

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