本文共 2745 字,大约阅读时间需要 9 分钟。
一.jsTree 国外的一款jQuery插件
官方网址:
功能有点:
1.支持,自定义icon,并且可以使用bootstrap中的小图标
常用功能整理:
1.后台处理,后台可以指定是否选中,是否展开
////// 菜单对应结构/// public class TreeItem{ public TreeItem() { this.children = new List(); } public int id { get; set; } public string text { get; set; } public TreeItemState state { get; set; } public List children { get; set; } public class TreeItemState { public bool selected { get; set; } //是否选中 public bool opened { get; set; } //是否展开 public bool disabled { get; set; } }}
///2.前台初始化绑定/// 获取角色的菜单树/// /// ///public string GetMenuTree(int RoleID){ //1.获取所有可分配菜单 List navList = Context.Sys_Navigation.Where(q => q.IsSys == false) .OrderBy(q => q.SortValue) .ToList(); //2.获取当前用户的菜单ID列表 List role_nav = Context.Sys_Role_Nav.Where(q => q.RoleID == RoleID) .Select(q => q.NavID) .Distinct() .ToList(); List result = new List (); //产生树结构 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();}
$.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 国产插件
官方网址:
功能有点:
1.国产
2.api,demo比较多
3.支持低版本浏览器
4.自定义icon的方面,不如期望理想。
如果使用bootstrap框架的话,还是比较推荐 jstree。
源代码Demo地址:
更多: