spring boot使用到菜单时,用到了bootstrap-treeview.js插件的简单使用

  • 发表于 3个月前
  • 阅读 ( 28 )
  • 分类:Java
0 人推荐了该文章

1、bootstrap-treeview Github网址:https://github.com/jonmiles/bootstrap-treeview

2、使用要求:

<!-- 样式表 -->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/bootstrap-treeview.css" rel="stylesheet" />

<!-- JS文件 -->
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

 3、数据格式:(注意了,使用过程中,树的数据格式可以Json格式,也可以写死,当然写死的代码肯定不灵活。Json格式的字段名一定要按照tree的字段要求,即文本格式text,子节点名称nodes等)

[{
	"text": "父节点 1",
	"nId": 4,
	"nodeId": 4,
	"tags": ["fdfddffd", "fdfddffd"],
	"nodes": [{
		"text": "子节点 1",
		"nId": 3,
		"tags": ["45"],
		"nodeId": "2",
		"nodes": [{
			"text": "孙子节点 1",
			"nId": 2,
			"tags": ["42"],
			"nodeId": "3"
		}, {
			"text": "孙子节点 2",
			"nId": 1,
			"tags": ["41"],
			"nodeId": "8"
		}]
	}, {
		"text": "子节点 2",
		"nId": 1,
		"tags": ["45"],
		"nodeId": "7"
	} ]
}]

4、简单使用:

  4.1 添加容器:

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

4.2 定义树结构:(data为Json格式数据,这里采用ajax,从后台获取,代码如下)

 $(function () {
        $.ajax({
            type: "Post",
            url: "/admin/article/categorytree",
            dataType: "json",
            success: function (result) {
                $('#tree').treeview({
                    data: result,         // 数据源
                    showCheckbox: true,   //是否显示复选框
                    highlightSelected: true,    //是否高亮选中
                    //nodeIcon: 'glyphicon glyphicon-user',    //节点上的图标
                    nodeIcon: 'glyphicon glyphicon-globe',
                    emptyIcon: '',    //没有子节点的节点图标
                    multiSelect: false,    //多选
                    showTags: true,
                    onNodeChecked: function (event,data) {
                        alert(data.nodeId);
                    },
                    onNodeSelected: function (event, data) {
                        alert(data.nodeId);
                    }
                });
            },
            error: function () {
                alert("树形结构加载失败!")
            }
        });
    })

注:onNodeChecked 和 onNodeSelected 方法是说明文档中默认的方法,还有其他的方法,自己自己查阅说明文档,或者查看 bootstrap-treeview.js 文件,未压缩的js文件内容非常详细,易懂。

  4.3 Json格式数据源:(采用Java 的 Spring boot框架,列出简单的Control代码),下面是递归方法:

    public List getInfoEmonChild(List<ArticleCategory> list){
        List<Map> listMap = new ArrayList();
        for(ArticleCategory category :list){
            List<ArticleCategory> categorylist =this.getCategoryListByFatherId(category.getId());//把父类的编号传入,查询改父亲下的子类
            Map tempMap = new HashMap();
            tempMap.put("nodeId", category.getId());
            tempMap.put("text", category.getName());
            tempMap.put("id", category.getId());
            if(categorylist.size()>0){//如果该设备还有孩子,继续做查询,直到设备没有孩子,也就是最后一个节点
                tempMap.put("nodes", getInfoEmonChild(categorylist));
            }

            listMap.add(tempMap);
        }
        return listMap;
    }

下面是Control代码:

    @ResponseBody
    @RequestMapping(value = "/categorytree")
    public List getCategoryAllList() int parentId){
        //查查所有父分类
        List<ArticleCategory> list = articleCategoryService.getCategoryListByFatherId(0);
        return articleCategoryService.getInfoEmonChild(list);
    }

 

本文系转载自其它媒体或用户发布,目的在于信息传递,并不代表本站赞同其观点和对其真实性负责,如有新闻稿件和图片作品的内容、版权以及其它问题的,请联系我们。

0 条评论

默认排序