2016-05-05 7 views
0

私はhtmlでjstreeを実装し、jsonから入力としてデータを提供しました。
root nodeをクリックすると、そのノードのj1_5またはidが表示されます。そのノードに与えられたテキストをフェッチして、どうすればいいのですか? はここであなただけのノードから値を取得するには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

です。 これはあなたを助けるでしょう。

<!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はまったく設定されていません。この行は安全に削除することができます。

関連する問題