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文档操作wrap()方法实例简述
Jan 10 Javascript
浅谈javascript中return语句
Jul 15 Javascript
js实现文字滚动效果
Mar 03 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
详解 TypeScript 枚举类型
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
用PHP调用Oracle存储过程
2006/10/09 PHP
php数组总结篇(一)
2008/09/30 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
JS方法调用括号的问题探讨
2014/01/24 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
大学生优秀自荐信范文
2014/02/25 职场文书
婚前财产公证书
2014/04/10 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
财务会计岗位职责
2015/02/03 职场文书
入党介绍人意见2015
2015/06/01 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书