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、样式展现:

bootstrap---treeview使用方法的更多相关文章

  1. bootstrap的treeview使用方法

    首先引入文件: <link href="./css/bootstrap.css" rel="stylesheet"> <script src= ...

  2. Bootstrap treeview增加或者删除节点

    参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...

  3. 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法--(转)

    如有雷同,不胜荣幸,若转载,请注明 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了boot ...

  4. 初始化bootstrap treeview树节点

    最近在做启明星图库时,使用了Jquery Bootstrap  Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...

  5. WPF中TreeView.BringIntoView方法的替代方案

    原文:WPF中TreeView.BringIntoView方法的替代方案 WPF中TreeView.BringIntoView方法的替代方案 周银辉 WPF中TreeView.BringIntoVie ...

  6. 转载 JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...

  7. 转载------让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    本文是转载及收藏 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在c ...

  8. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

  9. bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    做一个在线系统,PC端也要做,但要兼容千恶的IE8[IE6 是万恶,打死我都不会管IE6],IE8 是我底线了md, 在IE8下 bottstrap 错乱,变形,不支持一些属性的问题,下面看了一篇 某 ...

  10. 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响:对标记attributes .propertie ...

随机推荐

  1. 模板层(template)

    模板: 什么是模板? html+模板语法 模板语法: 1 变量:{{}} 深度查询: 通过句点符号 . 过滤器 filter {{var|filter_name}} 2 标签: {% tag %} f ...

  2. Messagepack原理

    什么是Messagepack? 用官方的话说:MessagePack是一种高效的二进制序列化格式.它允许您像JSON一样在多个语言之间交换数据.但是,它更快并且更小.小整数被编码为一个字节,和典型的短 ...

  3. 51nod 1575 Gcd and Lcm

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1575 万年巨坑终于填掉了…… 首先是煞笔西瓜的做题历程O_O. ...

  4. HDU 3377 Plan

    Problem Description One day, Resty comes to an incredible world to seek Eve -- The origin of life. L ...

  5. 电铸3D18K硬金 电铸易熔合金 电铸中空硬金饰品合金

        俊霖电铸3DK金易熔合金是要求相互关连,互为条件,缺一不可,是产品完整性和完美性的重要体现.    第一.适用性:电铸3DK金易熔合金的性能应适用于电铸.首饰.K金饰品.摆件等工艺品的易熔合金 ...

  6. 一步一步从原理跟我学邮件收取及发送 4.不同平台下的socket

    既然是面向程序员的文章那当然不能只说说原理,一定要有实际动手的操作.    其实作为我个人的经历来说,对于网络编程,这是最重要的一章! 作为一位混迹业内近20年的快退休的程序员,我学习过很多的开发语言 ...

  7. node & grunt path处理相关

    在nodejs平台上写一些工具或者服务, 有很多需求会涉及到对目录或者文件路径的处理和操作.整理一些常用的处理path的方法 1.global __dirname Example: running n ...

  8. How to bypass Win10 logon password?

    Usually we will use LiveView or VFC to "boot up" the evidence files acquired from suspect' ...

  9. API接口签名验证2

    http://www.jianshu.com/p/d47da77b6419 系统从外部获取数据时,通常采用API接口调用的方式来实现.请求方和�接口提供方之间的通信过程,有这几个问题需要考虑: 1.请 ...

  10. thinkPHP中_initialize方法实例分析

    子类的_initialize方法自动调用父类的_initialize方法. 而php的构造函数construct,如果要调用父类的方法,必须在子类构造函数显示调用parent::__construct ...