请问jstree的一些用法
日期：2014-05-16 浏览次数：20369 次
请教jstree的一些用法
现在有一个jstree生成的树，我想通过函数调用模拟节点点击，请问如何实现？
------解决方案--------------------
直接触发它的click事件就可以了
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree v.1.0 - Demo</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<link type="text/css" rel="stylesheet" href="../_docs/syntax/!style.css" />
<link type="text/css" rel="stylesheet" href="../_docs/!style.css" />
<script type="text/javascript" src="../_docs/syntax/!script.js"></script>
</head>
<body id="demo_body">
<div id="container">
<h1 id="dhead">jsTree v.1.0</h1>
<h1>DEMO</h1>
<h2>Creating a tree, binding events, using the instance</h2>
<div id="description">
<p>Here is how you create an instance, bind an event and then get
the instance.</p>
<div id="demo1" class="demo" style="height: 100px;">
<ul>
<li id="phtml_1"><a href="#">Root node 1</a>
<ul>
<li id="phtml_2"><a href="#">Child node 1</a></li>
<li id="phtml_3"><a href="#">Child node 2</a></li>
</ul></li>
<li id="phtml_4"><a href="#">Root node 2</a></li>
</ul>
</div>
<button id="btn">点击Child node 2</button>
<script type="text/javascript" class="source below">
$(function() {
$('#btn').click(function() {
$('#phtml_3 a').click();
});
$("#demo1")
.jstree(
{
"plugins" : [ "themes", "html_data", "ui",
"crrm", "hotkeys" ],
"core" : {
"initially_open" : [ "phtml_1" ]
}
})
.bind("loaded.jstree", function(event, data) {
}).delegate("a", "click", function(event, data) {
alert('被点击了')
});
});
</script>
</div>
</body>
</html>
------解决方案--------------------
就是通过自己写的带代码展开指定的节点，而不是靠鼠标点击？
楼主可以研究下ui plugin和crrm plugin这2个插件的API
http://www.jstree.com/documentation/ui
http://www.jstree.com/documentation/crrm
JSTree API：http://www.jstree.com/documentation
现在有一个jstree生成的树，我想通过函数调用模拟节点点击，请问如何实现？
------解决方案--------------------
直接触发它的click事件就可以了
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree v.1.0 - Demo</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<link type="text/css" rel="stylesheet" href="../_docs/syntax/!style.css" />
<link type="text/css" rel="stylesheet" href="../_docs/!style.css" />
<script type="text/javascript" src="../_docs/syntax/!script.js"></script>
</head>
<body id="demo_body">
<div id="container">
<h1 id="dhead">jsTree v.1.0</h1>
<h1>DEMO</h1>
<h2>Creating a tree, binding events, using the instance</h2>
<div id="description">
<p>Here is how you create an instance, bind an event and then get
the instance.</p>
<div id="demo1" class="demo" style="height: 100px;">
<ul>
<li id="phtml_1"><a href="#">Root node 1</a>
<ul>
<li id="phtml_2"><a href="#">Child node 1</a></li>
<li id="phtml_3"><a href="#">Child node 2</a></li>
</ul></li>
<li id="phtml_4"><a href="#">Root node 2</a></li>
</ul>
</div>
<button id="btn">点击Child node 2</button>
<script type="text/javascript" class="source below">
$(function() {
$('#btn').click(function() {
$('#phtml_3 a').click();
});
$("#demo1")
.jstree(
{
"plugins" : [ "themes", "html_data", "ui",
"crrm", "hotkeys" ],
"core" : {
"initially_open" : [ "phtml_1" ]
}
})
.bind("loaded.jstree", function(event, data) {
}).delegate("a", "click", function(event, data) {
alert('被点击了')
});
});
</script>
</div>
</body>
</html>
------解决方案--------------------
就是通过自己写的带代码展开指定的节点，而不是靠鼠标点击？
楼主可以研究下ui plugin和crrm plugin这2个插件的API
http://www.jstree.com/documentation/ui
http://www.jstree.com/documentation/crrm
JSTree API：http://www.jstree.com/documentation
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
