zoukankan      html  css  js  c++  java
  • 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、样式展现:

  • 相关阅读:
    sh脚本学习笔记
    idea常见快捷键
    linux操作命令笔记
    【题解】[国家集训队]圈地计划
    【题解】[国家集训队]happiness
    【题解】小M的作物
    cpu的MMU
    socat命令
    strace命令
    Linux的文件描述符
  • 原文地址:https://www.cnblogs.com/hunterCecil/p/5730568.html
Copyright © 2011-2022 走看看