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 getElementsByTagName的简写方式
Jun 27 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
JS array 数组详解
2009/03/22 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
ECMAScript6--解构
2017/03/30 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
详解Python中的文本处理
2015/04/11 Python
python正则表达式之作业计算器
2016/03/18 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
python破解同事的压缩包密码
2020/10/14 Python
EJB的角色和三个对象
2015/12/31 面试题
ajax是什么及其工作原理
2012/02/08 面试题
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
档案接收函范文
2014/01/10 职场文书
发展部经理职责规定
2014/02/22 职场文书
史上最牛辞职信
2015/05/13 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript