icefeeling的家园

生活就是一本书，需要我们用心去读

 

XSLT-TREE

1.main.html

<html>
<head>

<title></title>
<link href="css/styles.css" rel="stylesheet">
<style>
input {
 background-color: #5087DA;
 border: 1px solid #FFFFFF;
}
.font01 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 color: #FFFFFF;
 font-weight: bold;
}
</style>
<script>
var imgPath="images";
var foc="";
function expand(obj)
{
 //这个地方控制显示和隐藏子节点，以及变换图片
 if(obj.dis=="none") obj.dis="block";
 else obj.dis="none";
 //alert("document.all.S"+obj.Nid+".dis");
 document.all["D"+obj.Nid].src=eval("imgPath+'/'+document.all.S"+obj.Nid+".dis+'.gif'");
 document.all["C"+obj.Nid].src=eval("imgPath+'/'+selects('"+obj.Nid+"')+'.gif'");
 //alert("1111111:"+document.all["S"+obj.Nid].childNodes[0].outerHTML);
 //alert(obj.loaded);
 if(obj.loaded!=1)
  showXML(obj.Sid,obj.Nid,obj.dwjb,obj.sytid);
}
function selects(num)
{
 if(foc==num&&document.all["S"+num].dis=="block") return "open";
 else return "close";
}
function fontC(num)
{
 
 if(foc==num)
 {  
  return "#7DA0E8";
 }
     else return "";
}

</script>
</head>

<body topmargin="0" rightmargin="0" leftmargin="0" bottommargin="0">
 <div style="overflow:hidden;width:433px;height:96%">
        <table width="433px" height="100%"  border="1" cellpadding="0"  cellspacing="0" class="table_border">
  <tbody>
   <tr>    
    <td class="frame_nr_class" valign="top">
     <div style="height:100%;width:100%">
      <div id="I0" style="overflow:auto;width:100%;height:100%"></div>     
     </div>
    </td>  
   </tr>
   <tr>
    <td class="grid_bottom_bgcolor" align="center" height="25">  
    </td>
   </tr>
  </tbody>
  </table>
 </div>    
<!-- xml显示根节点 -->
<XML id="maindata">
<?xml version='1.0' encoding='gb2312'?>
<tree>
 <TreeNode id="CNPCPetroChinaTLM" sid="CNPC.PetroChina.TLM" dwjb="3" child="2" sytid='1'>
  <NodeText>XX公司</NodeText>
  <isLast>1</isLast>  
 </TreeNode>
</tree>
</XML>

<!-- xsl加载样式 -->
<!----- 这些属性供解析的时候使----->
<XML id="style">
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
  <xsl:template match="/">
   <xsl:apply-templates select="/tree/TreeNode"/>   
  </xsl:template>
 <xsl:template match="TreeNode">
 <table cellspacing ="0" cellpadding="0" loaded="0" dis="none">
  <xsl:attribute name="id">S<xsl:value-of select="@id"/></xsl:attribute>
  <xsl:attribute name="Sid"><xsl:value-of select="@sid"/></xsl:attribute>
  <xsl:attribute name="Nid"><xsl:value-of select="@id"/></xsl:attribute>
  <xsl:attribute name="dwjb"><xsl:value-of select="@dwjb"/></xsl:attribute>
  <xsl:attribute name="sytid"><xsl:value-of select="@sytid"/></xsl:attribute>  
   <tr height="18" valign="top">
    <td width="18" align="center">
    <xsl:attribute name="background">images/f<xsl:value-of select="isLast"/>.gif</xsl:attribute>
    <xsl:if test="@child[. > 0]">
    <img width="16" height="16">
     <xsl:attribute name="id">D<xsl:value-of select="@id"/></xsl:attribute>
     <xsl:attribute name="onclick">expand(S<xsl:value-of select="@id"/>)</xsl:attribute>
    </img>
    </xsl:if>
   </td>
   <td>
    <table cellspacing ="0" cellpadding="0" height="100%" style="cursor:hand">    
    <xsl:if test="@child[. >0]">
     <xsl:attribute name="onclick">foc="<xsl:value-of select="@id"/>";expand(S<xsl:value-of select="@id"/>);</xsl:attribute>
    </xsl:if>        
     <xsl:attribute name="onclick">foc="<xsl:value-of select="@id"/>";</xsl:attribute>    
    <tr>
     <td valign="top">
      <img width="16" height="16">
      <xsl:attribute name="id">C<xsl:value-of select="@id"/></xsl:attribute>
     </img>
    </td>
    <td width="5"></td>
    <td valign="bottom" class="tab1" noWrap="true">
     <xsl:attribute name="id">T<xsl:value-of select="@id"/></xsl:attribute>
    <div>
     <xsl:attribute name="style">background-color:expression(fontC('<xsl:value-of select="@id"/>'))</xsl:attribute>
     <a href="" onclick="return false;"><xsl:value-of select="NodeText"/></a>
    </div>
    </td>
     </tr>
   </table>
  </td></tr>
  <tr>
   <xsl:attribute name="style">display:expression(S<xsl:value-of select="@id"/>.dis)</xsl:attribute>
   <td><xsl:attribute name="background">images/i<xsl:value-of select="isLast"/>.gif</xsl:attribute></td>
   <td>
    <xsl:attribute name="id">I<xsl:value-of select="@id"/></xsl:attribute>
    载入中...
   </td>
  </tr>
 </table>
</xsl:template>
</xsl:stylesheet>
</XML>
<script> 
var Tds=true;
function showXML(point,mid,t_dwjb,sytid)
{ 
 var xmlDoc; 
 if(point==0)
 {
  xmlDoc=maindata.XMLDocument;
  xmlDoc.async = false;
  
 }
 else
 {  
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  if(sytid=="1")
  {
    xmlDoc.load("sj.xml");
  }
 } 
 
 var tmp = xmlDoc.getElementsByTagName("TreeNode");
 if (xmlDoc.parseError.errorCode != 0||tmp.length<1)
 {   
    document.all["I"+mid].innerHTML="<font style='color:red;'></font>";
    Tds=false;
    return false;
 }
 
  
 var All=document.all;
 //All["I"+mid]这就是那个DIV,xmlDoc.transformNode(style.XMLDocument)转化成html
 All["I"+mid].innerHTML=xmlDoc.transformNode(style.XMLDocument);
 //alert(xmlDoc.transformNode(style.XMLDocument));
 for (var i=0;i<tmp.length;i++)
 {
  //读解析过的xml的节点<treeNode>的属性id
  var Id=tmp[i].getAttribute("id");
  var son=tmp[i].getAttribute("child");  
  if(son >0)
   //其实，每一行都是一个table，有四个内容：展开、折叠图片，文件夹打开关闭图片，要显示的文字，要加载子节点的文字
   //切换节点的第一张图片，"D"+Id为第一个位置的图片的id，"C"+Id为第二个位置的文件夹图片，"S"+Id为最外层table的id
   All["D"+Id].src=eval("imgPath+'/'+document.all.S"+Id+".dis+'.gif'");
  All["C"+Id].src=eval("imgPath+'/'+selects('"+Id+"')+'.gif'");
  
  //alert("imgPath+'/'+document.all.S"+Id+".dis+'.gif'" + ":" + eval("imgPath+'/'+selects('"+Id+"')+'.gif'"));
 }
 //loaded是什么意思？表示加载过了，就不用再加载了;如果加载过了，就不用再调用showXML了； if(obj.dis=="none") obj.dis="block";else obj.dis="none";
 if(point!=0)
  All["S"+mid].loaded=1; 
}
showXML("0","0","","");
</script>

</body>
</html>


<!-----TREE基本构架
<!---- 第一次显示树的容器是div，从第二次以后变成了<td>------>
<table cellspacing ="0" cellpadding="0" loaded="0" dis="none"> 
   <tr height="18" valign="top">
     <!---- 第一张图片------>
     <td width="18" align="center">
     <img width="16" height="16">
    </td>
    <!---- 第二张图片（文件夹）和显示的文字------>
    <td>
     <table cellspacing ="0" cellpadding="0" height="100%" style="cursor:hand">        
      <tr>
       <td valign="top">
        <!---- 第二张图片------>
        <img width="16" height="16">
      </td>
      <td width="5"></td>
      <td valign="bottom" class="tab1" noWrap="true">
       <div>
        <!---- 显示的文字------>
        <a href="" onclick="return false;"></a>
       </div>
       </td>
       </tr>
     </table>
    </td>
  </tr>
  <tr>

     <!-- 这个td的背景由isLast控制，生成的图片为i0.gif---->
   <td></td>
   <!---- 另起一行，显示载入中，这个地方的<td>的id为:I+ id------>
   <td>
    载入中...
   </td>
  </tr>
  </table>

 

 

------->

 

2.sj.xml

<?xml version='1.0' encoding='gb2312'?>
<tree>
<TreeNode sid='CNPC.PetroChina.TLM.' dwjb='4' id='48XXZBCbb' child='0' sytid='1'>
<NodeText>XX公司本部</NodeText>
<isLast>0</isLast>
</TreeNode>
<TreeNode sid='CNPC.PetroChina.TLM.YZHBJG' dwjb='4' id='49XXYZHBJG' child='0'  sytid='1'>
<NodeText>XX原指挥部机关</NodeText>
<isLast>0</isLast>
</TreeNode>
<TreeNode sid='CNPC.PetroChina.TLM.TXN' dwjb='4' id='50XXTXN' child='0'  sytid='1'>
<NodeText>XX开发公司</NodeText>
<isLast>0</isLast>
</TreeNode>
<TreeNode sid='CNPC.PetroChina.TLM.TSH' dwjb='4' id='51XXTSH' child='0'  sytid='1'>
<NodeText>XX分公司</NodeText>
<isLast>0</isLast>
</TreeNode>
<TreeNode sid='CNPC.PetroChina.TLM.KQFWSYB' dwjb='4' id='52XXKQFWSYB' child='0'  sytid='1'>
<NodeText>XX服务事业部</NodeText>
<isLast>1</isLast>
</TreeNode>
</tree>

3.images

4.style.css

 

body,td {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000000;
 border-color:#5087DA;
 scrollbar-face-color:#C6E5FB;
 scrollbar-shadow-color:#FFFFFF;
 scrollbar-highlight-color:#FFFFFF;
 scrollbar-3dlight-color:#e3f5ff;
 scrollbar-darkshadow-color:#e3f5ff;
 scrollbar-track-color:#F4FFF5;
 scrollbar-arrow-color:#C6E5FB
}

 

.redfont_class {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: red;
 border-color:#5087DA;
}
th{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000000;
 background: url(http://www.cnblogs.com/../image/class_2/default/main_01.gif);
}
body {
 background-color: #FFFFFF;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
.table_border {
 border-color:#83d2ff;
 border: 1px solid #83d2ff;
 border-collapse: collapse;
}

.table {
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: dashed;
 border-left-style: dashed;
 border-right-color: #FFFFFF;
 border-left-color: #FFFFFF;
}
.grid_bottom_bgcolor
{
 background-color:#e3f5ff;
}
/*标题*/
.title {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 color: #FFFFFF;
 font-weight: bold;
}
/*大标题*/
.big_title{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 color: #050505;
 font-weight: bold;
}
a:link {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #006060;
 text-decoration: underline;
}
a:visited {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #333333;
 text-decoration: underline;
}
a:hover {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #B23D3D;
 text-decoration: underline;
}

/*Grid超链样式*/
a.db_title:link {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px; 
 color: #004e9e;
 text-decoration: underline;
}
a.db_title:visited {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 color: #004e9e;
 text-decoration: underline;
}
a.db_title:hover {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 color: #FF9900;
 text-decoration: underline;
}
.red_font
{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 color: #FF0000;
}

/*录入标题背景色*/
.input_title
{
 BACKGROUND-COLOR:#D2EEFF;
}
.input_value
{
 BACKGROUND-COLOR:#F4FBFF;
}
/*无边框的输入框*/
.input_noboder
{
 COLOR: #000000;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 border-bottom-color: #000000;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
}

/*按钮划过移出单击*/
.buttonover { CURSOR:hand;border-top:solid 1px buttonhighlight;border-left:solid 1px buttonhighlight;border-right:solid 1px buttonshadow;border-bottom:solid 1px buttonshadow}
.buttonout { BORDER-RIGHT: #FFFFFF 1px solid; BORDER-TOP: #FFFFFF 1px solid; BORDER-LEFT: #FFFFFF 1px solid;BORDER-BOTTOM: #FFFFFF 1px solid;}
.buttonclick { CURSOR:hand;border-top:solid 1px buttonshadow;border-left:solid 1px buttonshadow;border-right:solid 1px buttonhighlight;border-bottom:solid 1px buttonhighlight}

/*菜单按钮划过移出单击*/
.cdbuttonover { CURSOR:hand;border-top:solid 1px buttonhighlight;border-left:solid 1px buttonhighlight;border-right:solid 1px buttonshadow;border-bottom:solid 1px buttonshadow}
.cdbuttonout { BORDER-RIGHT: #CCDCF1 1px solid; BORDER-TOP: #CCDCF1 1px solid; BORDER-LEFT: #CCDCF1 1px solid;BORDER-BOTTOM: #CCDCF1 1px solid;}
.cdbuttonclick { CURSOR:hand;border-top:solid 1px buttonshadow;border-left:solid 1px buttonshadow;border-right:solid 1px buttonhighlight;border-bottom:solid 1px buttonhighlight}

/*Grid专用样式*/
thead th
{
 height:25px; 
 position:relative;
 color: #004e9e;
 font-size: 13px;
 font-weight: bold;
 top: expression(document.getElementById("MyGrid").scrollTop-1);
 z-index: 80;
}
thead th.locked
{
 left: expression(document.getElementById("MyGrid").scrollLeft);
 z-index: 85;
}

td.locked
{
 BORDER-RIGHT: 1px solid black;
 BORDER-BOTTOM: 1px solid black;
 BORDER-LEFT: 1px solid white;
 BORDER-TOP: 1px solid white;
 background-color: #f3f3f3;
 color:black;
 font-weight: bold;
 left: expression(document.getElementById("MyGrid").scrollLeft);
 position: relative;
 z-index: 75;
}
/*Grid样式结束*/

5.效果图

posted on 2008-11-16 13:19  lzb  阅读(402)  评论(0)  编辑  收藏  举报

导航