本章将介绍如何简单的使用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. 获取PC或移动设备的所有IP地址

    不论是PC还是移动设备,都有可能同时存在几个IP地址(如具有多块网卡),本文介绍怎样获得PC或移动设备的所有IP地址. // 获得所有IP地址 public static void get_ip(){ ...

  2. 【java手记】------------------------java中转发和重定向区别

    转发: request.getRequestDispatcher("success.jsp").forward(request,response); 在服务器组件收到用户请求后.经 ...

  3. Get,Post请求中文乱码问题有效解决方法

    本文主要介绍如何有效解决web请求中的乱码问题,其实解决方法有很多种,不同的请求类型解决方法也不相同. 本文只介绍最方便的一种: 1.先修改jsp中的编码方式 2.针对Post方式提交的请求如果出现乱 ...

  4. [javaSE] 反射-动态加载类

    Class.forName(“类的全称”) ①不仅表示了类的类类型,还代表了动态加载类 ②请大家区分编译,运行 ③编译时刻加载类是静态加载类,运行时刻加载类是动态加载类 Ⅰ所有的new对象都是静态加载 ...

  5. php取默认值以及类的继承

    (1)对于php的默认值的使用和C++有点类似,都是在函数的输入中填写默认值,以下是php方法中对于默认值的应用: <?phpfunction makecoffee($types = array ...

  6. PHP 导出Excel 文档

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  7. rabbitmq qos prefetch count的设置与作用

    因为原来使用了MQ作为rpc机制,随着客户交易量越来越大,很多服务器推送行情的压力很大,最近打算重写为批量模式,又重新看了下qos和prefetch设置的作用以确定优化的具体细节. 消费者在开启ack ...

  8. 通过rsync+inotify实现数据实时备份同步

    一.环境描述 测试环境 需求:服务器A与服务器B为主备服务模式,需要保持文件一致性,现采用sersync基于rsync+inotify实现数据实时同步 环境描述: 主服务器172.26.7.50 ,从 ...

  9. ERROR 1452 (23000): Cannot add or update a child row: a foreign key constraint......

    今天用Hibernate建立外键的时候发现没有建立 但是创建了这个字段 情景: user表有一字段role,role是role表id字段的外键 原因: user表中已经有记录了,而且有的记录role这 ...

  10. JS的window.location应用实例

    window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. Window Locationwindow.location 对象在编写时可不使用 window ...