zTree 菜单

1.实体

public class zTreeNode
    {
        //{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
        public string id { get; set; }
        public string pId { get; set; }
        public string name { get; set; }
        public bool IsChecked { get; set; }
        public string open { get; set; }
        public string url { get; set; }
        public string target { get; set; }
    }

2.数据填充

public ContentResult LeftMenu()
        {
            try
            {
                SYSUser sysUser = Session["SYSUser"] as SYSUser;
                DataSet ds = T_SYS_ManageUsersBll.Instance.GetSysMenu(sysUser.LoginName);
                List<T_TMP_SysMenu> menulist1 = DataUtil.GetModelList<T_TMP_SysMenu>(ds.Tables[0]);
                List<T_TMP_SysMenu> menulist2 = menulist1.Where(t => t.parentID == 0).ToList();
                List<zTreeNode> zlist = new List<zTreeNode>();
                foreach (T_TMP_SysMenu item1 in menulist2)
                {
                    zTreeNode node1 = new zTreeNode();
                    node1.id = item1.ID.ToString();
                    node1.pId = item1.parentID.ToString();
                    node1.name = item1.Title;
                    node1.url = item1.Url;
                    node1.target = "main";
                    zlist.Add(node1);
                    List<T_TMP_SysMenu> menulist3 = menulist1.Where(t => t.parentID == item1.ID).ToList();
                    if (menulist3.Count > 0)
                    {
                        foreach (var item in menulist3)
                        {
                            //{ id: 1, pId: 0, name: "zTree Home", url: "../../Admin/ADM/T_ADM_News_List.aspx", target: "main" },
                            zTreeNode node = new zTreeNode();
                            node.id = item.parentID.ToString()+item.ID.ToString();
                            node.pId = item.parentID.ToString();
                            node.name = item.Title;
                            node.url = item.Url;
                            node.target = "main";
                            zlist.Add(node);
                        }
                    }
                }
                string json = HX.Common.JsonHelper.SerializeObject(new { success = true, data = zlist, msg = "" });
                return Content(json, "application/json");
            }
            catch (Exception ex)
            {
                string json = HX.Common.JsonHelper.SerializeObject(new { success = false,  msg =ex.Message });
                return Content(json, "application/json");
            }
        }

3.引入js

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

4.初始化zTree生成菜单

<script type="text/javascript">
        document.documentElement.focus();
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }, callback: {
                beforeExpand: beforeExpand,
                onExpand: onExpand
            }
        };
        $(document).ready(function () {
            createTree();
        });

        function beforeExpand(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeMenu");
            zTree.expandAll(false);
        }
        function onExpand(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeMenu");
            zTree.expandNode(treeNode, true, true, true);
        }
        function logout() {
            $.ajax({
                url: '/Desktop/Logout',
                type: "POST",
                dataType: "json",
                success: function (data) {
                    if (data.success == true) {
                        window.location.href = '/Login/Login';
                    }
                }
            });
        };
        function createTree() {
            var zNodes;
            $.ajax({
                url: '/Desktop/LeftMenu',
                data: { id: "100" },
                type: 'POST',
                dataType: "json",
                success: function (result) {
                    if (result.success) {
                        zNodes = result.data;
                        var zTree = $.fn.zTree.init($("#treeMenu"), setting, zNodes);

                    } else {
                        $("#treeMenu").html("<li class='red'>获取菜单失败</li>");
                    }
                }
            });
        }
 
    </script>

5.菜单位置

<body>
 
    <div id="left">
    <div class="x-panel-header">
      菜单导航 
    </div>
        <ul id="treeMenu" class="ztree">
        </ul>
    </div>
 
</body>

6.css

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