2016-05-05 70 views
0

我已經在html中實現了jstree並提供了數據作爲json的輸入。
當我點擊root node時,它只顯示我j1_5或該節點的任何id。我想獲取給該節點的文本,所以我該如何做到這一點? 這裏是我的文件點擊jschart實體時抓取文本

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>jstree basic demos</title> 
    <style> 
    html { margin:0; padding:0; font-size:62.5%; } 
    body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; } 
    h1 { font-size:1.8em; } 
    .demo { overflow:auto; border:1px solid silver; min-height:100px; } 
    </style> 
    <link rel="stylesheet" href="style.min.css" /> 
</head> 
<body> 
    <h1>HTML demo</h1> 

    <h1>Data format demo</h1> 
    <div id="frmt" class="demo"></div> 


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="jstree.min.js"></script> 
     <button>>></button> 
    <script> 
    // html demo 
    $('#html').jstree(); 
    $('#frmt').jstree({ 
     'core' : { 
      'data' : [ 
       { 

        "text" : "Root node", 
             "icon" : "http://jstree.com/tree-icon.png", 
        "state" : { "opened" : true }, 
        "children" : [ 
         { 
          "text" : "Child node 1", 
          "icon" : "jstree-file", 
                 "children" : [ 
         { 
          "text" : "Child node 1", 
          "icon" : "jstree-file", 
         }, 
         { "text" : "Child node 2" } 
        ] 
         }, 
         { "text" : "Child node 2" } 
        ] 
       } 
      ] 
     } 
    }); 
$('#frmt').on("changed.jstree", function (e, data) { 
        console.log(data.selected); 
       }); 
$('button').on('click', function() { 
        alert($('#frmt').jstree("get_selected")); 
       }); 
    </script> 
</body> 
</html> 

回答

1

你只需要指定ID屬性得到節點的值。 這會幫助你。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>jstree basic demos</title> 
    <style> 
    html { margin:0; padding:0; font-size:62.5%; } 
    body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; } 
    h1 { font-size:1.8em; } 
    .demo { overflow:auto; border:1px solid silver; min-height:100px; } 
    </style> 
    <link rel="stylesheet" href="style.min.css" /> 
</head> 
<body> 
    <h1>HTML demo</h1> 

    <h1>Data format demo</h1> 
    <div id="frmt" class="demo"></div> 


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="jstree.min.js"></script> 
     <button>>></button> 
    <script> 
    // html demo 
    $('#html').jstree(); 
    $('#frmt').jstree({ 
     'core' : { 
      'data' : [ 
       { 

        "text" : "Root node", 
             "icon" : "http://jstree.com/tree-icon.png", 
        "state" : { "opened" : true }, 
        "children" : [ 
         { 
          "text" : "Child node 1", 
          "icon" : "jstree-file", 
         "children" : [ 
         { 
          "id":"MyID", 
          "text" : "Child node 1", 
          "icon" : "jstree-file", 
         }, 
         {"id" : "Sub Name 2", "text" : "Child node 2" } 
        ] 
         }, 
         { "id" : "NAME 2","text" : "Child node 2" } 
        ] 
       } 
      ] 
     } 
    }); 
$('#frmt').on("changed.jstree", function (e, data) { 
        console.log(data.selected); 
       }); 
$('button').on('click', function() { 
        alert($('#frmt').jstree("get_selected")); 
       }); 
    </script> 
</body> 
</html> 
+0

謝謝哥們....現在工作得很好 –

0

你可以選擇的節點的文本值,從您在changed.jstree事件回調接收data對象參數。

Here工作小提琴。在這個例子中,我在changed.jstree事件該行補充一點:

console.log('Node Text = ', data.node.text); 

data對象包含許多信息。在selected屬性中,您找到了元素id
node屬性中有很多屬性,text是你需要的屬性。在裏面有jstree中選定元素的文本。

注意:在您的代碼中,您打電話給$('#html').jstree(),但您的html標籤根本沒有設置id。你可以安全地刪除這條線。