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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
js实现验证码干扰(静态)
Feb 22 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 session 预定义数组
2009/03/16 PHP
如何使用php输出时间格式
2013/08/31 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
xmlHTTP实例
2006/10/24 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
运动会通讯稿100字
2014/01/31 职场文书
八项规定整改措施
2014/02/12 职场文书
房屋租赁协议书
2014/04/10 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
公司员工辞职信范文
2015/05/12 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫