zTree 菜单

简介: 1.实体 1 public class zTreeNode 2 { 3 //{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true}, 4 public string id { get;...

1.实体

 1 public class zTreeNode
 2     {
 3         //{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
 4         public string id { get; set; }
 5         public string pId { get; set; }
 6         public string name { get; set; }
 7         public bool IsChecked { get; set; }
 8         public string open { get; set; }
 9         public string url { get; set; }
10         public string target { get; set; }
11     }
View Code

2.数据填充

 1 public ContentResult LeftMenu()
 2         {
 3             try
 4             {
 5                 SYSUser sysUser = Session["SYSUser"] as SYSUser;
 6                 DataSet ds = T_SYS_ManageUsersBll.Instance.GetSysMenu(sysUser.LoginName);
 7                 List<T_TMP_SysMenu> menulist1 = DataUtil.GetModelList<T_TMP_SysMenu>(ds.Tables[0]);
 8                 List<T_TMP_SysMenu> menulist2 = menulist1.Where(t => t.parentID == 0).ToList();
 9                 List<zTreeNode> zlist = new List<zTreeNode>();
10                 foreach (T_TMP_SysMenu item1 in menulist2)
11                 {
12                     zTreeNode node1 = new zTreeNode();
13                     node1.id = item1.ID.ToString();
14                     node1.pId = item1.parentID.ToString();
15                     node1.name = item1.Title;
16                     node1.url = item1.Url;
17                     node1.target = "main";
18                     zlist.Add(node1);
19                     List<T_TMP_SysMenu> menulist3 = menulist1.Where(t => t.parentID == item1.ID).ToList();
20                     if (menulist3.Count > 0)
21                     {
22                         foreach (var item in menulist3)
23                         {
24                             //{ id: 1, pId: 0, name: "zTree Home", url: "../../Admin/ADM/T_ADM_News_List.aspx", target: "main" },
25                             zTreeNode node = new zTreeNode();
26                             node.id = item.parentID.ToString()+item.ID.ToString();
27                             node.pId = item.parentID.ToString();
28                             node.name = item.Title;
29                             node.url = item.Url;
30                             node.target = "main";
31                             zlist.Add(node);
32                         }
33                     }
34                 }
35                 string json = HX.Common.JsonHelper.SerializeObject(new { success = true, data = zlist, msg = "" });
36                 return Content(json, "application/json");
37             }
38             catch (Exception ex)
39             {
40                 string json = HX.Common.JsonHelper.SerializeObject(new { success = false,  msg =ex.Message });
41                 return Content(json, "application/json");
42             }
43         }
View Code

3.引入js

1 <script src="../../Scripts/jquery.min.1.9.1.js"></script>
2     <script src="../../Scripts/zTree_v3-master/js/jquery.ztree.core.js" type="text/javascript"></script>
3     <link href="../../Scripts/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
View Code

4.初始化zTree生成菜单

 1 <script type="text/javascript">
 2         document.documentElement.focus();
 3         var setting = {
 4             data: {
 5                 simpleData: {
 6                     enable: true
 7                 }
 8             }, callback: {
 9                 beforeExpand: beforeExpand,
10                 onExpand: onExpand
11             }
12         };
13         $(document).ready(function () {
14             createTree();
15         });
16 
17         function beforeExpand(treeId, treeNode) {
18             var zTree = $.fn.zTree.getZTreeObj("treeMenu");
19             zTree.expandAll(false);
20         }
21         function onExpand(e, treeId, treeNode) {
22             var zTree = $.fn.zTree.getZTreeObj("treeMenu");
23             zTree.expandNode(treeNode, true, true, true);
24         }
25         function logout() {
26             $.ajax({
27                 url: '/Desktop/Logout',
28                 type: "POST",
29                 dataType: "json",
30                 success: function (data) {
31                     if (data.success == true) {
32                         window.location.href = '/Login/Login';
33                     }
34                 }
35             });
36         };
37         function createTree() {
38             var zNodes;
39             $.ajax({
40                 url: '/Desktop/LeftMenu',
41                 data: { id: "100" },
42                 type: 'POST',
43                 dataType: "json",
44                 success: function (result) {
45                     if (result.success) {
46                         zNodes = result.data;
47                         var zTree = $.fn.zTree.init($("#treeMenu"), setting, zNodes);
48 
49                     } else {
50                         $("#treeMenu").html("<li class='red'>获取菜单失败</li>");
51                     }
52                 }
53             });
54         }
55  
56     </script>
View Code

5.菜单位置

 1 <body>
 2  
 3     <div id="left">
 4     <div class="x-panel-header">
 5       菜单导航 
 6     </div>
 7         <ul id="treeMenu" class="ztree">
 8         </ul>
 9     </div>
10  
11 </body>
View Code

6.css

1     <style type="text/css">
2 body{ font-family: 'lucida grande' ,tahoma,arial,sans-serif;font-size: 11px; margin: 0;}
3   #left{ float: left; position: absolute; border:1px solid #8db2e3; overflow-x: hidden; overflow-y: auto; width:195px; height:540px;}
4 .ztree{ width:180px; padding: 5px;background: white none repeat scroll 0 0; }
5 .x-panel-header { background-image: -moz-linear-gradient(center top , #f3f6fc, #cbdaf0);border: 1px solid #99bbe8;  
6     color: #15428b; font: bold 11px/15px tahoma,arial,verdana,sans-serif; overflow: hidden; padding: 5px 3px 4px 5px;}
7     </style>
View Code

 

目录
相关文章
48zTree - 下拉菜单
48zTree - 下拉菜单
30 0
45zTree - OutLook 样式的左侧菜单
45zTree - OutLook 样式的左侧菜单
40 0
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
60 2
|
3月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
42 1
51zTree - 右键菜单的实现
51zTree - 右键菜单的实现
52 1
|
前端开发 JavaScript Java
Layui的选项卡及菜单
Layui的选项卡及菜单
153 0
44zTree - 左侧菜单
44zTree - 左侧菜单
49 0
21zTree - 用 zTree 方法 勾选 checkbox
21zTree - 用 zTree 方法 勾选 checkbox
43 0
26zTree - 用 zTree 方法 勾选 radio
26zTree - 用 zTree 方法 勾选 radio
38 0
|
JavaScript 前端开发
jquery如何在点击一个按钮时显示隐藏
jquery如何在点击一个按钮时显示隐藏
120 0