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整理