有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文件的这些文件路径改好。
挺不错的哦!