ajax和c#.net相结合的树型菜单

技术2022-05-11 85

此代码是从网上下载的资源，后经过修改在此感谢原著作者

----------------------------web.config---------- <httpHandlers> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro" /> </httpHandlers>--------------------------Tree.aspx

<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Tree.aspx.cs " Inherits = " _Default " %> <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > < html xmlns = " http://www.w3.org/1999/xhtml " > < head runat = " server " > < title > Ajax Efficient Tree </ title > < link type = " text/css " href = " css/tree.css " rel = " stylesheet " > </ head > < body > < form id = " form1 " runat = " server " > < div > < asp:Panel ID = " Panel1 " runat = " server " Height = " 300px " Width = " 100px " > < div id = " CategoryTree " class = " TreeMenu " style = " width: 150px " ></ div > </ asp:Panel > < script language = " jscript " > var tree = document.getElementById( " CategoryTree " ); // 获取上面那个div的id名称 var root = document.createElement( " li " ); root.id = " li_0 " ; tree.appendChild( root ); ExpandSubCategory( 0 ); function ExpandSubCategory( categoryID ) { var liFather = document.getElementById( "li_" + categoryID ); if( liFather.getElementsByTagName("li").length > 0) { ChangeStatus( categoryID ); return; } liFather.className = "Opened"; SwitchNode( categoryID, true ); //仅获取当前节点的子Nodes _Default.GetSubCategory( categoryID, GetSubCategory_callback ); } function SwitchNode( CategoryID, show ) { var li_father = document.getElementById("li_" + CategoryID); if( show ) { var ul = document.createElement("ul"); ul.id = "ul_note_" + CategoryID; var note = document.createElement("li"); note.className = "Child"; var img = document.createElement("img"); img.className = "s"; img.src = "css/s.gif"; var a = document.createElement("a"); a.href = "javascript:void(0);"; a.innerHTML = "Please waiting..."; note.appendChild(img); note.appendChild(a); ul.appendChild(note); li_father.appendChild(ul); } else { var ul = document.getElementById("ul_note_" + CategoryID ); if( ul ) { li_father.removeChild(ul); } } } function GetSubCategory_callback( response ) { var dt = response.value.Tables[0]; if( dt.Rows.length > 0 ) { var iCategoryID = dt.Rows[0].FatherID; } var li_father = document.getElementById("li_" + iCategoryID ); var ul = document.createElement("ul"); for( var i = 0; i < dt.Rows.length; i++ ) { if( dt.Rows[i].IsChild == 1 ) { var li = document.createElement("li"); li.className = "Child"; li.id = "li_" + dt.Rows[i].CategoryID; var img = document.createElement("img"); img.id = dt.Rows[i].CategoryID; img.className = "s"; img.src = "css/s.gif"; var a = document.createElement("a"); a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');"; a.innerHTML = dt.Rows[i].CategoryName; } else { var li = document.createElement("li"); li.className = "Closed"; li.id = "li_" + dt.Rows[i].CategoryID; var img = document.createElement("img"); img.id = dt.Rows[i].CategoryID; img.className = "s"; img.src = "css/s.gif"; img.onclick = function(){ ExpandSubCategory( this.id ); }; img.alt = "Expand/collapse"; var a = document.createElement("a"); a.href = "javascript:ExpandSubCategory('" + dt.Rows[i].CategoryID + "');"; a.innerHTML = dt.Rows[i].CategoryName; } li.appendChild(img); li.appendChild(a); ul.appendChild(li); } li_father.appendChild(ul); SwitchNode( iCategoryID, false ); } // 单击叶节点时, 异步从服务端获取单个节点的数据. function OpenDocument( CategoryID ) { _Default.GetNameByCategoryID( CategoryID, GetNameByCategoryID_callback ); } function GetNameByCategoryID_callback( response ) { //alert( response.value ); //location.href="http://www.sohu.com";此处作了修改，能跳转到frameset的主页面 if(response.value=="修改密码") window.open("http://www.sohu.com","main"); else if(response.value=="钢笔") window.open("http://www.baidu.com","main"); } function ChangeStatus( CategoryID ) { var li_father = document.getElementById("li_" + CategoryID ); if( li_father.className == "Closed" ) { li_father.className = "Opened"; } else { li_father.className = "Closed"; } } </ script > </ div > </ form > </ body > </ html >

--------------------Tree.aspx.cs------------

using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { //此对象用于存放所有的节点数 public static DataSet dsAllNodes = new DataSet(); protected void Page_Load(object sender, EventArgs e) { AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); CreateNodes(); } private DataTable CreateStructure() { DataTable dt = new DataTable(); dt.Columns.Add(new DataColumn("CategoryID", typeof(int))); dt.Columns.Add(new DataColumn("CategoryName", typeof(string))); dt.Columns.Add(new DataColumn("FatherID", typeof(string))); dt.Columns.Add(new DataColumn("IsChild", typeof(bool))); return dt; } public void CreateNodes() { DataTable dt = this.CreateStructure(); DataRow drNew = dt.NewRow(); drNew["CategoryID"] = 1; drNew["CategoryName"] = "帐户管理"; drNew["FatherID"] = 0; dt.Rows.Add( drNew ); drNew = dt.NewRow(); drNew["CategoryID"] = 2; drNew["CategoryName"] = "修改密码"; drNew["FatherID"] = 1; dt.Rows.Add( drNew ); drNew = dt.NewRow(); drNew["CategoryID"] = 3; drNew["CategoryName"] = "工具"; drNew["FatherID"] = 1; dt.Rows.Add( drNew ); drNew = dt.NewRow(); drNew["CategoryID"] = 4; drNew["CategoryName"] = "手机"; drNew["FatherID"] = 0; dt.Rows.Add(drNew); drNew = dt.NewRow(); drNew["CategoryID"] = 5; drNew["CategoryName"] = "苹果"; drNew["FatherID"] = 4; dt.Rows.Add( drNew ); drNew = dt.NewRow(); drNew["CategoryID"] = 9; drNew["CategoryName"] = "钢笔"; drNew["FatherID"] = 3; dt.Rows.Add( drNew ); drNew = dt.NewRow(); drNew["CategoryID"] = 10; drNew["CategoryName"] = "铅笔"; drNew["FatherID"] = 3; dt.Rows.Add( drNew ); drNew = dt.NewRow(); drNew["CategoryID"] = 14; drNew["CategoryName"] = "尺子"; drNew["FatherID"] = 3; dt.Rows.Add( drNew ); drNew = dt.NewRow(); drNew["CategoryID"] = 12; drNew["CategoryName"] = "橡皮"; drNew["FatherID"] = 3; dt.Rows.Add( drNew ); dsAllNodes.Tables.Add(dt); } [AjaxPro.AjaxMethod] public DataSet GetSubCategory(int CategoryID) { DataSet ds = new DataSet(); DataTable dt = this.CreateStructure(); DataRow[] drSelect = dsAllNodes.Tables[0].Select("FatherID=" + CategoryID.ToString()); foreach (DataRow drTemp in drSelect) { DataRow dr = dt.NewRow(); dr["CategoryID"] = drTemp["CategoryID"]; dr["CategoryName"] = drTemp["CategoryName"]; dr["FatherID"] = drTemp["FatherID"]; dr["IsChild"] = IsLeaf( int.Parse( drTemp["CategoryID"].ToString() ) ); dt.Rows.Add(dr); } ds.Tables.Add(dt); return ds; } [AjaxPro.AjaxMethod] public bool IsLeaf(int Category) { foreach(DataRow dr in dsAllNodes.Tables[0].Rows) { if (dr["FatherID"] != null && int.Parse(dr["FatherID"].ToString()) == Category) { return false; } } return true; } [AjaxPro.AjaxMethod] public string GetNameByCategoryID(string CategoryID ) { foreach( DataRow dr in dsAllNodes.Tables[0].Rows ) { if( dr["CategoryID"].ToString() == CategoryID.ToString() ) { return dr["CategoryName"].ToString(); } } return ""; }}

修改的地方：原程序只有一个父结点，现在我改成两个了，另外，在点击子结点的时候，我做了两个连接跳转到搜狐和百度。

另外，还需要一个css文件夹，此处好像不能上传文件，抱歉了。还有一点，系统目录的bin文件夹里要有ajaxpro.dll这个文件。网上有下载的。希望对大家有所帮助。

专利

最新回复(0)