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页面跳转的常用方法整理
Oct 18 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
JavaScript 原型与原型链详情
Nov 02 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
python中assert用法实例分析
2015/04/30 Python
Python变量和数据类型详解
2017/02/15 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
易程科技软件测试笔试
2013/03/24 面试题
给排水专业应届生求职信
2013/10/12 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
小学母亲节活动方案
2014/03/14 职场文书
主题实践活动总结
2014/05/08 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
保证书格式
2015/01/16 职场文书
社会实践活动总结
2015/02/05 职场文书
婚宴领导致辞
2015/07/28 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS