前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >记一次bootstrap-treeview的使用

记一次bootstrap-treeview的使用

作者头像
一觉睡到小时候
发布2019-07-03 17:54:23
6.7K0
发布2019-07-03 17:54:23
举报
文章被收录于专栏:国产程序员

简要教程

插件描述:bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。

插件依赖

  • Bootstrap v3.0.3
  • jQuery v2.0. 以上两个外部依赖文件已经经过测试可以正常使用,其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。

使用方法

首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。

代码语言:javascript
复制
<!-- Required Stylesheets -->
<link href="./css/bootstrap.css" rel="stylesheet">

<!-- Required Javascript -->
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap-treeview.js"></script>

HTML结构

可以使用任何HTML DOM元素来作为该列表树的容器:

代码语言:javascript
复制
<div id="tree"></div>

调用插件

代码语言:javascript
复制
function getTree() {
    // Some logic to retrieve, or generate tree structure
    return data;
}
$('#tree').treeview({data: getTree()});

数据结构

为了创建树的继承结构,需要为该列表树插件提供一个嵌套结构的js对象。例如:

代码语言:javascript
复制
var tree = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1"
          },
          {
            text: "Grandchild 2"
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  },
  {
    text: "Parent 3"
  },
  {
    text: "Parent 4"
  },
  {
    text: "Parent 5"
  }
];

最简单的树结构可以只有一个节点,使用一个带text属性的js对象来实现即可:

代码语言:javascript
复制
{
    text: "Node 1"
}

如果你需要自定义更多的内容,可以参考下面:

代码语言:javascript
复制
{
  text: "Node 1",
  icon: "glyphicon glyphicon-stop",
  selectedIcon: "glyphicon glyphicon-stop",
  color: "#000000",
  backColor: "#FFFFFF",
  href: "#node-1",
  selectable: true,
  state: {
    checked: true,
    disabled: true,
    expanded: true,
    selected: true
  },
  tags: ['available'],
  nodes: [
    {},
    ...
  ]
}

全局参数

参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入:

代码语言:javascript
复制
// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$('#tree').treeview({
  data: data,         // data is not optional
  levels: 5,
  backColor:'green'
}); 

可用方法

你可以通过两种方式来调用方法:

1、插件包装器:插件的包装器可以作为访问底层方法的代理。

代码语言:javascript
复制
$('#tree').treeview('methodName', args)

多个参数必须使用数组对象来传入。

2、直接使用treeview:你可以通过下面两种方法中的一种来获取treeview对象实例。

代码语言:javascript
复制
//该方法返回一个treeview的对象实例
$('#tree').treeview(true)
  .methodName(args);

//对象实例也保存在DOM元素的data中,
//可以使用'treeview'的id来访问它。
$('#tree').data('treeview')
  .methodName(args);

treeview方法列表

  • checkAll(options):选择所有的节点。
代码语言:javascript
复制
$('#tree').treeview('checkAll', { silent: true });
  • checkNode(node | nodeId, options):选择指定的节点,接收节点或节点ID。
代码语言:javascript
复制
$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);
  • clearSearch():清空以前的搜索结果。例如清除它们的高亮状态。
代码语言:javascript
复制
$('#tree').treeview('clearSearch');
  • collapseAll(options):折叠所有的节点,折叠整个树。
代码语言:javascript
复制
$('#tree').treeview('collapseAll', { silent: true });
  • collapseNode(node | nodeId, options):折叠指定节点和它的子节点如果不想折叠子节点可以设置{ ignoreChildren: true }。
代码语言:javascript
复制
$('#tree').treeview('collapseNode', [ nodeId, { silent: true, ignoreChildren: false } ]);
  • disableAll(options):禁用所有的节点。
代码语言:javascript
复制
$('#tree').treeview('disableAll', { silent: true });
  • disableNode(node | nodeId, options):禁用指定的节点,接收节点或节点ID。
代码语言:javascript
复制
$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);
  • enableAll(options):启用所有的节点。
代码语言:javascript
复制
$('#tree').treeview('enableAll', { silent: true });
  • enableNode(node | nodeId, options):启用指定的节点,接收节点或节点ID。
代码语言:javascript
复制
$('#tree').treeview('enableNode', [ nodeId, { silent: true } ]);
  • expandAll(options):展开所有的树节点。也可以展开任何给定级别的树节点。
代码语言:javascript
复制
$('#tree').treeview('expandAll', { levels: 2, silent: true });
  • expandNode(node | nodeId, options):展开指定的树节点,接收节点或节点ID。也可以展开任何给定级别的树节点。
代码语言:javascript
复制
$('#tree').treeview('expandNode', [ nodeId, { levels: 2, silent: true } ]);
  • getCollapsed():返回折叠节点的数组。例如state.expanded = false。
代码语言:javascript
复制
$('#tree').treeview('getCollapsed', nodeId);
  • getDisabled():返回被禁用节点的数组。
代码语言:javascript
复制
$('#tree').treeview('getDisabled', nodeId);
  • getEnabled():返回可用节点的数组。
代码语言:javascript
复制
$('#tree').treeview('getEnabled', nodeId);
  • getExpanded():返回所有展开节点的数组。
代码语言:javascript
复制
$('#tree').treeview('getExpanded', nodeId);
  • getNode(nodeId):返回给定节点ID的单一节点对象。
代码语言:javascript
复制
$('#tree').treeview('getNode', nodeId);
  • getParent(node | nodeId):返回给定节点的父节点,如果没有则返回undefined。
代码语言:javascript
复制
$('#tree').treeview('getParent', node);
  • getSelected():返回所有被选择节点的数组,例如:state.selected = true。
代码语言:javascript
复制
$('#tree').treeview('getSelected', nodeId);
  • getSiblings(node | nodeId):返回给定节点的兄弟节点的数组,如果没有则返回undefined。
代码语言:javascript
复制
$('#tree').treeview('getSiblings', node);
  • getUnselected():返回没有被选择节点的数组。例如:state.selected = false。
代码语言:javascript
复制
$('#tree').treeview('getUnselected', nodeId);
  • remove():移除列表树容器。移除附加的事件、附加对象和额外的html元素。
代码语言:javascript
复制
$('#tree').treeview('remove');
  • revealNode(node | nodeId, options):显示一个树节点,展开从这个节点开始到根节点的所有节点。
代码语言:javascript
复制
$('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);
  • search(pattern, options):搜索匹配是非常的指定树节点,并高亮它们。返回配平节点的数组。
代码语言:javascript
复制
$('#tree').treeview('search', [ 'Parent', {
  ignoreCase:true,    // case insensitive
  exactMatch:false,   // like or equals
  revealResults:true, // reveal matching nodes
}]);
$('##tree').treeview('search', [ value,{ ignoreCase: false, exactMatch: false },attr]);
//value:值,
//attr:需要查询的属性
  • selectNode(node | nodeId, options):选择一个给定的树节点,接收节点或节点ID。
代码语言:javascript
复制
$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);
  • toggleNodeChecked(node | nodeId, options):切换节点的Check状态。
代码语言:javascript
复制
$('#tree').treeview('toggleNodeChecked', [ nodeId, { silent: true } ]);
  • toggleNodeDisabled(node | nodeId, options):切换一个节点的可用和不可用状态。
代码语言:javascript
复制
$('#tree').treeview('toggleNodeDisabled', [ nodeId, { silent: true } ]);
  • toggleNodeExpanded(node | nodeId, options):切换一个节点的展开和折叠状态。
代码语言:javascript
复制
$('#tree').treeview('toggleNodeExpanded', [ nodeId, { silent: true } ]);
  • toggleNodeSelected(node | nodeId, options):切换一个节点的选择状态。
代码语言:javascript
复制
$('#tree').treeview('toggleNodeSelected', [ nodeId, { silent: true } ]);
  • uncheckAll(options):Uncheck所有的节点。
代码语言:javascript
复制
$('#tree').treeview('uncheckAll', { silent: true });
  • uncheckNode(node | nodeId, options):Uncheck一个给定的节点,接收节点或节点ID。
代码语言:javascript
复制
$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);
  • unselectNode(node | nodeId, options):不选择指定的节点,接收节点或节点ID。
代码语言:javascript
复制
$('#tree').treeview('unselectNode', [ nodeId, { silent: true } ]);

事件

你可以在参数中使用回调函数来绑定任何事件,或者使用标准的jQuery .on()方法来绑定事件。

在参数中调用的示例:

代码语言:javascript
复制
$('#tree').treeview({
  // The naming convention for callback's is to prepend with `on`
  // and capitalize the first letter of the event name
  // e.g. nodeSelected -> onNodeSelected
  onNodeSelected:function(event, data) {
    // 事件代码...
});  
//使用jQuery .on方法:
$('#tree').on('nodeSelected',function(event, data) {
  // 事件代码...
});     

实战

代码语言:javascript
复制
//后端代码:
 @RequestMapping(value = "/index", method = RequestMethod.POST)
    @ResponseBody
    public R index(@RequestBody MUser user) {
        //查询用户角色
        MRole role = this.roleService.queryUSerRole(user.getuId());
        //定义菜单返回格式
        List<Map<String, Object>> menus = new ArrayList<Map<String, Object>>();
        if (role != null) {
            //查询用户权限
            List<MMenu> menuList = this.menuService.queryRoleMenu(role.getrId());
            //找出母节点(一级菜单)
            List<MMenu> parent = new ArrayList<MMenu>();
            for (int i = 0; i < menuList.size(); i++) {
                MMenu menu = menuList.get(i);
                if (menu.getMpId() == 0) {
                    parent.add(menu);
                }
            }
            //找出子节点(二级菜单)
            List<MMenu> children = null;
            Map<String, Object> map = null;
            for (MMenu menu : parent) {
                map = new HashMap<String, Object>();
                map.put("parent", menu);
                children = new ArrayList<MMenu>();
                for (int i = 0; i < menuList.size(); i++) {
                    MMenu canUse = menuList.get(i);
                    if (canUse.getMpId() == menu.getmId()) {
                        children.add(canUse);
                    }
                }
                map.put("children", children);
                menus.add(map);
            }
        }
        return R.ok(menus);
    }

//HTML
  <div id="tree"></div>

//js
$(document).ready(function () {
        var userName = ReadCookie('userName');
        var roleName = ReadCookie('roleName');
        var uId = ReadCookie('userId');
        $('#userName').html(userName);
        $('#roleName').html(roleName);
        //查询用户菜单权限
        $.ajax({
            type: "POST",
            url: "http://localhost:8080/maintain/system/index",
            headers: {"Content-Type": "application/json"},
            data: JSON.stringify({uId: uId}),
            dataType: "json",
            success: function (res) {
                if (res.code == 200) {
                    $('#tree').treeview({data: getTree(res.data)});
                }
            }
        });

        function getTree(data) {
            var tree = [
            for (var index in data) {
                var parent = {
                    text: '',
                    href: '',
                    nodes: []
                };
                var p = data[index].parent;
                var c = data[index].children;
                parent.text = p.mName;
                parent.href = '#';
                for (var i in c) {
                    var child = {
                        text: '',
                        href: ''
                    };
                    if (c[i].mName != '' && c[i].mName != null) {
                        child.href = c[i].mUrl;
                        child.text = c[i].mName;
                    }
                    if (child.text != '') {
                        parent.nodes.push(child);
                    }
                }
                tree.push(parent);
            }
            return tree;
        }
    });

效果图:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-06-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 国产程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简要教程
  • 插件依赖
  • 使用方法
  • HTML结构
  • 调用插件
  • 数据结构
  • 全局参数
  • 可用方法
  • treeview方法列表
  • 事件
  • 实战
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档