t28利用jquery.treeview插件实现树状导航

1、北风网项目培训第28讲：利用jQuery.TreeView插件实现树状导航讲师：风舞烟JavaScript-JQuery系列全程精通+图书馆管理系统实战目录jQuery.TreeView插件简介jQuery.TreeView插件使用Query.TreeView异步jQuery.TreeView插件简介该插件的特点：1、支持静态的树，即一次性将全部数据加载到客户端。2、支持异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。3、支持节点级联。4、能够承载大数据量，并性能表现优异。5、支持主流浏览器。 6、使用方便官方网站： jQuery.TreeView插件使用使用jQuery.Tre

2、eViewStep 1:添加相关css及js的引用Simple:页面文件.htmlItem 1Item 1.0Item 1.0.0Item 1.1JS代码 $(document).ready(function() $(#navigation).treeview( persist: cookie, collapsed: true, unique: true ); );效果：treeview(options ) Options说明：1、animated设置动画效果.Eg:$(.selector).treeview( animated: fast ) 2、collapsed Treeview节点是否

3、收缩,true:收缩，false:展开$(.selector).treeview( collapsed: true ) 3、control TreeView显示的容器$(.selector).treeview( control: “#container” ) 4、unique 设置是否某一时刻只展开一个节点，true:只展开一个，false:可以同时展开其他节点。$(.selector).treeview( unique: true ) 5、toggle Note: Callback when toggling a branch. Arguments: this refers to the U

4、L that was shown or hidden. Works only with speed option set (set speed: 1 to enable callback without animations). 。$(.selector).treeview( toggle: function() console.log(this + has been toggled); ) 6、persist Note: Persist the tree state in cookies or the page location. If set to location, looks for

5、the anchor that matches location.href and activates that part of the treeview it. Great for href-based state-saving. If set to cookie, saves the state of the tree on each click to a cookie and restores that state on page load. $(.selector).treeview( persist: location ) 8、addEg:Creates a treeview and

6、 adds more elements to it on button-click. var tree = $(.selector).treeview(); $(.button).click(function() var newSublist = $(New Sublist + Item1 + Item2).appendTo(tree); tree.treeview( add: newSublist ); ); 9、异步树的加载 jquery.treeview.async用于在页面显示一个树形菜单，其特点在于所有节点都是异步获取的(只加载所需的节点，避免一次性加载全部导致客户端浏览器卡死)，服

7、务器端返回json格式的对象数组即可。每个json对象可以包含如下属性：说明：异步获取节点数据时，treeview会使用get方式提交一个参数(root)到服务器端，treeview初始化(首次加载)时，这个参数值为source，之后异步获取子节点时，参数值为所点击节点的id值，服务器端需根据这一参数值不同返回不同的json对象数组：Step1:添加jquery.treeview.async.js的引用Step2:前台HTMLMain DemoServer component usedLazy-loading treeStep3:前台JS$(document).ready(function()

8、$(#black).treeview( url: source.aspx);Step4:后台source.aspx protected void Page_Load(object sender, EventArgs e) /代表首次加载 if (Requestroot != null & Requestroot.ToString() = source) Response.Write( + text:根节点1,id:root1,hasChildren:true,text:根节点2,id:root2,hasChildren:true + ); else if (Requestroot != nul

9、l) /说明点击的是root1 string id = Requestroot.ToString(); if (id=root1) Response.Write(text:根节点1-子节点1,id:root1-child1,text:根节点1-子节点2,id:root1-child2); else if (id=root2) Response.Write(text:根节点2-子节点1,id:root2-child1,text:根节点2-子节点2,id:root2-child2); jQuery.treeview.async.plug.js扩展插件利用此插件可以让后台返回的json数据,多两个属性,url,target.形如:text:根节点1-子节点1,ur