首页 | 4820 | 444 | 1961 | 添加收藏 上一个 下一个
jQuery多级列表树插件bootstrap-treeview

简要教程


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


插件依赖


Bootstrap v3.0.3


jQuery v2.0.3


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


使用方法


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


<!-- 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元素来作为该列表树的容器:


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

调用插件


该列表树插件最基本的调用方法如下:


function getTree() {
    // Some logic to retrieve, or generate tree structure
    return data;
}
$('#tree').treeview({data: getTree()});

数据结构


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


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对象来实现即可:


{
    text: "Node 1"
}

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


{
  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: [
    {},
    ...
  ]
}