基于asp.net ajax 的异步加载无限级联树状菜单

　　最近一个项目用到这个功能，本来以为很容易，但写起来发现还是有点小难度的，现在写出来分享，如果不好不要拍砖~

　　效果图 1

　　效果图 2

　　效果图 3

　　一：数据库设计

　　　　数据字典：

　　　　menuID:自增列

　　　　menuName:菜单名

　　　　url:菜单指向

　　　　parentID:父级菜单ID,根目录为 0

　　　　menuIndex:菜单排序ID

　　　　menuLevel:菜单级别，根级别为 0

　　　　menuImg:菜单图片

　　二：数据实体类

　　　　需要这个类是为了前台操作的方便，这里要感慨微软的ajax框架确实功能强大，通过它，在前台用Javascript可以很方便的操作。这个类对应于数据表，非常简单。

代码

    /// <summary>
    /// 菜单信息类
    /// </summary>
    [Serializable]
    public class MenuInfo
    {
        public int MenuId { get; set; }
        public string MenuName { get; set; }
        public string Url { get; set; }
        public int ParentId { get; set; }
        public int MenuIndex { get; set; }
        public int MenuLevel { get; set; }
        public int ChildCount { get; set; }

        public MenuInfo() { }
    }

　　　　如果是VS2008,可以不用加 [Serializable] 特性。

　　三：数据库操作类

　　　　因为是异步加载，点击菜单项时才会加载下一级的菜单，所以sql 语句根据传入的parentID来检索数据。

        /// <summary>
        /// 根据parentId 分级获取菜单，用于Ajax加载模式
        /// </summary>
        /// <param name="parentId"></param>
        /// <returns></returns>
        public List<MenuInfo> GetChildMenus(int parentId)
        {
            string commandText = @"
                                select
                                    [menuId],
                                    [menuName],
                                    [url],
                                    [parentId],
                                    [MenuIndex],
                                    [MenuLevel],
                                    (select count(0) from b_Menu f where f.parentid= m.menuId)as ChildCount
                                from
                                    b_Menu m
                                where
                                    parentid=@parentId ORDER BY MenuIndex";
            DbParameter[] parms =
            {
                DBSQLHelper.MakeInParam("@parentId",(DbType)SqlDbType.Int,parentId)
            };
            return LoadMenuInfo(DBSQLHelper.ExecuteReader(CommandType.Text, commandText, parms));
        }

        private List<MenuInfo> LoadMenuInfo(IDataReader dr)
        {
            List<MenuInfo> menuList = new List<MenuInfo>();
            while (dr.Read())
            {
                MenuInfo m = new MenuInfo();
                m.MenuId = TypeParse.ObjectToInt(dr["menuid"]);
                m.MenuName = dr["menuName"].ToString().Trim();
                m.ParentId = TypeParse.ObjectToInt(dr["parentId"]);
                m.Url = dr["url"].ToString();
                if (dr.GetSchemaTable().Rows[6][0].ToString() ==("ChildCount"))
                {
                    m.ChildCount = TypeParse.ObjectToInt(dr["ChildCount"]);
                }
                m.MenuIndex = TypeParse.ObjectToInt(dr["MenuIndex"]);
                m.MenuLevel = TypeParse.ObjectToInt(dr["MenuLevel"]);
                menuList.Add(m);
            }
            dr.Close();
            return menuList;
        }

　　四：使用WebService调用数据类

ScriptManager控件对Javascript调用webservice有非常好的支持

使用webservice是为了让javascript可以比较容易的调用，注意在webservice的开头要添加

[System.Web.Script.Services.ScriptService] 特性。

当然，你也可以把ScriptManager控件的 EnablePageMethods 属性设为 true 后将方法写在 .aspx.cs 文件里，然后在页面中用 PageMethods.GetChildMenus调用。

代码

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]

public class BGMService  : System.Web.Services.WebService {

    public BGMService() {

    }
}

    [WebMethod]
    public List<MenuInfo> GetChildMenus(string parentId)
    {
        //System.Threading.Thread.Sleep(1000);
        return Menu.GetChildMenu(parentId);
    }

　　五：JavaScript接受数据

前面已经说了，asp.net ajax 对javascript调用webservice有很好的支持，具体怎么做呢？

1.将 ScriptManager 控件拖到页面上。

2.设置webservice引用地址

然后在javascript 中就可以用类名.方法名() 调用了。在本列中就是 BGMService.GetChildMenus() 。简单吧。

接到数据之后的处理比较麻烦，需要一定的javascript功底。我先把代码贴出来，有时间在加注释。

代码

div #treeMenus div{border:0;}
div #treeMenus img{cursor:pointer;}
div #treeMenus .Level_1
{
    margin:0;
    padding:0;
}
div #treeMenus .Level_2
{
    margin:0;
    padding:0;

}
div #treeMenus .machn
{
    margin:0;
    margin-left:40px;
    padding:0;

}
div #treeMenus ul
{
    list-style-type:none;
    width:100%;
    height:auto;
    clear:both;
}
div #treeMenus ul li
{
    list-style-image:none;
    float:left;
    margin-right:4px;
}
div #treeMenus ul .li_txt
{
    padding-top:4px;
    cursor:pointer;
}
div #treeMenus ul .li_txt:hover
{
    text-decoration:underline;
}

代码

　　完整示例下载

posted @ 2010-12-31 11:40 vs_bug 阅读(2689) 评论(0) 收藏举报

刷新页面返回顶部