jstree生成树并为树添加触发事件

王朝学院·作者佚名  2016-05-22
窄屏简体版  字體: 小  |  中  |  大  |  超大  

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>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航