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中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 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
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
中英双版中文教师求职信
2013/10/27 职场文书
四年级科学教学反思
2014/02/10 职场文书
个人作风建设自查报告
2014/10/22 职场文书
会计岗位职责
2015/02/03 职场文书
公司辞职信模板
2015/05/13 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书