數據源為XML，因此放便擴展。
廢話不多說，直接上代碼（因一些原因，把部分數據修改或精簡了）。
XML代碼：
復制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8" ?>
<MenuData>
<Module Id="Business" Permissions="49,53,58,59,65,99,100,70,69" Name="業務管理" IsExpand="true">
<Menu Id="Orders" Permissions="49,53,58" Name="我的訂單" IsExpand="true">
<Item Permissions="49" IsOnlyVip="true" Name="預訂單" Url="Business/ProList.aspx" Title="預訂單"/>
<Item Id="Renting" Permissions="53" IsOnlyVip="true" Name="在訂單" Url="Business/List.aspx" Title="在訂單"/>
<Item Permissions="58" IsOnlyVip="true" Name="訂單歷史" Url="Business/RList.aspx" Title="訂單歷史"/>
</Menu>
<Menu Id="Clients" Permissions="59" Name="我的客戶" IsExpand="true">
<Item Id="ClientList" Permissions="59" Name="客戶列表" Url="Client/List.aspx" Title="客戶列表"/>
</Menu>
<Menu Id="" Permissions="65,99,100" Name="我的報表" IsExpand="true">
<Item Permissions="65" IsOnlyVip="true" Name="收入統計" Url="Report/Finance.aspx" Title="收入統計"/>
<Item Permissions="99" IsOnlyVip="true" Name="產品統計" Url="Report/Product.aspx" Title="產品統計"/>
<Item Permissions="100" IsOnlyVip="true" Name="客戶統計" Url="Report/Client.aspx" Title="客戶統計"/>
</Menu>
<Menu Id="" Permissions="70,69" Name="消息管理" IsExpand="true">
<Item Permissions="70" Name="發送站內消息" Url="" Title="發送站內消息" EventScript="onclick='OpenMsgWindow()'" />
<Item Id="ReceiveMsgList" Permissions="69" Name="消息接收列表" Url="Message/RList.aspx" Title="消息接收列表"/>
<Item Permissions="69" Name="消息發送列表" Url="Message/SList.aspx" Title="消息發送列表"/>
</Menu>
</Module>
<Module Id="Advertise" Permissions="89,90" Name="我要推廣" EventScript="OpenTuiGuangIndex();" >
<Menu Id="" Permissions="89" Name="產品推廣" Url="TuiGuang/Product.aspx" Title="產品推廣"/>
<Menu Id="" Permissions="90" Name="廣告推廣" Url="TuiGuang/Ad.aspx" Title="廣告推廣"/>
</Module>
<Module Id="SystemManage" Permissions="67,68" Name="系統設置">
<Menu Id="" Permissions="67" Name="更改系統密碼" Url="SysManage/Password.aspx" Title="更改系統密碼"/>
<Menu Id="" Permissions="68" Name="系統配置" Url="SysManage/Config.aspx" Title="系統配置"/>
</Module>
<Module Id="VIP" Permissions="" Name="會員介紹" IsUnVip="true">
<Menu Id="" Name="會員介紹" Url="VIP/index.html" Title="會員服務"/>
</Module>
</MenuData>
程序代碼：
復制代碼 代碼如下:
using System.Text;
using System.Collections;
using System.Xml;
using System.Web;
using System;
/// <summary>
/// CreateTree 的摘要說明
/// </summary>
public class MenuTree
{
int index = 0;//菜單欄目ID索引
private ArrayList havePermission = new ArrayList();
private bool isVip = false;
/// <summary>
/// 登錄用戶所擁有的權限
/// </summary>
private ArrayList HavePermissions
{
get { return havePermission; }
set { havePermission = value; }
}
/// <summary>
/// 登錄用戶是否是VIP
/// </summary>
private bool IsVip
{
get { return isVip; }
set { isVip = value; }
}
/// <summary>
/// 登錄用戶所擁有的權限 是否為VIP用戶
/// </summary>
/// <param name="havePermission"></param>
/// <param name="isVip"></param>
public MenuTree(ArrayList havePermission, bool isVip)
{
this.HavePermissions = havePermission;
this.IsVip = isVip;
}
/// <summary>
/// 綁定樹
/// </summary>
public string BindDataToTree()
{
System.Xml.XmlDocument document = new System.Xml.XmlDataDocument();
document.Load(HttpContext.Current.Server.MapPath("MenuData.xml"));
return CreateTreeHtml(document.DocumentElement, 0);
}
/// <summary>
/// 創建欄目樹
/// </summary>
/// <param name="document">xml節點</param>
/// <param name="deep">樹深度</param>
private string CreateTreeHtml(System.Xml.XmlNode document, int deep)
{
string nodeType = "Menu";//節點的類型，來生成子節點的CSS類型
StringBuilder treeHtml = new StringBuilder();
foreach (System.Xml.XmlNode node in document.ChildNodes)
{
string menuId = string.Empty;
string treeNodeHtml = string.Empty;
string nodeName = node.Name;
string showName = GetAttributesValue(node.Attributes["Name"]);//顯示欄目名
string nodeId = GetAttributesValue(node.Attributes["Id"]);//欄目ID
bool isExpand = GetAttributesValue(node.Attributes["IsExpand"]).ToLower().Trim() == "true" ? true : false;//是否展開
string permissions = GetAttributesValue(node.Attributes["Permissions"]);//權限字串
bool isOnlyVip = GetAttributesValue(node.Attributes["IsOnlyVip"]).ToLower().Trim() == "true" ? true : false;//是否只允許VIP訪問
bool isUnVip = GetAttributesValue(node.Attributes["IsUnVip"]).ToLower().Trim() == "true" ? true : false;//是否只准非VIP訪問
string eventScript = GetAttributesValue(node.Attributes["EventScript"]);//事件腳本
int chlidNodesCount = node.ChildNodes.Count;//子節點數
bool isPermissions = GetIsPermissions(permissions);//是否有權限
if (!isPermissions)
{
continue; //如果沒有權限，不生成此節點
}
if (nodeName == "Module")
{
if (isUnVip && IsVip)
{
continue;//如果為VIP會員 設為不允許訪問子欄目
}
menuId = GetMenuId(nodeId);
treeHtml.AppendFormat("<div class='Module' id='Menu{0}' onclick='DoNodes(this);{1}' onselectstart='return false;'>", menuId, eventScript);
treeHtml.Append(" <img src='/images/sideMenuIcon.gif' alt='' /> ");
treeHtml.AppendFormat("<span>{0}</span>", showName);
treeHtml.Append("</div>");
deep = 0;
nodeType = "Module";
}
else
{
treeHtml.Append("<table cellpadding='0' cellspacing='0' style='border-width: 0;width:90%'>");
treeHtml.Append("<tr class='NodeLine'>");
for (int i = 0; i < deep; i++)
{
if (i == deep - 1)
{
treeHtml.Append("<td class='nodeIcoBox'>");
if (chlidNodesCount > 0)
{
menuId = GetMenuId(nodeId);
treeHtml.AppendFormat("<a id='Menu{0}' href='javascript:;' onclick='DoNodes(this,\"menu\")'><img src='/Images/{1}.gif' alt=''/></a>", menuId, (isExpand ? "open-menu" : "close-menu"));
}
else
{
treeHtml.Append("<img src='/Images/open-menuno.gif' alt=''/>");
}
treeHtml.Append("</td>");
}
else
{
treeHtml.Append("<td style='width: 20px;'> </td>");
}
}
string url = GetAttributesValue(node.Attributes["Url"]); //鏈接地址
string title = GetAttributesValue(node.Attributes["Title"]);//鏈接TITLE信息
string menuNodeId = nodeId.Trim().Length > 0 ? "id='MenuNode" + nodeId + "'" : string.Empty;//樹節點ID
treeHtml.Append("<td style='white-space: nowrap;'>");
if (url.Length > 0 || chlidNodesCount == 0)
{
if (!isOnlyVip || (isOnlyVip && IsVip))//欄目是否只為VIP開放
{
if (url.Length > 0)
{
treeHtml.AppendFormat("<a href='{0}' target='MainFrame' title='{1}' {3} {4}>{2}</a>", url, title, showName, eventScript, menuNodeId);
}
else
{
treeHtml.AppendFormat("<a href='javascript:;' target='MainFrame' title='{0}' {2} {3}>{1}</a>", title, showName, eventScript, menuNodeId);
}
}
else
{
treeHtml.AppendFormat("<a href='javascript:;' target='MainFrame' title='{1}' onclick='return AlertVip();' class='disableColor' {3}>{2}</a>", url, title, showName, menuNodeId);
}
}
else
{
treeHtml.AppendFormat("<a href='javascript:;' onclick='DoAClick(\"Menu{0}\");' title='{1}' {3} {4}>{2}</a>", menuId, title, showName, eventScript, menuNodeId);
}
treeHtml.Append("</td>");
treeHtml.Append("</tr>");
treeHtml.Append("</table>");
}
if (chlidNodesCount > 0)
{
treeNodeHtml = CreateTreeHtml(node, deep + 1);
}
if (treeNodeHtml.Length > 0)
{
treeHtml.AppendFormat("<div id='Menu{0}Nodes' {1} style='{2}'>", menuId, (nodeType == "Module" ? "class='Menus'" : "class='MenuNodes'"), (isExpand ? "display:block;" : "display: none;"));
treeHtml.Append(treeNodeHtml);
treeHtml.Append("</div>");
}
}
return treeHtml.ToString();
}
/// <summary>
/// 取得欄目的ID
/// </summary>
private string GetMenuId(string nodeId)
{
return nodeId.Length > 0 ? nodeId : Convert.ToString(++index);
}
/// <summary>
/// 取得節點值
/// </summary>
private string GetAttributesValue(XmlAttribute attributeValue)
{
return attributeValue == null ? "" : attributeValue.Value.Trim();
}
/// <summary>
/// 是否有權限
/// </summary>
private bool GetIsPermissions(string permissions)
{
if (HavePermissions.Count == 0)
{
return false;
}
if (permissions.Length == 0)
{
return true;
}
else
{
string[] arrPermissions = permissions.Split(',');
for (int i = 0; i < arrPermissions.Length; i++)
{
if (HavePermissions.Contains(arrPermissions[i].Trim()))
{
return true;
}
}
return false;
}
}
}
相關JS代碼：
復制代碼 代碼如下:
function DoNodes(obj,type)
{
var divId=obj.id+'Nodes';
var qdivObj=$("#"+divId);
if(qdivObj.is(":hidden"))
{
qdivObj.show();
if(type=='menu')
{
$(obj).children("img").attr("src","Images/open-menu.gif");
}
else
{
qdivObj.siblings(".Menus:visible").hide();
}
}
else
{
qdivObj.hide();
if(type=='menu')
{
$(obj).children("img").attr("src","Images/close-menu.gif");
}
}
}
function DoAClick(id)
{
$("#"+id).click();
}
function AlertVip()
{
alert("非常抱歉,此模塊只對VIP會員開放!");return false;
}
最後效果
此代碼我覺得易放便擴展，只要稍改動一下代碼就能使用在自己的項目中。
