您的位置：首页 > Web前端 > JavaScript

jstree静态生成树并为树添加触发事件

2015-08-06 16:17 513 查看

本章将介绍如何简单的使用jstree生成树（生成树的数据是静态的），并为树添加点击事件。

1. 建一个jsp页面，引入jquery.js(在其他js前引用)，引入jstree所需的js，css文件（可从官网找）。

2. 在页面添加一个div，用来在页面展示树菜单。

3. 在页面写js (js必须写在页面最后)。

页面代码如下：

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<script src="${ctx}/common/jquery-1.9.1/jquery-1.9.1.js"></script>
<script src="${ctx}/common/dist/jstree.min.js"></script>
<link  href="${ctx}/common/dist/themes/default/style.min.css" rel="stylesheet" />
</head>
<body>
<div id='tree1'></div>
<script>
//菜单数据
var data=[{"id":"1","parent":"#","text":"top1"},{"id":"2","parent":"#","text":"top2"},{ "id" : "3", "parent" : "2", "text" : "Child 1"}];
//调取tree方法
tree(data);
function tree(data) {
// var data=eval('(' + data + ')');  //把json字符串转为json对象
// for(var o in data){               //js遍历json对象
//    alert("id:"+data[o].id+" test:"+data[o].text );
// }
//树形菜单
$('#tree1')
.on("changed.jstree", function(e, data) {
if (data.selected.length) {alert( data.instance.get_node(data.selected[0]).text);} //输出点击的内容
})  //触发事件
.jstree({'core' : {'data' : data}}); //动态生成tree菜单
}
</script>
</body>
</html>

上篇文章简单介绍了通过静态方式生成树，下面一篇文章将进行动态生成树。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航