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 相关文章推荐
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
python设定并获取socket超时时间的方法
2019/01/12 Python
python按比例随机切分数据的实现
2019/07/11 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
python_mask_array的用法
2020/02/18 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
环境工程大学生个人的自我评价
2013/10/08 职场文书
酒店管理自荐信
2013/10/23 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
抄作业检讨书
2014/02/17 职场文书
高中军训感言400字
2014/02/24 职场文书
中学生寄语大全
2014/04/03 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
区域经理岗位职责
2015/02/02 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
中学总务处工作总结
2015/08/12 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
Python办公自动化解决world文件批量转换
2021/09/15 Python
mysql如何能有效防止删库跑路
2021/10/05 MySQL
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
vue判断按钮是否可以点击
2022/04/09 Vue.js
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL