jstree静态生成树并为树添加触发事件
本章将介绍如何简单的使用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静态生成树并为树添加触发事件的更多相关文章
- jstree动态生成树
前篇文章简单介绍了静态生成树,这篇文章将通过后台把数据通过json形式传到前台,进行动态生成树. 本篇的程序所用框架为Spring MVC,可以很方便的通过controller层传json到前台. 前 ...
- 除了信号触发线程与接收者线程相同的情况能直接调用到slot,其它情况都依赖事件机制(解决上面代码收不到信号的问题其实很简单,在线程的run();函数中添加一个事件循环就可以了,即加入一句exec();),信号槽不就是一个回调函数嘛
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { pThreadCon = new CSerialThread ...
- C#主菜单动态添加子菜单并设置触发事件
我所使用的是devxepress中的主菜单栏时barsubitem控件,想的是在其能够动态添加子菜单栏并能点击触发事件: /// <summary> /// 创建主按钮的子按钮 /// & ...
- MapControl图层删除或添加触发监听事件
监听MapControl中对于图层添加和删除的事件 IActiveViewEvents_Event m_MapActiveViewEvents = m_mapControl.Map as IActiv ...
- 给Jqgrid添加横向滚动条,实现点击行数据,触发事件。
function reloadNoKitScheduleGridData() { $("#noKittingScheduleList").jqGrid({ url: ". ...
- denounce函数:Javascript中如何应对高频触发事件
在DOM Event的世界中,以scroll.resize.mouseover等为代表的高频触发事件显得有些与众不同.通常,DOM事件只有在明确的时间点才会被触发,比如被点击,比如XMLHttpReq ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- jQuery-1.9.1源码分析系列(十) 事件系统——主动触发事件和模拟冒泡处理
发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ...
- 选项卡切换:自动定时&主动触发事件
最初学习的是手动触发事件,添加的是onmouseover,其中index是关键,tab标签与现实内容的div索引一一对应,遍历tab标签,当鼠标移动到某标签时,触发对应的内容div显示.for(var ...
随机推荐
- iOS高效开发之Xcode应用插件
前言:本文非原创 文章摘自 www.cocoachina.com/industry/20130918/7022.html 古人云“工欲善其事必先利其器”,打造一个强大的开发环境,是立即提升自身战 ...
- Pydev Debugger not working with breakpoints
I have a simple test module: print("fish")print("sticks")It runs pretty fast as ...
- Map遍历两种方式
Java代码 Map<String,String> map=new HashMap<String,String>(); map.put("username" ...
- 几个最常用的git命令
之前在Windows下一直用可视化的tortoise git,在Linux下最好是用命令行,以下是常用的git命令: git status:显示当前已修改的文件,新增的文件 git checkout ...
- 泛函编程(29)-泛函实用结构:Trampoline-不再怕StackOverflow
泛函编程方式其中一个特点就是普遍地使用递归算法,而且有些地方还无法避免使用递归算法.比如说flatMap就是一种推进式的递归算法,没了它就无法使用for-comprehension,那么泛函编程也就无 ...
- AspectJ对AOP的实现
一:你应该明白的知识 1.对于AOP这种编程思想,很多框架都进行了实现.Spring就是其中之一,可以完成面向切面编程.然而,AspectJ也实现了AOP的功能,且实现方式更为简捷,使用更加方便,而且 ...
- Mysql优化的几点总结
正常情况下,初创公司的流量并不是很大,mysql数据库在未做优化的情况依然可以满足性能要求,特别是5.6版本后mysql在性能上还是有了很大提升,所以在初期并没有花精力在此上面.但后来发生的一系列问题 ...
- apache maven pom setting
<?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...
- [转载][翻译] IoC 容器和 Dependency Injection 模式
原文地址:Inversion of Control Containers and the Dependency Injection pattern 中文翻译版本是网上的PDF文档,发布在这里仅为方便查 ...
- [Tool] SourceTree初始化GitFlow遇到错误(git command not found)的解决方案
[Tool] SourceTree初始化GitFlow遇到错误(git command not found)的解决方案 问题情景 使用SourceTree,可以方便开发人员快速的套用GitFlow开发 ...