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

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

jstree静态生成树并为树添加触发事件的更多相关文章

  1. jstree动态生成树

    前篇文章简单介绍了静态生成树,这篇文章将通过后台把数据通过json形式传到前台,进行动态生成树. 本篇的程序所用框架为Spring MVC,可以很方便的通过controller层传json到前台. 前 ...

  2. 除了信号触发线程与接收者线程相同的情况能直接调用到slot，其它情况都依赖事件机制（解决上面代码收不到信号的问题其实很简单，在线程的run();函数中添加一个事件循环就可以了，即加入一句exec();），信号槽不就是一个回调函数嘛

    MainWindow::MainWindow(QWidget *parent) :   QMainWindow(parent)   {   pThreadCon = new CSerialThread ...

  3. C#主菜单动态添加子菜单并设置触发事件

    我所使用的是devxepress中的主菜单栏时barsubitem控件,想的是在其能够动态添加子菜单栏并能点击触发事件: /// <summary> /// 创建主按钮的子按钮 /// & ...

  4. MapControl图层删除或添加触发监听事件

    监听MapControl中对于图层添加和删除的事件 IActiveViewEvents_Event m_MapActiveViewEvents = m_mapControl.Map as IActiv ...

  5. 给Jqgrid添加横向滚动条，实现点击行数据，触发事件。

    function reloadNoKitScheduleGridData() { $("#noKittingScheduleList").jqGrid({ url: ". ...

  6. denounce函数：Javascript中如何应对高频触发事件

    在DOM Event的世界中,以scroll.resize.mouseover等为代表的高频触发事件显得有些与众不同.通常,DOM事件只有在明确的时间点才会被触发,比如被点击,比如XMLHttpReq ...

  7. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  8. jQuery-1.9.1源码分析系列（十） 事件系统——主动触发事件和模拟冒泡处理

    发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ...

  9. 选项卡切换：自动定时&主动触发事件

    最初学习的是手动触发事件,添加的是onmouseover,其中index是关键,tab标签与现实内容的div索引一一对应,遍历tab标签,当鼠标移动到某标签时,触发对应的内容div显示.for(var ...

随机推荐

  1. themepark模板中奇特的编码

    编码问题虽然经常碰到,但通过编码来实现源代码加密的是第一次碰到.只能用神奇来形容. 而且研究了几个小时,没有想到解决办法.代码基本可以通过不断执行输出,但无法判断是何种编码.

  2. Python 3 利用 subprocess 实现管道( pipe )交互操作读/写通信

    这里我们用Windows下的shell来举例: from subprocess import * #因为是举例,就全部导入了 为了方便你理解,我们用一个很简单的一段代码来说明: 可以看见我们利用Pop ...

  3. Gym 100917J---Judgement(01背包+bitset)

    题目链接 http://codeforces.com/gym/100917/problem/J Description standard input/outputStatements The jury ...

  4. 2014 ICPC---Relief grain（树链剖分）

    原题链接 Problem Description The soil is cracking up because of the drought and the rabbit kingdom is fa ...

  5. Scalaz（22）－ 泛函编程思维： Coerce Monadic Thinking

    马上进入新的一年2016了,来点轻松点的内容吧.前面写过一篇关于用Reader实现依赖注入管理的博文(Scalaz(16)- Monad:依赖注入-Dependency Injection By Re ...

  6. mongodb数据库备份导入导出数据

    备份数据: mongodump -h 192.168.2.20 -u game -p 12345678 -d dbname -o /data/test/ --excludeCollection=use ...

  7. 【笔记】InnoDB内存分配

    原文:http://www.mysqlperformanceblog.com/2006/05/30/innodb-memory-usage/ 有很多问题是有关InnoDB如何分配内存的.这里我试图解释 ...

  8. knockout源码分析之computed（依赖属性）

    一.序列图 二.主要代码文件 1.dependentObservable.js:主要包含ko.computed相关方法的处理2.dependencyDetection.js:主要包含依赖的监控上下文对 ...

  9. Owl Carousel – 支持触摸的 jQuery 响应式传送带插件

    Owl Carousel 是一个 jQuery 插件,使我们能够迅速地创建响应式传送带滑块.这个插件是触摸友好的,能与几乎任何的 HTML 内容兼容使用.另外,强大的选项设置支持分页/滑动速度,启用/ ...

  10. ZeroClipboard – 轻松实现复制文本到剪贴板功能

    ZeroClipboard 库提供了一种把文本复制到剪贴板的简单方法.Zero 表示该库是不可见的,用户界面则完全取决于你. 该库完全兼容 Flash Player 10.0.0 或以上版本,这就要求 ...