我如何打开/关闭节点双或单单击节点名称的?就像这里的第一个树样例一样-但有使用jsTree 0.9.8
- 使用jsTree 1.0rc2
<html>
<head>
<title> dashboard</title>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript" src="_lib/jstreegrid.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var data = [{
data: "basics",
attr: {SOF: "<a href="http://www.w3schools.com">Visit W3Schools.com!</a>"},
children: [
{data: "login", attr: {run: "run"},
children: [
{data: "login", attr: {}}
]
} ,
{data: "Academic Year", attr: {run: "run"},
children: [
{data: "login", attr: {}},
{data: "Academic Year", attr: {filter: "mini", SOF: "<a href="http://www.w3schools.com">Visit W3Schools.com!</a>"}}
]
}
]
}];
$("div#jstree").jstree({
plugins: ["themes","json_data","grid","dnd"],
json_data: {data: data},
grid: {
columns: [
{width: 220, header: "Group"},
{cellClass: "col2", value: "run", width: 40, header: "run"},
{cellClass: "col3", value: "filter", width: 40, header: "filter"},
{cellClass: "col4", value: "SOF", width: 450, header: "SOF"}
]
},
dnd: {
drop_finish : function () {
},
drag_finish : function () {
},
drag_check : function (data) {
return {
after : true,
before : true,
inside : true
};
}
}
});
});
//]]>
</script>
</head>
<body>
<div id="jstree"></div>
</body>
</html>
一种方法是启用类型和ui插件，并在默认类型上定义select_node事件处理程序，如下所示:
$(element)
.jstree({
"types" : {
"types" : {
"default" : {
"select_node" : function(e) {
this.toggle_node(e);
return false;
}
}
}
},
"plugins" : [ "themes", "html_data","types", "ui" ] });
除了TK的正确答案…
当你点击带有href属性(由JSON、XML数据或直接在HTML中设置)的树状项目时，这个解决方案会破坏导航。
要解决这个问题，在叶子配置的"types"(锚必须触发导航)中设置这个处理程序:
"select_node": function (e) {
document.location = e.children("a").attr("href");
return false;
}
在创建树时不需要添加clickable: [...]选项吗?
$('#domainvariants').jstree({
plugins : ["themes","html_data","ui","crrm"]
}).bind("select_node.jstree", function (event, data) {
return data.instance.toggle_node(data.node);
});