bootstrap-treeview
由于功能性需求:需要展示一个树状结构的导航界面
1.进行资源引用
1 2 3 4 5 |
|
2.需要一个DOM元素绑定该组件:
1 |
|
$('#tree').treeview({
data: getTree(), // 获取数据节点
levels: 5,//节点层级数
color: "#000",//每一级通用的 节点字体颜色
backColor: "#fff",//每一级通用的 节点字背景色
onhoverColor: "orange",//选中浮动颜色
borderColor: "red",//设置组件的边框颜色; 设置showBorder为false,如果你不想要一个可见的边框
showBorder: false,
showTags: true,//是否在每个节点的右侧显示标签。 其值必须在每个节点的数据结构中提供
highlightSelected: true,//是否突出显示选定的节点
selectedColor: "#fff",//设置选定节点的前景色
selectedBackColor: "darkorange",//设置选定节点的背景色
});
以这种方式进行数据绑定以及初始界面色彩效果的设置,默认点击效果第一次选中,第二次点击会选中效果会消失。通过设置onhoverColor属性,可以将节点一直处于选中效果。
------------------------树状数据结构------------------------------------
function getTree() {
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"}
];
return tree;
}
3.通过学习查找资料,可以给每个节点添加li点击事件,实现每个节点的点击操作
1 |
|
function itemOnclick(target) {
if (target.childNodes.length > 3) {
var val = target.childNodes[3].data;
$("#UserId").find("option[value='" + val + "']").attr("selected", "selected");
$("#UserId_flexselect")["0"].value = val;
}
//找到当前节点id
var nodeid = $(target).attr('data-nodeid');
var tree = $('#tree');
//获取当前节点对象
var node = tree.treeview('getNode', nodeid);
if (lastnode != null && target.children.length <= 2 ) {
var nodeidlast = $(lastnode).attr('data-nodeid');
var tree = $('#tree');
//获取当前节点对象
var nodelast = tree.treeview('getNode', nodeidlast);
tree.treeview('collapseNode', nodelast.nodeId);
}
1 |
|
最终结果:花了不少时间迷糊:
最后效果:
扩展:还剩下好多属性,没有时间研究:后续再慢慢看吧
$('#tree').treeview({
data: getTree(), // 获取数据节点
levels: 5,//节点层级数
color: "#000",//每一级通用的 节点字体颜色
backColor: "#fff",//每一级通用的 节点字背景色
onhoverColor: "orange",//选中浮动颜色
borderColor: "red",//设置组件的边框颜色; 设置showBorder为false,如果你不想要一个可见的边框
showBorder: false,
showTags: true,//是否在每个节点的右侧显示标签。 其值必须在每个节点的数据结构中提供
highlightSelected: true,//是否突出显示选定的节点
selectedColor: "#fff",//设置选定节点的前景色
selectedBackColor: "darkorange",//设置选定节点的背景色
});
节点属性
定义以下属性以允许节点级别覆盖,如节点特定的图标,颜色和标记
text
String
Mandatory 字符串 必需
显示给定树节点的文本值,通常位于节点图标的右侧
icon
String
Optional 字符串 可选
显示在给定节点上的图标,通常位于文本的左侧。
为简单起见,我们直接利用Bootstraps Glyphicons支持,因此您应该提供由空格分隔的基类和个别图标类。
通过提供基类,您可以完全控制所使用的图标。 如果你想使用自己的,那么只需将您的类添加到此图标字段
selectedIcon
String
Optional 字符串 可选
选定时显示在给定节点上的图标,通常位于文本的左侧
color
String
Optional 字符串 可选
在给定节点上使用的前景颜色将覆盖全局颜色选项
backColor
String
Optional 字符串 可选
给定节点上使用的背景颜色将覆盖全局颜色选项
href
String
Optional 字符串 可选
与全局enableLinks选项一起使用,以指定给定节点上的锚点标记URL
selectable
布尔值 默认值:true
是否可以在树中选择一个节点。 False表示节点应作为扩展标题,不会触发选择事件
state
Object
Optional 字符串 可选
描述节点的初始状态
state.checked
布尔值 默认值:false
是否选中一个节点,用复选框风格的图标表示
state.disabled
布尔值 默认值:false
是否禁用节点(不可选择,可扩展或可选)
state.expanded
布尔值 默认值:false
是否展开节点,即打开。 优先于全局选项水平
state.selected
布尔值 默认值:false
是否选择一个节点
tags
字符串数组 可选
与全局showTags选项一起使用可将附加信息添加到每个节点的右侧; 使用Bootstrap Badges
Extendible
您可以通过添加应用程序所需的任意数量的附加键值对来扩展节点对象。 请记住,这是在选择事件期间将被传递的对象
Options
选项允许您自定义树视图的默认外观和行为。 它们在初始化时作为对象传递给插件
//例子:初始化树视图
/ /扩大到5级
//背景颜色为绿色
$('#tree').treeview({data: data, // data is not optionallevels: 5,backColor: 'green'
});
您可以随时将新的选项对象传递给树视图,但是这将会重新初始化树视图
List of Options
以下是所有可用选项的列表
data
对象数组。 没有默认,期望数据
这是树视图显示的核心数据。
backColor
字符串,任何合法的颜色值。 默认值:从Bootstrap.css继承。
设置所有节点使用的默认背景色,除了在数据中以每个节点为基础重写时
borderColor
字符串,任何合法的颜色值。 默认值:从Bootstrap.css继承。
设置组件的边框颜色; 设置showBorder为false,如果你不想要一个可见的边框
checkedIcon
字符串,类名。 默认:由Bootstrap Glyphicons定义的“glyphicon glyphicon-check”
将图标设置为复选框,与showCheckbox一起使用
collapseIcon
字符串,类名称。 默认:Bootstrap Glyphicons定义的“glyphicon glyphicon-minus”
设置要在可折叠树节点上使用的图标
color
字符串,任何合法的颜色值。 默认值:从Bootstrap.css继承。
设置所有节点使用的默认前景色,除了在数据中以每个节点为基础重写时
emptyIcon
字符串,类名称。 默认:Bootstrap Glyphicons定义的“glyphicon”
设置要在没有子节点的树节点上使用的图标
enableLinks
布尔。 默认:false
是否将节点文本显示为超链接。 其数据结构中的href值必须在每个节点的基础上提供。
expandIcon
字符串,类名称。 默认:Bootstrap Glyphicons定义的“glyphicon glyphicon-plus”
设置要在可展开树节点上使用的图标
highlightSearchResults
布尔。 默认值:true
是否突出显示搜索结果
highlightSelected
布尔。 默认值:true
是否突出显示选定的节点
levels
整数。 默认:2
设置默认情况下树将被展开到深层的层次级别的数量
multiSelect
布尔。 默认:false
是否可以同时选择多个节点
nodeIcon
字符串,类名称。 默认:由Bootstrap Glyphicons定义的“glyphicon glyphicon-stop”
设置要在所有节点上使用的默认图标,除非在数据中以每个节点为基础重写
onhoverColor
字符串,任何合法的颜色值。默认:'#F5F5F5'。
设置当用户光标悬停在节点上时激活的默认背景色
selectedIcon
字符串,类名称。 默认:由Bootstrap Glyphicons定义的“glyphicon glyphicon-stop”
设置要在所有选定节点上使用的默认图标,除非在数据中的每个节点基础上重写
searchResultBackColor
字符串,任何合法的颜色值。 默认值:undefined,继承。
设置选定节点的背景颜色
searchResultColor
字符串,任何合法的颜色值。 默认:'#D9534F'。
设置选定节点的前景色
selectedBackColor
字符串,任何合法的颜色值。 默认:'#428bca'。
设置选定节点的背景颜色
selectedColor
字符串,任何合法的颜色值。 默认:'#FFFFFF'。
设置选定节点的前景色
showBorder
布尔。 默认值:true
是否在节点周围显示边框
showCheckbox
布尔。 默认:false
是否显示节点上的复选框
showIcon
布尔。 默认值:true
是否显示节点图标
showTags
布尔。 默认:false
是否在每个节点的右侧显示标签。 其值必须在每个节点的数据结构中提供
uncheckedIcon
字符串,类名。 默认:由Bootstrap Glyphicons定义的“glyphicon glyphicon-unchecked”
将图标设置为未勾选的复选框,与showCheckbox一起使用
方法
方法提供了一种以编程方式与插件交互的方式。 例如,可以通过expandNode方法扩展一个节点。
您可以通过以下两种方式之一调用方法:
1. The plugin's wrapper
插件的包装器作为访问底层方法的代理
$('#tree').treeview('methodName', args)
限制,多个参数必须作为参数数组传递
2. The treeview directly
您可以使用以下两种方法之一获取树视图的实例
//这个特殊的方法返回树视图的一个实例
$('#tree').treeview(true).methodName(args);
//实例也保存在DOM元素数据中,
//可以使用插件的ID“treeview”访问
$('#tree').data('treeview').methodName(args);
一个更好的方法,如果你计划了很多交互
List of Methods
以下是所有可用方法的列表
checkAll(options)
检查所有树节点
$('#tree').treeview('checkAll', { silent: true });
Triggers nodeChecked
event; pass silent to suppress events.
checkNode(node | nodeId, options)
检查给定的树节点,接受节点或nodeId
$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);
Triggers nodeChecked
event; pass silent to suppress events.
clearSearch()
清除任何先前搜索结果的树形视图,例如 删除其突出显示的状态
$('#tree').treeview('clearSearch');
Triggers searchCleared
event
collapseAll(options)
折叠所有树节点,折叠整个树
$('#tree').treeview('collapseAll', { silent: true });
Triggers nodeCollapsed
event; pass silent to suppress events.
collapseNode(node | nodeId, options)
折叠给定的树节点,它是子节点。 如果您不想折叠子节点,请传递选项 { ignoreChildren: true }
.
$('#tree').treeview('collapseNode', [ nodeId, { silent: true, ignoreChildren: false } ]);
Triggers nodeCollapsed
event; pass silent to suppress events.
disableAll(options)
禁用所有树节点
$('#tree').treeview('disableAll', { silent: true });
Triggers nodeDisabled
event; pass silent to suppress events.
disableNode(node | nodeId, options)
禁用给定的树节点,接受节点或nodeId
$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);
Triggers nodeDisabled
event; pass silent to suppress events.
enableAll(options)
启用所有树节点
$('#tree').treeview('enableAll', { silent: true });
Triggers nodeEnabled
event; pass silent to suppress events.
enableNode(node | nodeId, options)
启用给定的树节点,接受节点或nodeId
$('#tree').treeview('enableNode', [ nodeId, { silent: true } ]);
Triggers nodeEnabled
event; pass silent to suppress events.
expandAll(options)
展开所有树节点。 可以选择扩展到任何给定数量的级别
$('#tree').treeview('expandAll', { levels: 2, silent: true });
Triggers nodeExpanded
event; pass silent to suppress events.
expandNode(node | nodeId, options)
展开给定的树节点,接受节点或nodeId。 可以选择扩展到任何给定数量的级别
$('#tree').treeview('expandNode', [ nodeId, { levels: 2, silent: true } ]);
Triggers nodeExpanded
event; pass silent to suppress events.
getCollapsed()
返回折叠节点数组,例如 state.expanded = false
$('#tree').treeview('getCollapsed', nodeId);
getDisabled()
返回禁用的节点数组,例如 state.disabled = true
$('#tree').treeview('getDisabled', nodeId);
getEnabled()
返回已启用节点的数组,例如 state.disabled = false
$('#tree').treeview('getEnabled', nodeId);
getExpanded()
返回一个展开的节点数组,例如 state.expanded = true
$('#tree').treeview('getExpanded', nodeId);
getNode(nodeId)
返回与给定节点ID相匹配的单个节点对象.
$('#tree').treeview('getNode', nodeId);
getParent(node | nodeId)
返回给定节点的父节点,否则返回undefined
$('#tree').treeview('getParent', node);
getSelected()
返回选定节点的数组,例如 state.selected = true
$('#tree').treeview('getSelected', nodeId);
getSiblings(node | nodeId)
返回给定节点的兄弟节点数组,如果有效则返回undefined
$('#tree').treeview('getSiblings', node);
getUnselected()
返回未选定节点的数组,例如 state.selected = false
$('#tree').treeview('getUnselected', nodeId);
remove()
删除树视图组件。 删除附加事件,内部附加对象和添加的HTML元素
$('#tree').treeview('remove');
revealNode(node | nodeId, options)
显示给定的树节点,将树从节点扩展到根
$('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);
Triggers nodeExpanded
event; pass silent to suppress events.
search(pattern, options)
在树视图中搜索与给定字符串匹配的节点,并在树中突出显示它们。
返回匹配节点的数组
$('#tree').treeview('search', [ 'Parent', {ignoreCase: true, // case insensitiveexactMatch: false, // like or equalsrevealResults: true, // reveal matching nodes
}]);
Triggers searchComplete
event
selectNode(node | nodeId, options)
选择给定的树节点,接受节点或nodeId
$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);
Triggers nodeSelected
event; pass silent to suppress events.
toggleNodeChecked(node | nodeId, options)
切换节点检查状态; 检查是否未选中,如果选中取消选中
$('#tree').treeview('toggleNodeChecked', [ nodeId, { silent: true } ]);
Triggers either nodeChecked
or nodeUnchecked
event; pass silent to suppress events.
toggleNodeDisabled(node | nodeId, options)
切换节点禁用状态; 禁用如果启用,启用如果禁用
$('#tree').treeview('toggleNodeDisabled', [ nodeId, { silent: true } ]);
Triggers either nodeDisabled
or nodeEnabled
event; pass silent to suppress events.
toggleNodeExpanded(node | nodeId, options)
切换节点展开状态; 如果展开则折叠,如果折叠则展开
$('#tree').treeview('toggleNodeExpanded', [ nodeId, { silent: true } ]);
Triggers either nodeExpanded
or nodeCollapsed
event; pass silent to suppress events.
toggleNodeSelected(node | nodeId, options)
切换节点选择状态; 选择是否取消选择,取消选择
$('#tree').treeview('toggleNodeSelected', [ nodeId, { silent: true } ]);
Triggers either nodeSelected
or nodeUnselected
event; pass silent to suppress events.
uncheckAll(options)
取消选中所有的树节点
$('#tree').treeview('uncheckAll', { silent: true });
Triggers nodeUnchecked
event; pass silent to suppress events.
uncheckNode(node | nodeId, options)
取消给定的树节点,接受节点或nodeId
$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);
Triggers nodeUnchecked
event; pass silent to suppress events.
unselectNode(node | nodeId, options)
取消选择给定的树节点,接受节点或nodeId
$('#tree').treeview('unselectNode', [ nodeId, { silent: true } ]);
Triggers nodeUnselected
event; pass silent to suppress events.
Events 事件
提供事件以便您的应用程序可以响应树视图状态中的更改。 例如,如果要在选择节点时更新显示,请使用nodeSelected事件。
您可以通过使用选项回调处理程序或标准jQuery .on方法来绑定到以下定义的任何事件。
使用选项回调处理程序的示例:
$('#tree').treeview({
//回调的命名约定是用`on`预先设置的
//并大写事件名称的第一个字母
//例如 nodeSelected - > onNodeSelected
onNodeSelected: function(event, data) {// Your logic goes here});
并使用jQuery .on方法
$('#tree').on('nodeSelected', function(event, data) {// Your logic goes here
});
List of Events
nodeChecked (event, node)
- 节点被选中
nodeCollapsed (event, node)
- 节点已折叠
nodeDisabled (event, node)
-一个节点被禁用
nodeEnabled (event, node)
- 节点已启用
nodeExpanded (event, node)
- 节点被展开
nodeSelected (event, node)
- 节点被选中
nodeUnchecked (event, node)
- 一个节点没有被选中
nodeUnselected (event, node)
- 节点未被选中
searchComplete (event, results)
- 搜索完成后
searchCleared (event, results)
- 搜索结果被清除后
bootstrap-treeview相关推荐
- bootstrap treeview 无限子级菜单展示与JSON处理 完整
这几天上网找了bootstrap treeview例子 但是看别人写的/贴的代码都是模棱两可思路也说的让人摸不着头脑 只言片语 索性自己写一个 在此整理一下希望可以帮助一些需要使用bootstrap ...
- bootstrap风格的树形插件bootstrap treeview的使用记录
var options = {data: data, //data属性是必须的,是一个对象数组 Array of Objects.color: "", //所有节点使用的默认前景色 ...
- Bootstrap treeview 添加滚动条后 搜索完成滚动条自动移动到对应位置
$('#' + treeDivId).on('searchComplete',function(event, data) { if( isEmpty(data)){return;}//如果查找到的位置 ...
- 第二阶段(day07)bootstrap
1.Bootstrap介绍 程序员不擅长美化,但界面对美观有一定要求.前端技术里有很多免费的UI库(由设计师和工程师合作,把线程功能和样式封装成半成品,根据需要拿来半成品,拼成需要的页面). boot ...
- Bootstrap 4-Glyphicons迁移?
本文翻译自:Bootstrap 4 - Glyphicons migration? We have a project that uses glyphicons intensively. 我们有一个项 ...
- django权限二(多级菜单的设计以及展示)
多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每 ...
- 给bootstrap-treeview增加点击事件,单击菜单也能展开和折叠
希望给Bootstrap treeView插件点击列表也能展开子节点,所以对li元素增加了onClick方法. (一)首先修改bootstrap-treeview.js源码,找到<li clas ...
- beego利用casbin进行权限管理——第三节 策略查询
beego利用casbin进行权限管理--第一节 起步.测试 beego利用casbin进行权限管理--第二节 策略存储 beego利用casbin进行权限管理--第三节 策略查询 beego利用ca ...
- layer是如何使用的
@[ layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力.只需在调用时简单地配置相关参数,即可轻松实现.与同类弹出层组件相比,layer的优势明显,可能地在以更少的代码展现出更强健的功能.l ...
- Bootstrap系列之treeview实现菜单树
本博客,介绍通过Bootstrap的treeview插件实现菜单树的功能. treeview链接:http://www.htmleaf.com/Demo/201502141380.html ORM框架 ...
最新文章
- [转载]Python方法绑定——Unbound/Bound method object的一些梳理
- NopCommerce架构分析-依赖注入
- stm32g474教程_STM32-开发入门教程
- ACL 2020 | 消除文本分类问题中歧视现象的研究
- Leetcode题库 2038.邻色同删(双指针法 C实现)
- SAP OData请求是如何通过OData Plugin路由到OData Offline Data Store的
- linux中网卡的流量怎么通过c语言获取_用Python获取计算机网卡信息
- Nodejs开发框架Express3.0开发手记
- IE 8 Beta 2中文版首份试用体验
- jemalloc优化MySQL、Nginx内存管理
- Atitit.java的浏览器插件技术 Applet japplet attilax总结
- 微分几何、黎曼几何思想
- 程序员的自我进化:技术的广度与深度怎么权衡
- android jmf,基于JMF与Android的无线视频监控系统的设计与实现
- 稠密的无人机激光雷达点云数据处理与分析方法与工具科普系列(一)
- Winform像菜单一样弹出自定义内容实现示例
- 处理效应模型stata实例_Stata手动:各类匹配方法大全 A——理论篇
- win10系统下配置maven环境
- 程序员也可以很浪漫,精选10个圣诞节特效网页设计-前端HTML+CSS等实现
- 【技术科普二】石墨烯技术有什么特点和优势?