JQuery的tree显示处理插件

一.jsTree 国外的一款jQuery插件

官方网址：https://www.jstree.com/

功能有点：

1.支持，自定义icon，并且可以使用bootstrap中的小图标

常用功能整理：

1.后台处理，后台可以指定是否选中，是否展开

/// <summary>/// 菜单对应结构/// </summary>public class TreeItem{    public TreeItem()    {        this.children = new List<TreeItem>();    }    public int id { get; set; }    public string text { get; set; }    public TreeItemState state { get; set; }    public List<TreeItem> children { get; set; }    public class TreeItemState    {        public bool selected { get; set; } //是否选中        public bool opened { get; set; } //是否展开        public bool disabled { get; set; }    }}

/// <summary>/// 获取角色的菜单树/// </summary>/// <param name="RoleID"></param>/// <returns></returns>public string GetMenuTree(int RoleID){    //1.获取所有可分配菜单    List<Sys_Navigation> navList = Context.Sys_Navigation.Where(q => q.IsSys == false)        .OrderBy(q => q.SortValue)        .ToList();    //2.获取当前用户的菜单ID列表    List<int> role_nav = Context.Sys_Role_Nav.Where(q => q.RoleID == RoleID)        .Select(q => q.NavID)        .Distinct()        .ToList();    List<TreeItem> result = new List<TreeItem>();    //产生树结构    foreach (var parentItem in navList.Where(q => q.ParentID == null))    {        TreeItem parent = new TreeItem()        {            id = parentItem.NavID,            text = parentItem.Title,            state = new TreeItem.TreeItemState()            {                selected = role_nav.Contains(parentItem.NavID),                opened = true            }        };        //添加子菜单        foreach (var item in navList.Where(q => q.ParentID == parentItem.NavID).OrderBy(q => q.SortValue))        {            parent.children.Add(new TreeItem()            {                id = item.NavID,                text = item.Title,                state = new TreeItem.TreeItemState()                {                    selected = role_nav.Contains(item.NavID),                    opened = true                }            });        }        result.Add(parent);    }    return result.ToJsonString();}

2.前台初始化绑定

$.jstree.destroy();//删除已经创建的实例$('#jstree_div').jstree({    'plugins': ["wholerow", "checkbox", "types"], //指定插件    'core': {        'data': {            'url': '/admin/role/getmenutree?RoleID=' + RoleID,  //异步加载jstree html格式的数据地址            'dataType': 'json',            'data': function (node) {                return { 'id': node.id };            }        }    }});

3.前台获取选中菜单id

//1.获取选中菜单var idList = $("#jstree_div").jstree("get_checked"); //使用get_checked方法,获取选中的ID//2.提交修改权限$.myAjax('/admin/role/resetmenu', {    RoleID: $scope.resetid,    idList: idList.toString()}, function (data) {    tip(data.msg);    //3.关闭对话框    $rootScope.pageLoaded();    $('#authModal').modal('hide');});

二、zTree 国产插件

官方网址：http://www.treejs.cn/

功能有点：

1.国产

2.api，demo比较多

3.支持低版本浏览器

4.自定义icon的方面，不如期望理想。

如果使用bootstrap框架的话，还是比较推荐 jstree。

源代码Demo地址：http://git.oschina.net/tiama3798/BootstrapBack_Demo/tree/JQuery_Tree/

更多：

JQuery.dataTables免费开源的数据表格插件

Web前端代码编辑器之Atom整理