bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,

以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。




 插件依赖

  • Bootstrap v3.0.3
  • jQuery v2.0.3

以上两个外部依赖文件已经经过测试可以正常使用,其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。


使用方法

首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。


<link href="./css/bootstrap.css" rel="stylesheet">
<script src="./js/jquery.js">script>
<script src="./js/bootstrap-treeview.js">script>   


HTML结构

可以使用任何HTML DOM元素来作为该列表树的容器:


<div id="tree">div>  


数据结构

var tree = [
  {
    text:"Parent 1",
    nodes: [
      {
        text:"Child 1",
        nodes: [
          {
            text:"Grandchild 1"
          },
          {
            text:"Grandchild 2"
          }
        ]
      },
      {
        text:"Child 2"
      }
    ]
  },
  {
    text:"Parent 2"
  },
  {
    text:"Parent 3"
  },
  {
    text:"Parent 4"
  },
  {
    text:"Parent 5"
  }
]; 


如果你需要自定义更多的内容,可以参考下面:

{
  text:"Node 1",
  icon:"glyphicon glyphicon-stop",
  selectedIcon:"glyphicon glyphicon-stop",
  color:"#000000",
  backColor:"#FFFFFF",
  href:"#node-1",
  selectable:true,
  state: {
    checked:true,
    disabled:true,
    expanded:true,
    selected:true
  },
  tags: ['available'],
  nodes: [
    {},
    ...
  ]
.......//可以扩展属性
} 


节点属性

下面的参数可用于树节点的属性定义,如节点的文本、颜色和标签等。

        public class T_Treeview
        {
            /// <summary>
            /// 列表树节点上的文本,通常是节点右边的小图标
            /// </summary>
            public string text { get; set; }
            /// <summary>
            /// 列表树节点上的图标,通常是节点左边的图标
            /// </summary>
            public string icon { get; set; }
            /// <summary>
            /// 当某个节点被选择后显示的图标,通常是节点左边的图标
            /// </summary>
            public string selectedIcon { get; set; }
            /// <summary>
            /// 节点的前景色,覆盖全局的前景色选项
            /// </summary>
            public string color { get; set; }
            /// <summary>
            /// 节点的背景色,覆盖全局的背景色选项
            /// </summary>
            public string backColor { get; set; }
            /// <summary>
            /// 结合全局enableLinks选项为列表树节点指定URL
            /// </summary>
            public string href { get; set; }
            /// <summary>
            /// 指定列表树的节点是否可选择。设置为false将使节点展开,并且不能被选择
            /// </summary>
            public string selectable { get; set; }
            /// <summary>
            /// 一个节点的初始状态
            /// </summary>
            public State state { get; set; }
            /// <summary>
            /// 通过结合全局showTags选项来在列表树节点的右边添加额外的信息
            /// </summary>
            public List<string> tags { get; set; }

            public List<T_Treeview> nodes = new List<T_Treeview>();
        }

        public class State
        {
            /// <summary>
            /// 指示一个节点是否处于checked状态,用一个checkbox图标表示
            /// </summary>
            public bool @checked = false;
            /// <summary>
            /// 指示一个节点是否处于disabled状态。(不是selectable,expandable或checkable)
            /// </summary>
            public bool disabled = false;
            /// <summary>
            /// 指示一个节点是否处于展开状态
            /// </summary>
            public bool expanded = false;
            /// <summary>
            /// 指示一个节点是否可以被选择
            /// </summary>
            public bool selected = false;
        }

参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入:
// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$('#tree').treeview({
  data: data,         // data is not optional
  levels: 5,
  backColor:'green'
}); 
参数名称参数类型默认值描述
dataArray of Objects列表树上显示的数据。
backColorString所有合法的颜色值,Default: inherits from Bootstrap.css。设置所有列表树节点的背景颜色。
borderColorString所有合法的颜色值,Default: inherits from Bootstrap.css。设置列表树容器的边框颜色,如果不想要边框可以设置showBorder属性为false。
checkedIconString:class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-check"设置处于checked状态的复选框图标。
collapseIconString:class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-minus"设置列表树可收缩节点的图标。  
colorString所有合法的颜色值,Default: inherits from Bootstrap.css。设置列表树所有节点的前景色。
emptyIconString:class名称Bootstrap Glyphicons定义的"glyphicon"。设置列表树中没有子节点的节点的图标。
enableLinksBooleanfalse是否使用当前节点的文本作为超链接。超链接的href值必须在每个节点的data结构中给出。
expandIconString:class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-plus"设置列表树可展开节点的图标。
highlightSearchResultsBooleantrue是否高亮搜索结果。
highlightSelectedBooleantrue当选择节点时是否高亮显示。
onhoverColorString所有合法的颜色值, Default: '#F5F5F5'。设置列表树的节点在用户鼠标滑过时的背景颜色。
levelsIntegerDefault: 2设置继承树默认展开的级别。
multiSelectBooleanfalse是否可以同时选择多个节点。
nodeIconString:class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"设置所有列表树节点上的默认图标。
selectedIconString:class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"设置所有被选择的节点上的默认图标。
searchResultBackColorString所有合法的颜色值, Default: undefined, inherits。设置搜索结果节点的背景颜色。
searchResultColorString所有合法的颜色值, Default: '#D9534F'设置搜索结果节点的前景颜色。
selectedBackColorString所有合法的颜色值, Default: '#428bca'设置被选择节点的背景颜色。
selectedColorString所有合法的颜色值, Default: '#FFFFFF'。设置列表树选择节点的背景颜色。
showBorderBooleantrue是否在节点上显示边框。
showCheckboxBooleanfalse是否在节点上显示checkboxes。
showIconBooleantrue是否显示节点图标。
showTagsBooleanfalse是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。
uncheckedIconString:class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-unchecked"设置图标为未选择状态的checkbox图标。 

 



版权声明

本站内容均来自网络转载或网友提供,如有侵权请及时联系我们删除!本站不承担任何争议和法律责任!




Hot


New


学一门乐器 -电子琴

当我在深圳一个人的时候,无聊的时候,总得想点事做,刚来毕业的那几年,第一没钱,第二没时间,折腾来折腾,但是都是为了生活。偶尔的一天,我想了一下,我喜欢什么,我为了什么,而我又看到我的QQ签名【每一个童年的梦想都值得用青春去捍卫!】我似乎在那时候又找到了自己,其中有一个内容就是音乐。从小也没学过什么乐器,最多听听歌,除了周杰伦,林俊杰,其他的歌手也不认识但是我想过,如果我有机会了 一定要学一门乐器。从那时候,我就思考,学什么比较好,最终我选了电子琴优点如下1.与钢琴想通,如果学会了,可以显摆一下2.电子琴最


学一门乐器 -电子琴
C# 图片调整压缩,修改分辨率

这几天结合网络上的代码,折腾了一下图片保存问题,主要在图片压缩上学习了一下。对于目前手机拍照或者网络照片而已,体积越来越大,但是真正使用的时候都是压缩显示的,以前是人工手动压缩,但是有时候操作一多,就容易漏了。整合了一下网络代码,调整成为自己合适的方式,然后就可以使用了 /// /// 图像转换 /// public class Conversion { /// /// 压缩调整图片分辨率 ///

换眼镜 - 头晕【选择恐惧症】

生活中,我并不是一个喜欢改变的人,懒得选择的人。特别是一些意义不是很大,或者说只是为了换个风格的事情。今天终于更换了眼镜,而我换眼镜的事情,可能比大家正常理解的奇葩很多。自从大学毕业后,我的高中同桌好友【代号:粥少(第四音)】从事眼镜行业,并送了我两眼镜,到现在也快有十年的时间了。而其中一副一直用到现在,今天才换另一副,期间没更换过镜片,实在是太花了,没办法才换的。我很讨厌改变这些小事情。比如我买


山豹晓梦心雨 的记录 - 2021/11/12 11:55:41微凉的日子,还是平静如水。烦啦one day 的记录 2021/9/26 9:40:31第四篇日记2021-11-19 日记【最近太累了】one day 的记录 2021/9/29 17:20:362021.11.7 +1 甜蜜的梦小美女快来玩啊 的记录 2021/8/28 19:36:36無新鮮事柏嘉 的记录 - 2021/11/26 8:05:12拾笔又放下,多看看书补补脑2021-11-27 日记【公司过夜】老老实实换头像,哈哈瞎写11062021 8:00:00 今天的梦(短)大话西游-高战斗力,给予玩家更高-淘手游交易平台第七篇日记JS 计时事件JS 获取 HTML 里面得自定义标签02-块级作用域换眼镜 - 头晕【选择恐惧症】大唐游仙记-等很多资源,持续更新战-淘手游交易平台信息系统项目管理师考点考题梳理(2):信息化基础知识-电子政务C# Cookie 写入读取 中文乱码的处理哥斯拉大战电饭煲 20210524JS 判断网页种某个ID得网页元素是否存在信息系统项目管理师 复习笔记 2021-07-02【更新】 登录方式可以用ID号加密码直接登录家用数据存储 局域网NAS 部署记录大话西游热血版-证人脸关闭不影响账号安全工作原-淘手游交易平台2021年秋季番记录 HTML 限制DIV大小,如果超过就限制进度条刀刀暴击BT-高战斗力给予玩家更高的游戏体-淘手游交易平台HTML中的 select 标签如何设置默认选中的选项弹弹堂手游-卡星数均为第一拥有角色及各项-淘手游交易平台JS 获取公网IP 地区与浏览器版本