返回首页

网页设计中树型结构的另一种实现方法代码

时间:2011-03-24 14:06来源:知行网www.zhixing123.cn 编辑:麦田守望者

一般树型结构的显示,在网页中通过JavaScript来控制,这快难度不大,通过显示、隐藏部分内容,再加上排版,就能实现树形结构的显示。
例如:通过表格来控制排版
<span class="clsSpace" type="img">
<a style="cursor:'hand'" onclick="leaf.style.display=leaf.style.display=="none"?"block":"none";">
<span class="clsCollapse">+</span></a>
</span>
父节点
<br>
<div class="clsItem" type="leaf" style="display:'none'" id="leaf">
子节点
</div>

但是服务器端处理这种树结构只能用递归或者类似递归的查询来实现(Connect By 在oracle中),
对于大量数据查询的情况,效果不是很令人满意,所以建议用xmlhttp来显示动态更新树型结构数据。

在打开子结点数据的时候,通过另外的jsp从服务器只处理一层数据,这样无限扩展,对数据多的情况,效果还是不错的。

xmlhttp的用法如下:附部分源代码
var strSelect;
strSelect = "";
function getDataFromServer(rint) {
rint="group_id="+rint;
//alert(rint);
var oSend=new ActiveXObject("Microsoft.XMLHTTP");
oSend.open("POST","1xml.jsp",false);
oSend.setRequestHeader("Content-Length",rint.length);
oSend.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");//没有这句就玩不转拉
oSend.send(rint);
var oDom=new ActiveXObject("Microsoft.XMLDOM");
oDom.async=false;
body=bytes2BSTR(oSend.responseBody);
//alert(body);
return body;
}
function expand() {
var t = event.srcElement;
var d = t.parentNode.parentNode.nextSibling.nextSibling.nextSibling.nextSibling;//.firstChild;
//d.style.display = d.style.display=="none"?"block":"none";
//var s = t;//.previousSibling.firstChild
//s.className = s.className=="clsCollapse"?"clsExpand":"clsCollapse";
//s.innerText = s.innerText=="+"?"-":"+";
//------------------------------------
var s = t;
d.style.display = d.style.display=="none"?"block":"none";
if(s.innerText=="+") {//下载数据
//alert(s.innerText);
var g=t.parentNode.parentNode.nextSibling;
//alert(g);
rint= g.value;
if(rint.indexOf("G")>=0)rint=rint.substring(1);
d.innerText="正在下载数据";
d.innerHTML=getDataFromServer(rint);
//alert(d.innerHTML);
//d.innerText="OK";
}
//var s = t;//.previousSibling.firstChild
//s.className = s.className=="clsCollapse"?"clsExpand":"clsCollapse";
s.innerText = s.innerText=="+"?"-":"+";

}

------分隔线----------------------------
标签(Tag):网页设计
------分隔线----------------------------
推荐内容
  • css代码flex的布局使用详解

    flex布局的含义 flex布局又名为弹性布局,主要是通过设置的属性值自动调整元素的宽度...

  • html版权符号代码怎么写?

    相信不少开发人员都会遇见这个问题,基本上每个网站都会有版权声明,其中会用到版权符...

  • 网站打不开dns错误如何解决

    DNS解析就是把你的域名解析成一个ip地址,服务商提供的dns解析就是能够将你的域名解析...

  • HTTP状态码的含义图解教程

    HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码。我...

  • 如何得知golang代码覆盖率

    以前写程序时,很少关注单元测试。 即便写,也是草草了事。没有很认真的写过,更别谈...

  • 谈谈网站建设中网站导航设计的经验技巧

    当用户进入网站时,根据浏览习惯首先会先大概地扫视一遍进入的目标页面,其次则会开始...

  • 猜你感兴趣
  • 教育技术学动态
  • 教育技术学论文
  • 理论研究
  • 应用研究
  • 资源收藏
  • 百家观点
  • 英文文献
  • 中国电化教育
  • 电化教育研究
  • 中国远程教育
  • 开放教育研究
  • 现代教育技术
  • 远程教育杂志
  • 现代远距离教育
  • 中国教育信息化
  • 中国信息技术教育
  • 中小学信息技术
  • Flash龙8娱乐官网手机版
  • Photoshop龙8娱乐官网手机版
  • 3DMAX龙8娱乐官网手机版
  • AutoCAD龙8娱乐官网手机版
  • CorelDRAW龙8娱乐官网手机版
  • Matlab龙8娱乐官网手机版
  • 其他龙8娱乐官网手机版
  • .Net龙8娱乐官网手机版
  • Asp龙8娱乐官网手机版
  • Php龙8娱乐官网手机版
  • Jsp龙8娱乐官网手机版
  • Ajax龙8娱乐官网手机版
  • Android教程
  • 其他龙8娱乐官网手机版
  • Word教程
  • Excel教程
  • PowerPoint教程
  • Ubuntu教程
  • 其他教程
  • 课件下载
  • 软件下载
  • 视频教程下载
  • 其他下载
  • 教案大全
  • 试题大全
  • 课件大全
  • 其他大全
  • 人像摄影
  • 风光摄影