jqTree显示未定义的有效json
jac*_*ind 1 javascript jquery jqtree
我正在尝试使用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:[ {label:'child3'}]}];
即使两个json都是有效的.我如何解决这个或任何其他可用于选择json节点的js.
还有其他js可以查看json.
提前致谢.
正如你可能已经想到的那样,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做你想做的事.在我看来,定制相对困难.
您可以在jQuery的插件站点中找到更多可配置的jQuery树小部件,例如jsTree或zTree.
我用zTree创建了一个简短的例子,它根据你的数据产生了一个下面的树:
演示