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数组处理多个字符串的连接问题
Aug 20 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
跟我学习javascript的循环
Nov 18 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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中curl使用指南
2015/02/05 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
python是怎么被发明的
2020/06/15 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
XML文档面试题
2015/08/05 面试题
linux面试题参考答案(9)
2016/01/29 面试题
校三好学生主要事迹
2014/01/11 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
开会通知短信大全
2015/04/20 职场文书
毕业实习感受与体会
2015/05/26 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
基于Python实现nc批量转tif格式
2022/08/14 Python