当前页面: 开发资料首页 → Javascript 专题 → 类似 MSDN CSDN 导航树效果 ASP.Net(C#) + JavaScript 实现!

类似 MSDN CSDN 导航树效果 ASP.Net(C#) + JavaScript 实现!

摘要: Tree,树,javascript,iframe

测试站点:
http://www.triaton.com.cn/../dotnet/tree/WebFORM1.aspx

虽然号称 .Net 了!
但实际还是传统 CGI、ASP 的思想,没有使用Codebehind="WebFORM1.aspx.cs",仍然采取了 B/S 混合(HTML/C#)脚本的方式:

<%@ Page language="c#" Codebehind="WebFORM1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication5.WebFORM1" %>
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<head>
WebFORM1

</head>
<body MS_POSITIONING="GridLayout">
<form id="FORM1" method="post" runat="server">
</form>
<iframe width="100%" height="100" id="hiddenframe"></iframe>
<script>
function ExpandNode(ParentNode,ParentId){
var NodeX = eval(ParentNode.id + '_0');
if (NodeX.style.display == 'none')
{
NodeX.style.display="block";
if (NodeX.loaded == 'no')
{
document.frames['hiddenframe'].location.replace("http://localhost/webservice/WebApplication5/WebFORM2.aspx?PID=" + ParentId + "&PNode=" + ParentNode.id);
NodeX.loaded = 'yes';
}
}
else
{
NodeX.style.display='none';
}
}
</script>

<%if (System.Convert.ToInt64(OleDbDataReader1["children"])>0) {%>
onClick='ExpandNode(Node_<% = i %>,<% =OleDbDataReader1["id"] %>)'>+
<%;}
else {%>
>-<% ;}%>
<%if (System.Convert.ToInt64(OleDbDataReader1["children"])>0)
{%>
onDblClick='ExpandNode(Node_<% = i %>,<% =OleDbDataReader1["children"]%>)'
<%} %>
>
<% =OleDbDataReader1["children"]%>

<%
i++;
}

%>

</td>
</td>
</tr>
</table>

</td></tr></table>

</body>

<%@ Page language="c#" Codebehind="WebFORM2.aspx.cs" AutoEventWireup="false" Inherits="WebApplication5.WebFORM2" %>
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<head>
WebFORM2

</head>
<body MS_POSITIONING="GridLayout">
<form id="WebFORM2" method="post" runat="server">

</form>
<%
string ParentNode;
ParentNode = Request.QueryString["pnode"];
//Response.Write(ParentNode.Replace("_",""));
int i;
int j;
string nSpace="";
j= ParentNode.Length - ParentNode.Replace("_","").Length;
for (i=0;i nSpace = nSpace + " ";
string sHTML ="";
i=0;
System.Data.OleDb.OleDbConnection oleDbConnection1 = new System.Data.OleDb.OleDbConnection();
oleDbConnection1.ConnectionString =@"Provider=SQLOLEDB.1;Persist Security Info=False;User ID=sa;Initial Catalog=Test;Data Source=TRIATON\PSQL2KE";
oleDbConnection1.ConnectionString =@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("/dvbbs") + @"\Tree.mdb;Persist Security Info=False";
oleDbConnection1.Open();
System.Data.OleDb.OleDbCommand OleDbCommand1 = new System.Data.OleDb.OleDbCommand("select *,(select count(*) from tree where parentid =T.id ) as Children from tree T where parentid = " + Request.QueryString["PID"],oleDbConnection1) ;
System.Data.OleDb.OleDbDataReader OleDbDataReader1 = OleDbCommand1.ExecuteReader();
while (OleDbDataReader1.Read())
{
sHTML = sHTML + "

" + nSpace + " if (System.Convert.ToInt64(OleDbDataReader1["children"])>0)
sHTML = sHTML + " onClick='ExpandNode(" + ParentNode + "_" + (i + 1).ToString() + "," + OleDbDataReader1["id"] + ")'>+";
else
sHTML = sHTML + ">-";
sHTML = sHTML + "\\n" + " if (System.Convert.ToInt64(OleDbDataReader1["children"])>0)
sHTML = sHTML + " onDblClick='ExpandNode(" + ParentNode + "_" + (i + 1).ToString() + "," + OleDbDataReader1["id"] + ")'";
sHTML = sHTML + ">" + OleDbDataReader1["id"] + ": " + OleDbDataReader1["remark"] + "

";
if (System.Convert.ToInt64(OleDbDataReader1["children"])>0)
sHTML = sHTML + "";
i++;
}
Response.Write(sHTML);
%>
<script>
var x = eval('parent.' + '<% =Request.QueryString["pnode"] + "_0"%>' ) ;
x.innerHTML="<% =sHTML %>";
</script>
</body>

</textarea>
↑返回目录
前一篇: JavaScript 基础教程
后一篇: 类似 MSDN CSDN 左边导航树效果的实现! [JavaScript + ASP]