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

有没有其他js可以查看json。

提前致谢。

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 的插件站点中找到更多可配置的 jQuery 树小部件，例如jsTree或zTree。

我用 zTree 创建了一个简短的示例，它根据您的数据生成以下树： zTree 的输出 Demo

于 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，但我在 Plunker 中键入了您的示例，以检查树如何处理这三种类型的数据；你的数据，从 javascript 对象获取的 json 数据和从该 json 数据获取的对象。

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

于 2013-08-01T11:59:20.770 回答
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 回答
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

以下 json 数据有效。

var data = [
    {
        label: 'RT @dna: IPL spot-fixing: Jagmohan Dalmiya still clueless about N Srinivasan\'s return http://t.co/PwDniu8sJg',
        children: [
            {
                label: 'IPL spot-fixing: Jagmohan Dalmiya still clueless about N Srinivasan\'s return http://t.co/PwDniu8sJg'
            }
        ]
    }
];

顺便说一句，您想在树中准确显示什么？

于 2013-08-05T07:23:46.440 回答