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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
微信小程序实现点击页面出现文字
Sep 21 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实现微信扫码自动登陆与注册功能
2016/09/22 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Python 的内置字符串方法小结
2016/03/15 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
入党思想汇报
2014/01/05 职场文书
公益活动邀请函
2014/02/05 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
农村党员一句话承诺
2014/05/30 职场文书
节约粮食标语
2014/06/18 职场文书
2015国庆节宣传语
2015/07/14 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Python实现学生管理系统(面向对象版)
2021/06/24 Python
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS