2，最简单的树（自定义图标）

2024-11-07 技术教程

-----后台

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingSystem.Data;usingSystem.Text;publicpartialclass_Default:System.Web.UI.Page{protectedvoidPage_Load(objectsender,EventArgse){}publicstringGetzNodes(){StringBuildersb=newStringBuilder();sb.Append("<script>");sb.Append("varzNodes=[");//*****************************************加入遍历代码for(inti=0;i<50;i++){if(i==0){//父节点sb.Append(SetParametes(i.ToString(),"-1","a",true,true));}elseif(i<10)//子节点sb.Append(SetParametes(i.ToString(),"0","b",false));else//父节点sb.Append(SetParametes(i.ToString(),"-1","a",true));}//********************************************************sb.Append("];");sb.Append("</script>");returnsb.ToString();}///<summary>///设置节点///</summary>///<paramname="id">id</param>///<paramname="pid">父级id</param>///<paramname="name">名称</param>///<paramname="parent">是否是父节点？</param>///<paramname="open">是否展开？</param>///<returns>返回节点</returns>privatestringSetParametes(stringid,stringpid,stringname,boolparent,boolopen=false){//父节点的展开图标stringPopenpath="../img/1_open.png";//父节点的关闭图标stringPclosepath="../img/1_close.png";//子节点的图标stringCclosepath="../img/2.png";StringBuildersb=newStringBuilder();sb.Append("{");sb.AppendFormat("id:{0},",id);sb.AppendFormat("pId:{0},",pid);sb.AppendFormat("name:\"{0}\",",name);if(open){sb.AppendFormat("open:true,");}if(parent){sb.AppendFormat("iconOpen:\"{0}\",",Popenpath);sb.AppendFormat("iconClose:\"{0}\"",Pclosepath);}else{sb.AppendFormat("icon:\"{0}\"",Cclosepath);}sb.Append("},");returnsb.ToString();}}

-----前台

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><linkhref="../css/demo_new.css"rel="stylesheet"type="text/css"/><linkhref="../css/zTreeStyle/zTreeStyle.css"rel="stylesheet"type="text/css"/><scriptsrc="../js/jquery-1.4.4.min.js"type="text/javascript"></script><scriptsrc="../js/jquery.ztree.core-3.5.js"type="text/javascript"></script></head><%=GetzNodes()%><scripttype="text/javascript">varsetting={data:{simpleData:{enable:true}},callback:{onClick:zTreeOnClick}};$(document).ready(function(){$.fn.zTree.init($("#treeDemo"),setting,zNodes);});//显示divfunctionshowdiv(){$("#zhezhao").fadeIn(300);$("#treeDemodiv").fadeIn(300);}//隐藏divfunctionclosediv(){$("#zhezhao").fadeOut(300);$("#treeDemodiv").fadeOut(300);}//展示zTreefunctionshowZTree(){varw=document.documentElement.clientWidth;varh=document.documentElement.clientHeight;varl=document.documentElement.clientWidth/2-$("#treeDemodiv").width()/2;vart=document.documentElement.clientHeight/2-$("#treeDemodiv").height()/2;$("#zhezhao").css({"width":w+"px","height":h+"px","filter":"alpha(opacity=25)","-moz-opacity":"0.25","-khtml-opacity":"0.25","opacity":"0.25"});$("#treeDemodiv").css({"left":l+"px","top":t+"px"});showdiv();}//点击触发事件functionzTreeOnClick(event,treeId,treeNode){alert(treeNode.id+","+treeNode.name);closediv();}</script><body><formid="form1"runat="server"><inputtype="button"value="显示"onclick="showZTree()"><divid="treeDemodiv"class="zTreeDemoBackgroundleft"><ul><li><imgonclick="$('#treeDemodiv').fadeOut(300);$('#zhezhao').fadeOut(300);"src="../img/yzfalse.png"/></li></ul><ulid="treeDemo"class="ztree"></ul></div><divid="zhezhao"></div></form></body></html>

整合包下载：http://down.51cto.com/data/1967063