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 }
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 }
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" />
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>
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>
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>