有Ajax技术的一个treeview
文件下载：ajax 实现treeview
今天项目中用了这个treeview,struts + hibernate的设计，调用时需要修改js文件里两处地方。
folder-tree-static.js：
因为我要打开的子类页面是需要用method来调用action的，而且要传一个参数&parentId=过去， 这个js能够识别?
所以，这里要根据自己的需要去修改成&或直接用?
这里是JS要修改的，而前面的页面呢？
例子folder-tree-static.html
<ul><li></li></ul>这对标签，就是父级的，我用循环来读<logic:iterate name="" property=""></logic:iterate>，实现动态读父类。
子类呢？
跟着，大家来看看子类数据的例子，是个php的，我们当然可以是换成自己需要的文件类型了，关键看自己是用什么page type的。
关键来了，记住，千万不要在子类页里头带有其他定义标签，如
只要保留
That's OK,记得把images,css, js去加到你的项目里，然后在folder-tree-static.js文件的这些文件路径改好。
挺不错的哦！
今天项目中用了这个treeview,struts + hibernate的设计，调用时需要修改js文件里两处地方。
folder-tree-static.js：
var ajaxRequestFile = 'writeNodes.php';
修改成你自己的子类URL，如：var ajaxRequestFile = 'employeeHandle.do?method=showList';
因为我要打开的子类页面是需要用method来调用action的，而且要传一个参数&parentId=过去， 这个js能够识别?
ajaxObjectArray[ajaxIndex].requestFile = ajaxRequestFile + '?parentId=' + parentId;
但是我要识别的是&所以，这里要根据自己的需要去修改成&或直接用?
这里是JS要修改的，而前面的页面呢？
例子folder-tree-static.html
<ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">
<li><a href="#">Europe</a>
<ul>
<li parentId="1"><a href="#">Loading
</a></li>
</ul>
</li>
<li><a href="#">Asia</a>
<ul>
<li parentId="2"><a href="#">Loading</a></li>
</ul>
</li>
<li><a href="#">Africa</a>
<ul>
<li parentId="3"><a href="#">Loading</a></li>
</ul>
</li>
<li><a href="#">America</a>
<ul>
<li parentId="4"><a href="#">Loading</a></li>
</ul>
</li>
</ul>
<li><a href="#">Europe</a>
<ul>
<li parentId="1"><a href="#">Loading
</a></li></ul>
</li>
<li><a href="#">Asia</a>
<ul>
<li parentId="2"><a href="#">Loading
</a></li></ul>
</li>
<li><a href="#">Africa</a>
<ul>
<li parentId="3"><a href="#">Loading
</a></li></ul>
</li>
<li><a href="#">America</a>
<ul>
<li parentId="4"><a href="#">Loading
</a></li></ul>
</li>
</ul>
<ul><li></li></ul>这对标签，就是父级的，我用循环来读<logic:iterate name="" property=""></logic:iterate>，实现动态读父类。
子类呢？
<ul>
<li parentId="1"><a href="#">Loading</a></li>
</ul>
看到这loading了吧，这就是子类了，也可以循环来读，关键类了，这个parentId，就是传到JS的参数，也是传到action里的参数。<li parentId="1"><a href="#">Loading</a></li>
</ul>
跟着，大家来看看子类数据的例子，是个php的，我们当然可以是换成自己需要的文件类型了，关键看自己是用什么page type的。
关键来了，记住，千万不要在子类页里头带有其他定义标签，如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>List based folder tree</title>
<link rel="stylesheet" href="css/folder-tree-static.css" type="text/css">
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/folder-tree-static.js"></script>
</head>
<body>
</body>
虽然这些都是页子所必须的，但是读出来后，便会和父级的page定义标签冲突了。<html>
<head>
<title>List based folder tree</title>
<link rel="stylesheet" href="css/folder-tree-static.css" type="text/css">
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/folder-tree-static.js"></script>
</head>
<body>
</body>
只要保留
<link rel="stylesheet" href="css/folder-tree-static.css" type="text/css">
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/folder-tree-static.js"></script>
和<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/folder-tree-static.js"></script>
<%@ taglib uri="/WEB-INF/tlds/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tlds/struts-logic.tld" prefix="logic"%>
这些子页面需要的。<%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tlds/struts-logic.tld" prefix="logic"%>
That's OK,记得把images,css, js去加到你的项目里，然后在folder-tree-static.js文件的这些文件路径改好。
挺不错的哦！
电视机9号，此文章在用于非商业性质的情况下，可以任意复制，传阅。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架