Bootstrap-treeview树形结构应用

作为一个jQuery小白，还是不太熟悉使用bootstarp这种控件，遇见问题就方。项目需要展示树形列表，后台接口倒是会写，到前台用jquery的时候就很懵，jQuery.treeview和bootstarp.treeview都不知道怎么用。这个功能最后还是交给前端同事做了，痛定思痛，我要自己解决一遍。
我一开始尝试的时候有很多问题：
1.不知道该用jquery.treeview还是bootstrap.treeview，两个都不会用；
2.不知道两个空间都需要依赖什么js文件，这个问题最严重，因为代码里.treeview()一直报错，工作进行不下去
3.不知道控件需要接收的数据是怎样的，json数组？嵌套Json对象？还是特殊的形式，不知道数据格式也就没法写接口啦

首先问题1，前端同事选择了bootstrap.treeview控件，所以我也就先从bootstrap.treeview开始。
然后问题2，在引入bootstrap-treeview.js之前需要先引入jquery-3.0.0.js和bootstrap.min.js，以及css文件bootstrap.min.css，这个css我用的是线上版本，因为我发现我本地没有图标文件，显示的tree没有图标。
最后问题3，确定了控件，很容易就能找到控件所需的数据格式，bootstrap.treeview格式如下，可以看出是嵌套的json对象，同时，text属性表示节点名称，nodes属性表示子节点数组，因此可以确定，后端接口可以采用递归的方式获取treedata数据

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"
  }
];

我在自己的demo项目里尝试了bootstrap-treeview，后台写了个假接口，一次性返回所有demo数据，代码如下

ServiceImpl方法
public List<Node> getNodeList() {
        List<Node> result = new ArrayList<Node>();
        for(int i=0;i<10;i++){
            Node node = new Node();
            node.setId(i+1);
            node.setText("Node"+(i+1));
            List<Node> nodes = new ArrayList<Node>();
            for(int j=0;j<5;j++){
                Node child = new Node();
                child.setId(11+j);
                child.setText("child"+(11+j));
                nodes.add(child);
            }
            node.setNodes(nodes);
            result.add(node);
        }
        return result;
    }
    Controller方法
    @RequestMapping(value="/treeView.do",method = RequestMethod.GET)
    @ResponseBody
    public String tree(HttpServletRequest request,HttpServletResponse response){
        List<Node> list = service.getNodeList();
        return JSON.toJSONString(list);
    }

返回的数据

[{
	"id": 1,
	"nodes": [{
		"id": 11,
		"text": "child11"
	}, {
		"id": 12,
		"text": "child12"
	}],
	"text": "Node1"
}, {
	"id": 2,
	"nodes": [{
		"id": 11,
		"text": "child11"
	}, {
		"id": 12,
		"text": "child12"
	}],
	"text": "Node2"
}, {
	"id": 3,
	"nodes": [{
		"id": 11,
		"text": "child11"
	}, {
		"id": 12,
		"text": "child12"
	}],
	"text": "Node3"
}, {
	"id": 4,
	"nodes": [{
		"id": 11,
		"text": "child11"
	}, {
		"id": 12,
		"text": "child12"
	}],
	"text": "Node4"
}]

前台采用ajax加载数据，treeview构建树

<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TreeView</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  <!--加载线上css，确保图标可访问-->
    <script src="../static/js/jquery-3.0.0.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/bootstrap-treeview.js"></script>
</head>
<script>
    var treedata="";
    $(function(){
        getData(); //非异步加载treedata
        buildTree(); //调用包装器treeview构建树
    });

    var getData = function () {
        $.ajax({
            url:"/tree/treeView.do", //获取数据
            async:false, //非异步加载，加载数据后执行buildTree
            success : function(data) {
                treedata=data;
                console.log(data);
            }
        });
    }
    var buildTree=function(){
        $("#tree").treeview({
            data:treedata,
            levels:5,
            showCheckbox:true, //是否显示复选框
            icon: "glyphicon glyphicon-stop", 
            selectedIcon: "glyphicon glyphicon-stop"
        });
    }
</script>
<body>
    <div id="tree"></div>
</body>
</html>

最终结果，加号可以展开，减号可以折叠，方块可以勾选。
在这里插入图片描述
至此bootstrap-treeview显示栏目树就完事儿了。其实实现过程不是很难，也不用修改源码，对于我来说，难就难在不了解控件的使用方法，一开始就是懵的，导致不知道该往哪个方向继续，唉呀，修炼的路还是很长滴，jquery已经超出了我的认知，得再多花点精力才行。
下一步尝试用jquery.treeview解决这个问题。

Bootstrap-treeview树形结构应用

猜你喜欢