bootstrap---treeview使用方法
1、html部分:
<div id="tree"></div>
2、css设置展开/收缩按钮图片:
.tree_arrows_down:before{ content:url("../img/down.png"); } .tree_arrows_right:before{ content:url("../img/right.png"); }
3、js部分实现:
$('#tree').treeview({ data: treeData, expandIcon: "tree_arrows_right", collapseIcon: "tree_arrows_down", levels : 3, onhoverColor: "#E8E8E8", showBorder: false, showTags: true, highlightSelected: true, highlightSearchResults:false, selectedBackColor: "#8D9CAA", });
4、数据(treeData)格式:
var treeData =[ { text: "第一中学", nodes: [ { text: "高一年级", nodes: [ { text: "一班", nodes: [ { text: "三组",// } ] } ] }, { text: "高二年级", nodes: [ { text: "一班", nodes: [ { text: "一组", } ] } ] }, { text: "高三年级", nodes: [] } ] } ];
5、样式展现: