做完JavaScript DOM Interfaces的培训,写了一个例子,结合XMLHttpRequest用86行代码实现的树形菜单。原理很简单每个节点就是一个div,每点击一个节点的图片就通过XMLHttpRequest把这个节点的所有子节点从jsp文件里装载到父节点的div里。
具体看代码吧
使用的html代码
最后,十分偷懒的jsp代码
贴代码太麻烦
放附件里了
具体看代码吧
js 代码
- //XMLHttpRequest对象
- var request = null;
- //当前根节点
- var currentNode = null;
- var url = null;
- //存放被点击过节点的状态
- var states = new Array();
- //初始化XMLHttpRequest对象
- function ready(inUrl){
- try{
- request =new XMLHttpRequest();
- }catch(e){
- request =new ActiveXObject("Microsoft.XMLHTTP");
- }
- request.onreadystatechange=loadNode;
- url=inUrl;
- }
- //回调函数,等到数据放在子节点内
- function loadNode(){
- if(request.readyState==4){
- if (request.status == 200||request.status == 0) {
- var newContent = request.responseText;
- //删除提示
- dataHit = document.getElementById("dataHit");
- if(dataHit!=null)
- currentNode.removeChild(dataHit);
- //创建显示子节点的div,独立用一个div便于close的时候删除掉
- content=document.createElement("div");
- content.setAttribute("luck","true");
- content.innerHTML = newContent;
- currentNode.appendChild(content);
- }
- }
- }
- //从根节点装载树
- function loadTree(url,id){
- ready(url);
- var sel = document.getElementById(id);
- currentNode = sel;
- open(id);
- }
- //处理图片被单击事件,根据节点状态确定是open还是close,并设置节点的新状态
- function doclick(id){
- var sel = document.getElementById(id);
- currentNode = sel;
- if(states[id]=="opened"){
- close(id);
- states[id]="closed";
- }else{
- open(id);
- states[id]="opened";
- }
- }
- //打开一个节点,显示它的所有子节点
- function open(id){
- //现在装载数据提示
- dataHit=document.createElement("div");
- dataHit.setAttribute("id","dataHit");
- //dataHit.innerHTML="正在装载数据...";
- text=document.createTextNode("正在装载数据...");
- dataHit.appendChild(text);
- currentNode.appendChild(dataHit);
- try{
- img = document.getElementById("img"+id);
- img.setAttribute('src',"img/folderopen.gif");
- }catch(e){}
- //与服务器端通讯
- ready(url);//IE比较奇怪,每次都要新建XMLHttpRequest对象
- //在url添加一个随机数,这样防止XMLHttpRequest缓存数据
- request.open('GET',url+"?id="+id+"&randnum=" + Math.random(),true);
- request.send(null);
- }
- //关闭一个已打开的节点
- function close(id){
- //删除不再显示的子节点
- allnodes=currentNode.getElementsByTagName("div");
- for(var i=0;i
- currentNode.removeChild(allnodes.item(i));
- }
- //更改图标
- img = document.getElementById("img"+id);
- img.setAttribute('src',"img/folder.gif");
- }
xml 代码
- >
- <HTML>
- <HEAD>
- <TITLE> 动态树 TITLE>
- <link rel="StyleSheet" href="tree.css" type="text/css" />
- <script type="text/javascript" src="tree.js">script>
- HEAD>
- <BODY>
- <div id="tree">
- div>
- <SCRIPT LANGUAGE="JavaScript">
- loadTree('treenode.jsp','tree');
- //-->
- SCRIPT>
- BODY>
- HTML>
贴代码太麻烦
放附件里了