快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

ASP做象资源治理器的树形目录

树形目录显示程序

  问题描述:

  在我们项目中经常会出现自关联的数据表,假如我们从整体看去,整个表就呈现为一个树形数据结构(对于复杂的情况,它可能变成一个图)。当我们对这个表进行显示,编辑时,假如不采用好的表现形式,会显得很笨拙,为此,我们开发这样的树形结构的程序。在上一版本中,我们使用的是递归算法来实现,在我们对这个算法评测时发现,对于拥有成千上万条记录的数据库就不再能胜任了,所以在新的算法版本中,我们使用了XML技术,动态的发现数据,以解决一次从服务器下在大量数据的尴尬,同时也遍免了假如表数据结构呈现为图时就会进入死循环的错误。

  实际思路:

  1、 初始显示时只显示根与二级节点,根与二级节点同在一层次
  2、 点击一节点,假如它的子节点区域对象不存在,则建立对象,同时下载数据更新数据,显示所有子节点。
  3、 每个节点在建立后都就有一样的功能,如检查子节点是否存在,显示隐藏子节点等等
  4、 DHTML+XML+ASP+CSS同时使用

  技术难点:

  1、 使用xmlhttp接口时乱码问题:
  因为在asp输出页面中,缺省的编码方案并不是中文的,那么在客户端页面的xmlhttp中解释时,就会以缺省的方案解析,所以就会出现乱码。为此,我们在Server端的asp页面中,加入如下代码定义编码方案:



  Response.CharSet="GB2312"
  Response.ContentType="text/html"

  2、 如何在界面上保持上一版本的风格(类资源治理器形式):
  在上一版本中,所有的页面内容都是一气呵成的,在控制上采用递归等思想,所有时的界面相对友好,当时本版中的机制发生了变化,内容是有多次合成的要害问题,img ,span 对象的id 如何确定经过求证,在界面上,本版本的界面难以与第一界面一样,所以只能保留一部分,但是总体来说,新界面同样也能满意需要

  因为在这里不好使用附件,所以只能贴源码了:




  ---xtree.html------

  <HTML>
  <HEAD>
  <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
  <SCRIPT LANGUAGE=javascript src="xtree.js">
  </SCRIPT>
  <style type="text/css">
  <!--
  a:link { font-size: 14px; text-decoration: none; color: #0000FF}
  a:visited { font-size: 14px; color: #0000FF; text-decoration: none}
  a:hover { font-size: 14px; color: #FF0000; background-color: #CCCC99; text-decoration: none}
  a:active { font-size: 14px; color: #FFFFFF; background-color: #191970; text-decoration: none}
  .item{ font-size:14px}
  -->




  </style>
  </HEAD>
  <BODY leftMargin=0 rightMargin=0 topMargin=0 border=0>
  <bold>树形菜单演示程序</bold><br>
  <table border=0>
  <tr><td nowrap>
  <span id=\\\'oSpanroot\\\' border=0></span><SCRIPT LANGUAGE=javascript>createChildNode("root",0);</SCRIPT></td></tr>
  </table>
  </BODY>
  </HTML>

  -------xtree.asp------------

  <%@ Language=VBScript %>
  <%
  Response.CharSet="GB2312"
  Response.ContentType="text/html"
  \\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'Server code start\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'
  dim parId,nodeLayer
  parid=Request.QueryString("parId")
  nodeLayer=cint(Request.QueryString("nodeLayer"))

  if(parid="") then
  Response.Write("root id can\\\'t is null")
  Response.End()
  end if
  if(nodeLayer<0) then
  nodeLayer=0

  end if
  %>
  <%
  strconn="at"
  strsql="select * from tree where par=\\\'"&parid&"\\\'"

  \\\'\\\'SQL 语句书写要求:在记录集的前面三个字段必须依次为:row_id(惟一的主键)、name(菜单条显示的内容)、par_id(父节点row_id),其它根据需要输出与显示



  set conn=server.createobject("ADODB.connection")
  conn.open strconn

  set rs=server.createobject("ADODB.Recordset")
  rs.open strsql,conn,3,3




  i=0
  dim row_id
  row_id=""
  while not rs.EOF
  row_id=rs.Fields("row_id").Value
  name=rs.Fields("name").Value
  j=0

  while j<nodeLayer
  Response.Write("<img src=\\\'blank.bmp\\\'>")
  j=j+1
  wend
  Response.Write("<img id=\\\'objNode"&row_id&"\\\' style=\\\'cursor:hand\\\' src=\\\'open.bmp\\\' onclick=javascript:createChildNode(\\\'"&row_id&"\\\',"&nodeLayer+1&") border=0 align=\\\'absmiddle\\\'>")
  Response.Write("<img src=\\\'blank.bmp\\\' border=0 align=\\\'absmiddle\\\'>")
  Response.Write("<a class=item href=\\\'view.asp?id="&row_id&"\\\' target=\\\'mainFrame\\\'>"&Trim(name)&"</a></br>") \\\'项目内容
  Response.Write("<span id=\\\'oSpan"&row_id&"\\\' ></span>") \\\'子节点内容区域
  i=i+1
  rs.MoveNext
  wend
  \\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'Server Code END \\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'\\\'
  %>

  ---------xtree.js-------------

  function getChildTree(parId,nodeLayer)
  parId:=父节点id,nodeLayer:=子节点所属层次
  {
  var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
  xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
  xmlhttp.Send("Author:taojianbo;Version:2.0");
  return xmlhttp.responseText;
  }

  function showHide(objid)

  显示,隐藏区域,达到菜单显示的目的
  objid:=区域对象ID的parid部分



  {
  var temp;
  eval("temp=oSpan"+objid+".style.display");
  if(temp=="block")
  {





  eval("oSpan"+objid+".style.display=\\\'none\\\'");
  eval("objNode"+objid+".src=\\\'open.bmp\\\'");
  }
  else
  {
  eval("oSpan"+objid+".style.display=\\\'block\\\'");
  eval("objNode"+objid+".src=\\\'close.bmp\\\'");
  }
  }//end function

  function createChildNode(childNodeId,nodeLayer)


  假如子节点内容为空,则初始化,并更新数据



  childNodeId:=子节点对象Id的parid部分
  {
  var temp;
  eval("temp=oSpan"+childNodeId+".innerHTML");
  if(temp=="")
  {
  eval("oSpan"+childNodeId+".innerHTML=\\\'<div align=right>LOADING...</div><br>\\\'");
  temp=new String(getChildTree(childNodeId,nodeLayer));
  if(temp.length!=0)
  {
  eval("oSpan"+childNodeId+".innerHTML=temp");
  eval("objNode"+childNodeId+".src=\\\'close.bmp\\\'");//变为减号
  }
  else
  {//假如temp内容为空,说明未找到子树,则该节点为叶节点,更改相关属性
  eval("objNode"+childNodeId+".src=\\\'leaf.bmp\\\'");//更改图标
  eval("objNode"+childNodeId+".onclick=\\\'\\\'"); 取消click事件
  eval("oSpan"+childNodeId+".innerHTML=temp");//内容为空
  }
  }
  else
  { showHide(childNodeId);
  }
  }
返回类别: 教程
上一教程: ASP3.0给我们带来的新技术之一---DATA SHAPING技术
下一教程: @ 指令参考之一 - @CODEPAGE

您可以阅读与"ASP做象资源治理器的树形目录"相关的教程:
· 在WEB界面下如何生成像资源治理器相同的树形目录(版本2.0)
· 生成像资源治理器相同的树形目录
· 在WEB界面下生成像资源治理器相同的树形目录
· 生成类似Windows资源治理器
· 用ASP开发基于浏览器的文档数据库治理软件
    微笑服务 优质保证 索取样品