A. jstree从后台取数据加载后，在前台为什么展开不了节点，急啊···在线等
$('#tree_2').jstree({
'plugins': ["wholerow", "checkbox", "types"],
'core': {
"themes" : {
"responsive": false
},
'data': [{
"text": "Same but with checkboxes",
"children": [{
"text": "initially selected",
"state": {
"selected": true
}
}, {
"text": "custom icon",
"icon": "fa fa-warning icon-state-danger",
"state": {
"selected": true
}
}, {
"text": "initially open",
"icon" : "fa fa-folder icon-state-default",
"state": {
"opened": true
},
"children": ["Another node"]
}, {
"text": "custom icon",
"icon": "fa fa-warning icon-state-warning"
}, {
"text": "disabled node",
"icon": "fa fa-check icon-state-success",
"state": {
"disabled": true
}
}]
},
"And wholerow selection"
]
},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
}
});
B. jstree中想要选中子节点，父节点就会变成选中状态，需要如何修改。
修改方法：
JQuery
$('#子节点id').parent().attr('id');//通过子元素获取父元素
js
document.getElementById("子节点id").parentNode.getAttribute("id");
C. 如何用jsTree.js实现结点展开和收拢时图标的变化
您好，很高兴为您解答。
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--IE使用它所支持的最新版本-->
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>tree</title>
<linkhref="../css/bootstrap.min.css"rel="stylesheet">
<linkhref="../css/style.min.css"rel="stylesheet">
<linkhref="../css/font-awesome.min.css"rel="stylesheet">
</head>
<body>
<divid="myTree">
<ul>
<li>Root1</li>
<li>Root2
<ul>
<liid="child1">
<a>child1</a>
<ul>
<li>child1-1</li>
<li>child1-2</li>
</ul>
</li>
<li>child2</li>
<li>child3</li>
</ul>
</li>
<li>Root3</li>
</ul>
</div>
<scriptsrc="../js/jquery.min.js"></script>
<scriptsrc="../js/bootstrap.min.js"></script>
<scriptsrc="../js/jstree.min.js"></script>
<script>
$(function(){
$('#myTree').jstree();
$('#myTree').on("changed.jstree",function(e,data){
console.log(data.selected);
});
$('button').on('click',function(){
$('#myTree').jstree(true).select_node('child1');
$('#myTree').jstree('select_node','child1');
$.jstree.reference('#myTree').select_node('child1');
});
});
</script>
</body>
</html>
如若满意，请点击右侧【采纳答案】，如若还有问题，请点击【追问】
希望我的回答对您有所帮助，望采纳！
~O(∩_∩)O~
D. 如何给JsTree生成的树的每个节点添加上自定义的右键菜单
一个带有右键操作的树形菜单
$(document).ready(function(){
$.ajaxSetup({cache:false});
$("#browser").tree({
data : {
type : "json",
url : src,
async : true,
async_data : function (NODE) {
return { parent_Id : $(NODE).attr("id") || 0}
}
},
lang:{
loading:"目录加载中……"
},
rules:
{
draggable : "all" //这个设置可以使得节点进行拖动操作
},
ui:{
context : [ //自定义右键操作的可操作内容
{
id : "create",
label : "添加下级目录", //右键弹出菜单的此项操作屏显字样
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, //允许节点被右击时出现操作菜单
icon : "<%=request.getContextPath() %>/css/themes/default/create.png",//右键弹出菜单的此项操作图标
action : function (NODE, TREE_OBJ) {
//进行此项操作，将有这个函数事件被响应
}
},
"separator"//这个是在两个操作之间画一条分隔线
,
{
id : "edit",
label : "编辑目录信息",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
icon : "<%=request.getContextPath() %>/image/reg2.gif",
action : function (NODE, TREE_OBJ) {
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
}
},
"separator"
,
{
id : "privilege",
label : "设置目录权限",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
icon : "<%=request.getContextPath() %>/css/themes/default/rename.png",
action : function (NODE, TREE_OBJ) {
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
}
},
"separator",
{
id : "delete",
label : "删除",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
icon : "<%=request.getContextPath() %>/css/themes/default/remove.png",
action : function (NODE, TREE_OBJ) {
var tree=$.tree_reference("browser");
openWindow('myurl','','',function(){
//下边的.parent()和.refresh()均为v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，这些将不被支持。
NODE=$(tree.parent(NODE));
if($(NODE).attr("id")==undefined){
tree.refresh();
}else{
TreeRefresh();
}
});
}
},
"separator",
{
id : "others",
label : "其他操作",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
icon : "<%=request.getContextPath() %>/css/images/cut.png",
action : function (NODE, TREE_OBJ) {
alert("暂无可提供操作。");
}
}
]
},
callback : {
onselect: function(node) {
//(a);
}
}
});
function treeRefresh(nodeid){
var rid=nodeid;
var tree=$.tree_reference("browser");
var par_node=tree.parent($("#"+rid));
tree.refresh(par_node);
}
});
E. jsTree想实现点击父节点的文字展开, 而不是点左边的下来按钮, 我查了官方的API, 没找的合适
刚好来我也碰到这源个问题。bind("select_node.jstree", function (event, data) { //myThis.id 是jstree的Id,还有你必须设置每个节点的id
$('#' + myThis.id).jstree("toggle_node", "#"+data.rslt.obj.attr("id"));
})
F. 如何获得所有选中的节点jstree
var ref = $('#jstree').jstree(true);//获得整个树
sel = ref.get_selected(); //获得所有选中节点，返回值为数组专
或者
sel = ref.get_top_selected(); //获得所有选中的顶层属节点，返回值为数组
G. jquery jstree的 refresh函数怎么用
var tree = jQuery.jstree.reference("#jstree");
tree.refresh();
请参考这个国外的网址： http://stackoverflow.com/questions/3682045/how-can-i-refresh-the-contents-of-a-jstree。
我是用ajax加载的jstree，在一个button的onclick中调用了上面两段代码，成功刷新了jstree!
H. jstree 树结构有两种分类，怎么只选择其中一棵树
思路就是：找出父节点的所有子节点的checked的属性设置成与父节点一致即可
我是利用jquery实现，看看是否符合你的要求
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#tree").treeview();
$("input[name='ids']").click(function(){
var checkedValue = this.checked;
$(this).parent("li").find("input[name='ids']").attr("checked",checkedValue);
});
})
</script>
<ul id='tree'>
<li>
<input type='checkbox' name='ids' id="test"/>
<span class='folder'>test1</span>
<ul>
<li>
<input type='checkbox' name='ids' />
<span class='folder'>test11</span>
</li>
</ul>
<ul>
<li>
<input type='checkbox' name='ids' />
<span class='folder'>test12</span>
<ul>
<li>
<input type='checkbox' name='ids' />
<span class='folder'>test121</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>