jstree创建无限分级树的方法【基于ajax动态创建子节点】

jstree创建无限分级树的方法【基于创建无限分级树的方法【基于ajax动态创建子节点】动态创建子节点】

主要介绍了jstree创建无限分级树的方法,结合实例形式分析了jstree基于ajax结合asp.net后台动态创建子节点实现无限分级树效果的相关步骤与操作技

巧,需要的朋友可以参考下

本文实例讲述了jstree创建无限分级树的方法。分享给大家供大家参考，具体如下：

首先来看一下效果

页面加载之初

节点全部展开后

首先数据库的表结构如下

public Guid Id { get; set; }

public Guid PId { get; set; }

public string MenuName { get; set; }

public string Url { get; set; }

public int OrderNum { get; set; }

public int SonCount { get; set; }

}

此类型比数据库表增加了一个属性

SonCount

这个属性用来记录当前节点的子节点的个数

var result = GetMenu(Request["pid"]);

JavaScriptSerializer serializer = new JavaScriptSerializer();

string sRet = serializer.Serialize(result);

Response.Write(sRet);

Response.End();

}

}

页面加载之初判断是否需要获取菜单数据

其中请求参数pid为客户端需要获取的节点ID

如果请求顶级节点，则此参数的值为00000000-0000-0000-0000-000000000000

SqlCommand cmd = new SqlCommand();

cmd.Connection = conn;

cmd.CommandText = "select a.*,b.cout as count from Menu a left join (select COUNT(*) as cout,Menu.PId from Menu group by Menu.PId) as b on a.Id = b.PId where a.PId = '" + pid + "' order by OrderNum";

SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);

while (dr.Read())

{

var obj = new MenuType();

obj.Id =Guid.Parse(dr["Id"].ToString());

obj.MenuName = dr["MenuName"].ToString();

obj.OrderNum = Convert.ToInt32(dr["OrderNum"]);

}

在本DEMO中使用JavaScriptSerializer来序列化菜单数组

前台的代码如下

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

<link href="Scripts/themes/default/style.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery.js" type="text/javascript"></script>

<script src="Scripts/jquery.jstree.js" type="text/javascript"></script>

<script>

$(function () {