struts2 jquery 打造无限层次的树


Posted in Javascript onOctober 23, 2009

<%-- tree.jsp --%>
<%@ page pageEncoding="gbk" contentType="text/html;charset=gbk" import="java.util.ArrayList" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<link rel="stylesheet" href="${myRoot }/jquery/jquery.treeview.css" />
<link rel="stylesheet" href="${myRoot }/jquery/screen.css" />
<script src="${myRoot }/jquery/jquery.js" type="text/javascript"></script>
<script src="${myRoot }/jquery/jquery.treeview.js" type="text/javascript"></script>
<%
//需要:Struts2 , jquery树插件,其下载地址为: http://xiazai.3water.com/200910/other/jquery.treeview.zip
//无限层次的树--作者 郴州拓职软件学院任文敏
//模拟数据库数据:每行数据包括--自己ID,自己内容,父亲ID
ArrayList ary = new ArrayList(); //所有数据
String[] ary1 = new String[]{"1","item1","0"}; //每行数据
ary.add(ary1);
ary1 = new String[]{"2","item2","0"};
ary.add(ary1);
ary1 = new String[]{"3","item3","0"};
ary.add(ary1);
ary1 = new String[]{"4","item1_1","1"};
ary.add(ary1);
ary1 = new String[]{"5","item1_2","1"};
ary.add(ary1);
ary1 = new String[]{"6","item1_2_1","5"};
ary.add(ary1);
ary1 = new String[]{"7","item1_2_2","5"};
ary.add(ary1);
ary1 = new String[]{"8","item2_1","2"};
ary.add(ary1);
ary1 = new String[]{"9","item2_1_1","8"};
ary.add(ary1);
ary1 = new String[]{"10","item2_2","2"};
ary.add(ary1);
ary1 = new String[]{"11","item3_1","3"};
ary.add(ary1);
ary1 = new String[]{"12","item3_2","3"};
ary.add(ary1);
request.setAttribute("datas",ary);
%>
<script type="text/javascript">
$(document).ready(function(){
var oAppend;
<s:iterator value="#request.datas" id="t">
if($("#ul${t[2]}").size()==0) { //如果父亲UL找不到,则创建父亲UL,并附加到父亲LI
oAppend = $("<ul id='ul${t[2]}'><li id='li${t[0]}'><input type='checkbox' value='ck${t[0]}' />${t[1]}</li></ul>").appendTo($("#li${t[2]}"));
}
else { //如果父亲UL找到了,则直接附加到父亲UL
oAppend = $("<li id='li${t[0]}'><input type='checkbox' value='ck${t[0]}' />${t[1]}</li>").appendTo("#ul${t[2]}");
}
</s:iterator>
$("#ul0").treeview({ //通过根节点容器展示整个树
});
});
</script>
<!-- 容纳根节点的UL,这里0是根节点的父亲节点 -->
<ul id="ul0"></ul>

jquery树插件,其下载地址为: http://xiazai.3water.com/200910/other/jquery.treeview.zip

Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
JS 实现分页打印功能
May 16 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
node+vue实现文件上传功能
May 28 Javascript
jquery 插件开发方法小结
Oct 23 #Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 #Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 #Javascript
JavaScript 常用函数库详解
Oct 21 #Javascript
再谈ie和firefox下的document.all属性
Oct 21 #Javascript
javascript void(0)的妙用
Oct 21 #Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 #Javascript
You might like
php判断是否为json格式的方法
2014/03/04 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python打造爬虫代理池过程解析
2019/08/15 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
公务员年总结的自我评价
2013/10/25 职场文书
物业管理应届生求职信
2013/10/28 职场文书
房产销售经理职责
2013/12/20 职场文书
经管应届生求职信范文
2014/05/18 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
2014年纪委工作总结
2014/12/05 职场文书
企业催款函范本
2015/06/24 职场文书
卫生主题班会
2015/08/14 职场文书
Golang gRPC HTTP协议转换示例
2022/06/16 Golang