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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
python 日期操作类代码
2018/05/05 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
医学毕业生自荐信
2013/10/11 职场文书
小学语文教学反思
2014/02/10 职场文书
党员服务承诺书
2014/05/28 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB