树形菜单 jsTree 使用方法
2014-10-14 19:09
127 查看
jsTree版本:3.0.4
在ASP.NET MVC中使用jsTree
数据库:
1、 一次性加载完所有节点
2、按需加载节点(lazy loading)
根节点的父项是0,根节点只有一个,似乎显示出来也不好看:
所以我们把它隐藏起来:
PS:
ready 和loaded 的区别:
loaded.jstree: triggered after the root node is loaded for the first time
ready.jstree : triggered after all nodes are finished loading
参考:
https://github.com/vakata/jstree https://groups.google.com/forum/#!forum/jstree http://www.jstree.com/ http://www.codeproject.com/Questions/731612/jstree-binding-with-json-data-send-from-controller
--End--
在ASP.NET MVC中使用jsTree
Model:
public class Department { public int Id { get; set; } public string Name { get; set; } public int PId { get; set; } }
数据库:
Controller:
jsTree既可以一次性把所有节点都加载到客户端,也可以只加载一层,点击节点后再去服务端获取下层节点。对于小的菜单可以一次性加载完,如果节点很多,可以按需加载(lazy loading)。1、 一次性加载完所有节点
public JsonResult GetTreeData(int clickId = 0) { // use database var db=new Salary.Models.EntityContext(); /* 一次性加载完所有节点. * 前端只需配置 'data': { 'url': '/Home/GetTreeData', 'dataType': 'json' * } 不用给服务端传值 * 服务端不需写where */ var items=from item in db.Department select new { id = item.Id, parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ! text = item.Name }; return Json(items, JsonRequestBehavior.AllowGet); }
2、按需加载节点(lazy loading)
public JsonResult GetTreeData(int clickId = 0) { // use database var db=new Salary.Models.EntityContext(); /* 异步加载节点(按需) 前端需提供id传给服务端: 'data': function (node) { return { id: node.id }; } 后端要在linq中加where筛选 */ var items=from item in db.Department where item.PId == clickId // 在服务端要把所有上级节点找出来 select new // 匿名类可以添加需要的字段,比如HasChildren { id = item.Id, parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ! text = item.Name, children = db.Department.Any(p => p.PId == item.Id) // true|false 是否有子项 }; return Json(items, JsonRequestBehavior.AllowGet); }
View:
<div id="jstree"> @section scripts{ <link href="~/Content/jstree/themes/default/style.min.css" rel="stylesheet" /> <script src="~/Scripts/jstree/jstree.js"></script> <script> $(document).ready(function () { $("#jstree").jstree({ "core": { //'initially_open':["abc"], 'data': { 'url': '/Home/GetTreeData', 'dataType': 'json', 'data': function (node) { // 传给服务端点击的节点 //return { id: node.id == "#" ? "0" : node.id }; return { clickId: node.id }; }, success: function () { //alert('ok'); } } } }); // 展开节点 $("#jstree").on("loaded.jstree", function (event, data) { // 展开所有节点 //$('#jstree').jstree('open_all'); // 展开指定节点 //data.instance.open_node(1); // 单个节点 (1 是顶层的id) data.instance.open_node([1, 10]); // 多个节点 (展开多个几点只有在一次性装载后所有节点后才可行) }); // 所有节点都加载完后 $("#jstree").on("ready.jstree", function (event, data) { //alert('all ok'); data.instance.open_node(1); // 展开root节点 //// 隐藏根节点 http://stackoverflow.com/questions/10429876/how-to-hide-root-node-from-jstree $("#1_anchor").css("visibility", "hidden"); $("li#1").css("position", "relative") $("li#1").css("top", "-20px") $("li#1").css("left", "-20px") $(".jstree-last .jstree-icon").first().hide(); }); // 获得点击节点的id $('#jstree').on("changed.jstree", function (e, data) { console.log("The selected nodes are:"); console.log(data.selected); alert('node.id is:' + data.node.id); alert('node.text is:'+data.node.text); console.log(data); // TODO: 传递给Tab //$.ajax({ // 'url': 'Home/GetTreeData/', // 'data': { 'id': data.node.id } //}); }); });// end ready </script>
根节点的父项是0,根节点只有一个,似乎显示出来也不好看:
所以我们把它隐藏起来:
PS:
ready 和loaded 的区别:
loaded.jstree: triggered after the root node is loaded for the first time
ready.jstree : triggered after all nodes are finished loading
参考:
https://github.com/vakata/jstree https://groups.google.com/forum/#!forum/jstree http://www.jstree.com/ http://www.codeproject.com/Questions/731612/jstree-binding-with-json-data-send-from-controller
--End--
相关文章推荐
- Bootstrap树形菜单插件TreeView.js使用方法详解
- Bootstrap树形菜单插件TreeView.js使用方法详解
- JS树形菜单组件Bootstrap TreeView使用方法详解
- ext 生成树形菜单的方法
- JQuery AJAX & JSON 使用示例一步到位 (DEMO:ASP.NET + MSSQL 无限级树形菜单)
- 使用tree实现无限级树形菜单
- 树形菜单(使用xtree控件实现)
- 一种简单方便的权限管理方法--使用菜单
- 多叉树结合JavaScript树形控件实现无限级树形菜单(一种构建多级有序树形结构JSON(或XML)数据源的方法)
- 记录:树形控件的一些使用方法(和sql server 结合显示)
- ExtJS的使用方法汇总(6)——工具栏和菜单
- 使用dTree构建树形菜单
- 使用动态JavaScript实现多级菜单联动时不刷新页面的方法
- 用dtree实现树形菜单 dtree使用说明
- 菜单的使用方法
- vs2005中的树形菜单(方法成品属于javascrip版)
- [效果]JS折叠菜单-使用方法
- merlin.acs的使用方法 merlin.acs添加右键菜单
- 【电脑使用】修改注册表,添加右键菜单“打开”的方法