1

http://mbraak.github.io/jqTree/#tutorialから jqTree を使用しようとしています

私のページは

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> Json Parser </TITLE>
       <link rel="stylesheet" href="css/jqtree.css">
       <script src="js/jquery-2.0.3.min.js"></script>
       <script src="js/tree.jquery.js"></script>
       <script type="text/javascript">


 $(function() {
   var data = [{"tweetText":"RT @dna: IPL spot-fixing: Jagmohan Dalmiya still clueless about N Srinivasan's return http://t.co/PwDniu8sJg","urlsMentioned":[],"usersMentioned":[{"userId":17710740,"screenName":"dna","userName":"dna"}],"source":"<a href=\"http://twitter.com/download/android\" rel=\"nofollow\">Twitter for Android</a>","tweetId":362907208733827100,"reTweetCount":12,"reTweeted":true,"createdDate":"Thu Aug 01 12:06:35 UTC 2013","user":{"location":"","userId":24525170,"screenName":"varuntripathi1","userName":"varun","profileDescription":"","language":"en"},"reTweetedStatus":{"tweetText":"IPL spot-fixing: Jagmohan Dalmiya still clueless about N Srinivasan's return http://t.co/PwDniu8sJg","urlsMentioned":["http://dnai.in/bAoD"],"usersMentioned":[],"source":"<a href=\"http://twitter.com/tweetbutton\" rel=\"nofollow\">Tweet Button</a>","tweetId":362606709404991500,"reTweetCount":12,"reTweeted":false,"createdDate":"Wed Jul 31 16:12:31 UTC 2013","user":{"location":"India","userId":17710740,"screenName":"dna","userName":"dna","profileDescription":"We are India’s favourite English daily delivering news, views & analyses. Follow us for real-time news updates. PS: This Twitter feed is not operated by a bot.","language":"en"},"hashTags":[]},"hashTags":[]}]
$('#tree1').tree({ 
    data: data
});
 });
   </script>
 </HEAD>

 <BODY>
    <div id="tree1">
    </div>
 </BODY>
</HTML>

値は表示されません。var data = [ { label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] }, { label: 'node2', children: [ { ラベル: 'child3' } ] } ];

両方のjsonが有効なものであっても。これまたはjsonのノードを選択するために利用可能な他のjsをどのように解決しますか。

jsfiddle

json を表示するために使用できる他の js はありますか。

前もって感謝します。

4

6 に答える 6

5

おそらくすでに理解されているように、valid JSON!= valid data.

要件に対応するデータをコンストラクターに提供する必要があります。

jqTreeの場合、つまり

[
    {
        "label":"node 1",
        "children": [
            {
                "label": "node 1.1"
            },
            {
                "label": "node 1.2"
            }
        ]
    },
    {
        "label": "node 2"
    }
]

等

したがって、次のようなデータを再フォーマットする関数が必要です。

function formatData(arr) {
    var label, data = [], obj, node;
    if(!$.isArray(arr)) {
        arr = [arr];
    }
    console.log(arr);
    var l = arr.length, i;

    for(i=0; i< l; ++i) {
        node = {};
        obj = arr[i];
        node.label = obj.user.screenName + ": " + obj.tweetText + " (" + obj.createdDate + ")";
        if(typeof obj.reTweetedStatus == "object") { //fetch children
            node.children = formatData(obj.reTweetedStatus);
        }
        data.push(node);
    }

    return data;
}

次のようなものを返します

[{
    "label": "varuntripathi1: RT @dna: IPL...Jg (Thu Aug 01 12:06:35 UTC 2013)",
    "children": [{
        "label": "dna: IPL spot-fixing: Ja...Jg (Wed Jul 31 16:12:31 UTC 2013)"
    }]
}]

これにより、次のようなツリーが作成されます。

jqTree 出力

デモ

余談ですが、jqTree でやりたいことを実行するのは難しいと思います。私の見解では、カスタマイズするのは比較的難しいです。

jQuery のプラグイン サイトで、jsTreeやzTreeなど、より構成可能な jQuery ツリー ウィジェットを見つけることができます。

データに基づいて次のツリーを生成する zTree を使用した短い例を作成しました: zTree の出力 デモ

于 2013-08-11T15:01:22.647 に答える
1

データ変数は JSON ではありません。JSON は、この場合、JavaScript オブジェクトを取得するために解析できるフォーマットされた文字列です。

そのオブジェクトの適切な JSON 文字列は次のとおりです。var jsonData = "[{"label":"node1","children":[{"label":"child1"},{"label":"child2"}]},{"label":"node2","children":[{"label":"child3"}]}]"

jqTree を使用したことはありませんが、3 種類のデータでツリーがどのように機能するかを確認するために、Plunker に例を入力しました。あなたのデータ、javascriptオブジェクトから取得したjsonデータ、およびそのjsonデータから取得したオブジェクト。

http://plnkr.co/edit/Sw3BCigiU69jLkQkAw5U?p=preview

于 2013-08-01T11:59:20.770 に答える
0

回答を編集しました。これを試してみてください

 var data = [
"club":
        [{"id":1,"name":"This is a team name"}],
"members":
        [{"id":2,"name":"Test Name"},{"id":3,"name":"Another Name"},{"id":4,"name":"More Names"},{"id":5,"name":"Cool Person"}]
];
于 2013-08-01T11:42:22.963 に答える
0

サーバーから返されたjsonデータの周りに余分なブレースを追加してみましたが、うまくいきました

 $.post(your_url, null, function (data) {
    //add extra braces before binding to the tree
    data = $.parseJSON("[" + data + "]");        
    $('#tree1').tree({
        data: data,
        autoOpen: true,
        dragAndDrop: true
     });
  });
于 2013-08-04T21:31:52.490 に答える
0 
[{
   "club":
         { "id":1,"name":"This is a team name"},
   "members":
         [
             {"id":2,"name":"Test Name"},
             {"id":3,"name":"Another Name"},
             {"id":4,"name":"More Names"},
             {"id":5,"name":"Cool Person"}]
}];

[ と ] を入れる

于 2013-08-01T11:37:32.337 に答える