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 相关文章推荐
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
JS实现躲避粒子小游戏
Jun 18 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 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
浅谈Python 函数式编程
2020/06/20 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
一岗双责责任书
2014/04/15 职场文书
灰雀教学反思
2014/04/28 职场文书
运动会800米赞词
2015/07/22 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
德劲DE1108畅想
2021/04/22 无线电