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

本章将介绍如何简单的使用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>

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

转载于:https://www.cnblogs.com/sky-/p/4708277.html

jstree静态生成树并为树添加触发事件相关推荐

laravel 添加触发事件
laravel事件主要包括事件类(app/Events下面),监听器 (app/Listeners),绑定事件和监听 1. 事件类一般格式如下: class TestEvent {use Seria ...
为jquery.AutoComplete添加触发事件
上次为jQuery.AutoComplete加上了提示的功能,详情请访问我的博客:<如何让jquery.Autocomplete支持提示?>,这一次,我需要再给jQuery.autoCom ...
[unreal4入门系列之十四] 在UE4中添加碰撞触发事件
一.在HUD中显示消息 1) 在MyHUD.h中定义一个结构来表示我们的消息: #pragma once #include "GameFramework/HUD.h" #inclu ...
SRPG游戏开发（六十）第十一章地图动作与地图事件 - 九触发事件与切换回合(Trigger Events and Change Turn)
返回<SRPG游戏开发>导航第十一章地图动作与地图事件(Map Action and Map Event) 我们已经有了剧本,而且可以运行剧本,但我们还缺少对地图的操作控制. 我们这一 ...
在C#中使用代理的方式触发事件 (委托和事件 ) （转）
From: http://www.cnblogs.com/gzhnan/articles/1859477.html 在C#中使用代理的方式触发事件 (委托和事件 ) 事件(event)是一个非常重要 ...
《基于Qt的VR编辑器开发》（Yanlz+Unity+SteamVR+5G+AI+VR云游戏+Qt+编辑器+跨平台+人机交互+触发事件+立钻哥哥+==）
<基于Qt的VR编辑器开发> <基于Qt的VR编辑器开发> 版本作者参与者完成日期备注 YanlzFramework_Qt_V01_1.0 严立钻 2019.09.04 ...
在C#中使用代理的方式触发事件
事件(event)是一个非常重要的概念,我们的程序时刻都在触发和接收着各种事件:鼠标点击事件,键盘事件,以及处理操作系统的各种事件.所谓事件就是由某个对象发出的消息.比如用户按下了某个按钮,某个文件发 ...
关于Input内容改变的触发事件
1.onchange onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <se ...
jquery的实时触发事件(textarea实时获取中文个数)
jquery的实时触发事件(textarea实时获取中文个数) (2014-09-16 11:49:50) 转载▼ 标签: 实时触发事件中文个数 onpropertychange oninput o ...
html 按下和松开事件,JQuery通过键盘控制键盘按下与松开触发事件
JQuery通过键盘控制键盘按下与松开触发事件效果图: HTML部分: 首先设置几个盒子,用来构建这个页面的大致框架. 给盒子相应的类名以及id,方便css的布局以及JQuery的获取. 在盒子内放 ...

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

jstree静态生成树并为树添加触发事件相关推荐

最新文章

热门文章