我的JS TreeView树（二）

最新推荐文章于 2016-01-18 15:42:20 发布

treeClimber

最新推荐文章于 2016-01-18 15:42:20 发布

阅读量1.4k

点赞数

分类专栏： WEB开发技巧原创经典文章标签： fold border null stylesheet filter function

本文链接：https://blog.csdn.net/treeClimber/article/details/1765795

版权

WEB开发技巧同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

原创经典

22 篇文章 0 订阅

订阅专栏

/**
* 普通树 drawNode.js
*/
function drawFolder(folder){
   var fold_code = folder.code;
   var fathers = getGrandFather(folder);
   var content = '<div id="fld'+fold_code+'" style="display:none;font-size:9pt;" noWrap>';
   for (var i=fathers.length;i>0;i--){
       if (hasBrothers(fathers[i-1])){
          content += '<img src="'+barImg+'" '+imgAlign+'>';
       }else{
          content += '<img src="'+spacerImg+'" '+imgAlign+'>';
       }
   }

   content += '<img id="fldImg'+fold_code+'" '+imgAlign+' οnclick="clickNode(/''+fold_code+'/')" src="';
   if (isLeafNode(fold_code)){    //叶
      if (hasBrothers(folder)){     //最后一个
         content += teeImg;
      }else{
         content += cornerImg;
      }
      content += '"><img id="1_fldImg'+fold_code+'" '+imgAlign+' οnclick="clickNode(/''+fold_code+'/')" src="'+leafImg;
   }else{
      if (hasBrothers(folder)){
         content += teePlusImg;
      }else{
         content += cornerPlusImg;
      }
      content += '"><img id="1_fldImg'+fold_code+'" '+imgAlign+' οnclick="clickNode(/''+fold_code+'/')" src="'+folderImg;
   }
   content += '" οnclick="clickNode(/''+fold_code+'/')">';
   content += '<span id="text'+fold_code+'" style="cursor:hand" onMouseOver=/'return winStatus("'+folder.desc+'")/' onMouseOut="return winStatus(/'/')" οnclick="clickNode(/''+fold_code+'/')">'+folder.desc+'</span>';
   content += '</div>';
   document.writeln(content);
}

//-----------------------------------------------------------------------------------------
CSS文件：menu.css
<!--
.menuTree{
position:abstract;
color:#221133;
filter:DropShadow(Color=#ffffea, OffX=3, OffY=3, Positive=4) Blur(add=true,direction=135,strengh=20);
font-family: 仿宋_gb2312;
font-size: 18px;
font-weight:bold;
text-decoration: blink;
text-align:center;
cursor:hand;
}
.menuImage{
cursor:hand;
border:none;
}

.menuTree1{
position:abstract;
color:#000000;
filter:DropShadow(Color=#ffffea, OffX=3, OffY=3, Positive=4) Blur(add=true,direction=135,strengh=20);
font-family: GlitzyCurl;
font-size: 14px;
font-weight:bold;
text-decoration: blink;
text-align:center;
}

.overItem{
font-size:11pt;
border:#30AEF2 solid 0px;
color:#66CCFF;
background-color:#FFFFCC;
}
.outItem{
font-size:11pt;
color:#000000;
background-color:transparent;
border:transparent solid 1px;
}

#ctxmenu{
    position:absolute; border: 1px outset #205AA7;
    background-color:#BFCAE6;
    padding:2px; width:40px;
    visibility:hidden;
    z-index:10;
    font-size:12px;
    cursor:default;
    text-align:center;
}
.ctxmenu-item { padding:2px;width:100%;cursor:default; border:1px solid #7388C1;}
.ctxmenu-line { border-top:1px solid #848284; border-bottom:1px solid white; margin:2px;}
.ctxmenu-over { padding:2px;background-color:#9496AD; border:1px solid #08246B;}

//------------------------------------------------------------------------
测试文件 test.htm
<link rel="stylesheet" type="text/css" href="menu.css">
<script language="JScript.Encode" src="treeView.js"></script>
<script language="JScript.Encode" src="drawNode.js"></script>

<body>
<script language="JScript.Encode" id="scriptText">
//Folder(nodecode,description,layer,parentId,hreference)
addFolder(new Folder("0001","第一代1",1,0,null));
addFolder(new Folder("00010001","第二代1",2,"0001",null));
addFolder(new Folder("00010002","第二代2",2,"0001",null));
addFolder(new Folder("000100010001","第三代1",3,"00010001",null));
addFolder(new Folder("000100010002","第三代2",3,"00010001",null));
addFolder(new Folder("000100010003","第三代3",3,"00010001",null));
addFolder(new Folder("000100020001","第三代4",3,"00010002",null));
addFolder(new Folder("0001000200010001","第四代1",4,"000100010001",null));
addFolder(new Folder("0001000200010002","第四代2",4,"000100010001",null));

setImagePath();
drawRootNode("根");
drawTree();

document.body.appendChild(tree_cxtmenu);
</script>

</body>