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. Linux系统调优权威指南

    1.关闭SELINUX功能1.1 修改配置文件,使关闭SELINUX永久生效sed 's#SELINUX=enforcing#SELINUX=disables#g' /etc/selinux/conf ...

  2. Oracle忘记密码如何重

    ---恢复内容开始--- 昨天安装Oracle11g R2的时候给scott用户设置密码,当时没有显示而且还只以输入一次,可能密码输入错误,结果今天用scott用户登录果然密码不对,还好sys和sys ...

  3. HTTPS和HTTP的区别是什么?

    广泛应用于互联网世界的HTTP想必是大家再熟悉不过的了,然而细心的朋友可能发现淘宝.百度.网上银行等网站都变成HTTPS开头,并且还有一把小绿锁挂在地址栏,那么HTTPS和HTTP的区别是什么呢? 一 ...

  4. asp.net -mvc框架复习(2)-创建ASP.NET MVC 第一个程序以及MVC项目文件夹说明

    建议vs2013或2013以上版本的vs,要是跨平台的话最好用vs2015或vs2017的asp.net mvc core . 1.创建ASP.NET MVC 第一个程序 打开vs2013->文 ...

  5. 【开发技术】Java生成验证码

    Java生成验证码 为了防止用户恶意,或者使用软件外挂提交一些内容,就得用验证码来阻止,虽然这个会影响用户体验,但为了避免一些问题很多网站都使用了验证码;今天下午参考文档弄了一个验证码,这里分享一下; ...

  6. Vue.js的坑

    参考网址:http://cn.vuejs.org/v2/guide/components.html 1.camelCase vs. kebab-case HTML 特性不区分大小写.当使用非字符串模版 ...

  7. css超出内容以省略号显示

    控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...

  8. vue初学者

    先分享一波福利 vue学习视频    链接:https://pan.baidu.com/s/1ggSfE75 密码:7h2a        1.先安装 webpack vue-cli          ...

  9. python 序列

    序列 序列是python中的一种数据结构,这种数据结构根据索引来获取序列中的对象 有6种内建序列类:list,tuple,string,unicode,buffer,xrange. 其中xrange比 ...

  10. mybatis实战教程三:mybatis和springmvc整合

    一.搭建maven环境,引入相关jar 参考demo 二.写web.xml <?xml version="1.0" encoding="UTF-8"?&g ...