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、樣式展現:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM