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

    <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...

  2. pymssql examples

    http://pymssql.org/en/latest/pymssql_examples.html Example scripts using pymssql module. Basic featu ...

  3. jquery的ajax可以传入的三种参数类型

    在jquery的ajax函数中,可以传入3种类型的数据 1.文本:"uname=alice&mobileIpt=110&birthday=1983-05-12" 2 ...

  4. 第 16 章 CSS 盒模型[上]

    学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...

  5. 电子商务中：B2C、B2B、C2B、C2C、O2O、P2P

     c2c实际是电子商务的专业用语,是个人与个人之间的电子商务.比如一个消费者有一台电脑,通过网络进行交易,把它出售给另外一个消费者,此种交易类型就称为C2C电子商务.淘宝是属于C2C模式的.   c2 ...

  6. Java --HashMap源码解析

    兴趣所致研究一下HashMap的源码,写下自己的理解,基于JDK1.8. 本文大概分析HashMap的put(),get(),resize()三个方法. 首先让我们来看看put()方法. public ...

  7. 跨平台日志清理工具 Log-Cutter v1.0.3 正式发布

    Log-Cutter 是JessMA开源组织开发的一个简单实用的日志切割清理工具.对于服务器的日常维护来说,日志清理是非常重要的事情,如果残留日志过多则严重浪费磁盘空间同时影响服务的性能.如果用手工方 ...

  8. vim自动补全插件YouCompleteMe

    前言 Valloric/YouCompleteMe可以说是vim安装最复杂的插件之一,但是一旦装好,却又是非常好用的.YouCompleteMe简称ycm 在安装折腾的过程中,我再一次的体会到,除了官 ...

  9. Java基础学习小记--多态

    题外话:总结了多年的学习心得,不得不说,睡眠是一个学习者的必需品!所谓"早起毁一天"不是没有道理哪,特别对Coders来说,有几天不是加班到夜里.好吧,我承认对于初学Java的我, ...

  10. Play 中如何使用 Ajax

    Play在内部使用了 jQuery 这个JavaScript库,让我们能够非常方便的进行Ajax操作.同时,为了能在JavaScript中方便地生成某个action对应的Url,Play还提供了一个  ...