如何填充孩子并单击每个孩子获得其内容
在下面的代码中,我想要拥有:
[{"cid":2091,"name":"name1","text":"Child 1"},{"cid":2095,"name":"name2","text":"A Child 2"},{"cid":2098,"name":"name3","text":"A Child 3"}]
代替
[ "Child 1", "A Child 2","A Child 3"]
我的意思是说如果我单击
Child 1
,我应该得到{"cid":2091,"name":"name1","text":"Child 1"}
这是jsfiddle:http://jsfiddle.net/2Jg3B/2102/
$('#jstree').jstree({
"json_data" : {
"data" : [
{
"data" : "A node",
"metadata" : { id : 23 },
"children" : [ "Child 1", "A Child 2","A Child 3"] // replace with [{"cid":2091,"name":"name1","text":"Child 1"},{"cid":2095,"name":"name2","text":"A Child 2"},{"cid":2098,"name":"name3","text":"A Child 3"}]
},
{
"attr" : { "id" : "li.node.id1" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
"plugins" : [ "themes", "json_data", "ui" ]
});
$("#jstree").bind(
"select_node.jstree", function(evt, data){
if(data.inst._get_parent().length <= 0 || data.inst._get_parent()===-1){
console.log('data',data.inst.get_json());
console.log('data.node.id',data);
}else{
var parent = data.inst._get_parent();
console.log(data.inst.get_json(parent));
}
//selected node object: data.node;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>
请注意:如果单击Child 1时单击
{"cid":2091,"name":"name1","text":"Child 1"}
,依此类推。.插件版本可以是新的,也可以是此版本请提前帮助我!
最佳答案
我不确定这是否是正确的解决方案,但仍可以100%确定。基本上我所做的就是用"text"
替换"data"
。
$('#jstree').jstree({
"json_data": {
"data": [
{
"data": "A node",
"metadata": { id: 23 },
"children": [
{
"data": "Child 1",
"cid": 2091,
"name": "name1",
"metadata": { "id": 2091, "text": "Child 1" }
},
{
"data": "A Child 2",
"cid": 2095,
"name": "name2",
"metadata": { "id": 2095, "text": "A Child 2" }
},
{
"data": "A Child 3",
"cid": 2098,
"name": "name3",
"metadata": { "id": 2098, "text": "A Child 3" }
}
]
},
{
"attr": { "id": "li.node.id1" },
"data": {
"title": "Long format demo",
"attr": { "href": "#" }
}
}
]
},
"plugins": ["themes", "json_data", "ui"]
});
$("#jstree").bind(
"select_node.jstree",
function(evt, data) {
if (data.inst._get_parent().length <= 0 || data.inst._get_parent() === -1) {
console.log('data', data.inst.get_json());
console.log('data.node.id', data);
} else {
console.log(data.inst.get_json());
}
//selected node object: data.node;
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>
更新资料
根据OP的评论,我们只需要跟踪单击了哪个元素?在这种情况下,我只是从
parent
中删除了console.log(data.inst.get_json(parent));