本章将介绍如何简单的使用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. Bootstrap学习笔记系列6-----Bootstrap文本显示

    通过对文本或者链接添加下面的类,会使其展示不同的颜色,如果文本是个链接,鼠标移动到文本上,颜色会变暗. text-muted柔和的文本(深色) text-primary 表示基础的文本(蓝色) tex ...

  2. Lua使用心得(2)

    在lua脚本调用中,如果我们碰到一种不好的脚本,例如: while 1 do do end 那我们的程序主线程也会被阻塞住.那我们如何防止这种问题呢?下面就给出一个解决的办法. 首先为了不阻塞主线程, ...

  3. 关于ASP.NET的“Forms身份验证”

    目录结构如图如示: 如果用户没有通过身份验证则跳转到登录页面让用户登录,在配置文件的<system.web></system.web>结点下添加如下代码: <!--身份验 ...

  4. jquery基本选择器标签名选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 纯css的防止图片撑破页面的代码图片会自动按比例缩小

  6. 孙鑫MFC学习笔记14:网络编程

    1.OSI 2.TCP/IP与OSI对应关系 3.Socket 4.客户机/服务器模式 5.Windows Sockets 6.套接字类型 7.面向连接的socket编程 8.面向无连接的socket ...

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

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

  8. IOS个人帐号推送证书创建

    (IOS个人帐号推送证书制作所有步骤: 可以直接将产品推送证书和开发者推送证书一起制作到一个Identifier帐号下) 一. 首先需要创建一个id:有推送功能的(App ID Suffix)只有它才 ...

  9. 由一条Linux的grep命令说起

    今天在开发的时候,看到同事使用了这样的一条linux命令 grep 'class YourClass' -rwi * |grep -v svn 想到了 grep命令的,几个参数. -r 明确要求搜索子 ...

  10. GJM : Python简单爬虫入门 (一) [转载]

    版权声明:本文原创发表于 [请点击连接前往] ,未经作者同意必须保留此段声明!如有侵权请联系我删帖处理! 为大家介绍一个简单的爬虫工具BeautifulSoup BeautifulSoup拥有强大的解 ...