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

首先来看一下效果

页面加载之初

节点全部展开后

首先数据库的表结构如下

其中身份为主键，PId为关联到自身的外键

两个字段均为全局唯一标识符形式

层级关系主要靠这两个字段维护

其次需要有一个类型

公共类MenuType {公共Guid Id { get设置；}公共Guid PId { get设置；}公共字符串MenuName { get设置；}公共字符串Url { get设置；} public int OrderNum { get设置；} public int SonCount { get设置；}}此类型比数据库表增加了一个属性

SonCount

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

注意：也可以把此属性放在数据库中，性能上会提升一些，但需要增加额外的代码来维护此字段

接下来看一下取数据的方式

受保护的无效页面_加载(对象发送方，EventArgs e){ if(Request[' Action ']==' AJAX '){ var result=GetMenu(Request[' PID '])；JavaScript序列化程序序列化程序=新的JavaScript序列化程序()；字符串sRet=序列化程序。序列化（结果);回应. write(SRet)；回应end()；}}页面加载之初判断是否需要获取菜单数据

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

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

GetMenu函数获取需要请求的节点数据

私有列表类型GetMenu(字符串PID){ var结果=新ListMenuType()；SqlConnection conn=新的SqlConnection(“”数据源=。初始目录=SHU用户标识=saPassword=Allen ')；conn . Open()；SqlCommand cmd=new SqlCommand()；cmd .连接=连接.' CommandText='从菜单a左连接中选择a.*，b.cout作为计数（选择计数(*)作为菜单.菜单组中的PId .PId)作为a.Id=b.PId上的b，其中a . PiD="PiD "按订单编号排序；SqlDataReader dr=cmd .ExecuteReader(CommandBehavior .CloseConnection)；while(dr . Read()){ var obj=new MenuType()；物体Id=Guid .解析(博士[身份证]).ToString())；物体MenuName=dr['MenuName'].ToString()；物体OrderNum=转换.至t32(dr['订单编号'])；物体PId=dr['PId']==DBNull .价值？Guid .空的： Guid .解析(dr['PId'].ToString())；物体Url=dr['Url'].ToString()；物体SonCount=dr['count']==DBNull .价值？0 :转换.至t32(dr[' count '])；结果。添加(obj)；}返回结果；}在本演示中使用Java Script语言序列化程序来序列化菜单数组

前台的代码如下

asp3360内容ID='标头内容' runat='服务器' ContentPlaceHolderID='标头内容' link href='脚本/主题/默认/样式。CSS ' rel='样式表type='text/css' /脚本src=' http : Scripts/jquery。js ' type=' text/JavaScript '/脚本脚本src=' http : Scripts/jquery。jstree。js ' type=' text/JavaScript '/脚本脚本getJSON('/default.aspx？ACTION=AJaxpid=00000000-0000-0000-0000-00000000 '，函数（结果){ $。每个（结果，函数(I，item) { var typeN=item .SonCount 0？jstree-closed ' : ' jstree-leaf '；$('#tree ').追加(' li id='phtml_ '项身份证.为" class="TYPeN"a href="# "的项MenuName '/a/Li ')；});$('#demo2 ').jstree({ 'plugins': ['themes '，' html_data '，' type '，' ui '，' checkbox '，' core': { 'animation': 0 }，' type ' : { ' types ' : { ' person ' icon ' : { ' image ' 3: '/' Scripts/themes/default/person。png ' })，' depa 2 ' : { ' bind(' open _ node . jstree ')，function (e，data) { var id=data.rslt.obj[0].id；if ($('#' id ' li ').长度0){ return；} $.getJSON('/default.aspx？ACTION=AJaxpid=' id。替换(' phtml _ '，'')，函数(结果){ var str='ul' $ .每个（结果，函数(I，item) { var typeN=item .SonCount 0？jstree-closed ' : ' jstree-leaf '；定义变量图标=项目SonCount 0？部门2 ' : '人'；str=' li rel=' ' icon ' ' id=' phtml _ '项身份证.为" class="TYPeN"a href="# "的项MenuName '/a/Li '；});str='/ul '；$("#"id).追加（字符串);var tree=jquery。jstree。_ reference(' # ' id)；树。刷新()；$(' ins[class=' jstree-checkbox jstree-icon ']').移除CLaSS(' jstree-icon ')；$('.jstree-checkbox ').attr('style '，' ')；});});});});/script/asp: content asp3360 content ID=' body content ' runat=' server ' ContentPlaceHolderID=' main content ' div ID=' demo 2 ' ul ID=' tree '/ul/div/asp3360 content页面加载之初，先请求顶级节点

如果顶级节点的SonCount属性大于0

则使节点为闭合状态（样式为jstree-closed)

如果节点无子节点

则该节点的样式为jstree-leaf

当用户点击闭合状态的节点时，客户端发起请求

并把点击节点的身份传给后端，后端获取到点击节点的子节点后

通过附加添加到点击节点下

至此，无限分级的树创建完成

其中不包含数据库

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《javascript面向对象入门教程》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。