本章将介绍如何简单的使用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. 【C#】在窗体中水平居中的控件，到了XP下不居中的解决办法

    我时不时会遭遇这个操蛋问题,今天得闲研究了一下,解决如下: A.将窗体FormBorderStyle属性改为Fixed系,当然这会导致用户不能拖拉窗口大小,所以你可能需要B计划↓ B.确保在[VS]中 ...

  2. 微信--获取access_token

    今天,终于鼓足勇气,来到这片圣地,迎来人生新的开始. 第一次...... 最近做微信公众号,记录一下,仅供参看. 关于access_token微信公众号有相关说明: access_token是公众号的 ...

  3. CSS使图片变灰

    为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...

  4. 提高生产性工具(四) - XML数据库的尝试

    首先祝大家新年快乐.身体健康,平安就是福气. 对于一般的个人迷你项目,数据量不大的时候,完全没有必要使用数据库,管理数据使用XML就可以了. 自己尝试写了一个XML数据库,插入1w条小记录,大概3M大 ...

  5. asp.net动态生成按钮Button控件

    1.动态生成button控件及响应服务端和客户端事件 void BindButtons(){ foreach (var item in items) { Button Btn = new Button ...

  6. Verilog学习笔记基本语法篇（十三）...............Gate门

    Verilog中已有一些建立好的逻辑门和开关的模型.在所涉及的模块中,可通过实例引用这些门与开关模型,从而对模块进行结构化的描述. 逻辑门: and (output,input,...) nand ( ...

  7. 【Effective Java】6、使用复合优先于使用继承

    这个,不管是什么书都会这样说,因为常常我们并不需要继承,而只是想把类进行一定的扩展,而我们想扩展的属性或方法对应的类都有,这个时候如果两者是is a的关系,这种关系是确实存在的,那么就可以使用继承,不 ...

  8. 理解 OpenStack 高可用(HA) （6）: MySQL HA

    本系列会分析OpenStack 的高可用性(HA)概念和解决方案: (1)OpenStack 高可用方案概述 (2)Neutron L3 Agent HA - VRRP (虚拟路由冗余协议) (3)N ...

  9. [翻译] Autofac 中注册的概念

    原文链接:http://docs.autofac.org/en/latest/register/registration.html 所谓注册组件,是指创建 ContainerBuilder 的实例,并 ...

  10. Mac上安装go环境

    Mac 安装 GO语言开发环境 官网:https://golang.org/ go语言的安装:http://docscn.studygolang.com/doc/install 下载:go1.7rc3 ...