bootstrap-treeview中文API 以及后台JSON数据处理
bootstrap-treeview
简要教程
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 src = "./js/bootstrap-treeview.js" > |
HTML结构
可以使用任何HTML DOM元素来作为该列表树的容器:
< div id = "tree" > |
调用插件
该列表树插件最基本的调用方法如下:
function getTree() { // Some logic to retrieve, or generate tree structure return data; } $( '#tree' ).treeview({data: getTree()}); |
数据结构
为了创建树的继承结构,需要为该列表树插件提供一个嵌套结构的js对象。例如:
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
属性的js对象来实现即可:
{ text: "Node 1" } |
如果你需要自定义更多的内容,可以参考下面:
{ 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: [ {}, ... ] .......//可以扩展属性 } |
节点属性
下面的参数可用于树节点的属性定义,如节点的文本、颜色和标签等。
参数名称 | 参数类型 | 参数描述 |
text | String(必选项) | 列表树节点上的文本,通常是节点右边的小图标。 |
icon | String(可选项) | 列表树节点上的图标,通常是节点左边的图标。 |
selectedIcon | String(可选项) | 当某个节点被选择后显示的图标,通常是节点左边的图标。 |
href | String(可选项) | 结合全局enableLinks选项为列表树节点指定URL。 |
selectable | Boolean. Default: true | 指定列表树的节点是否可选择。设置为false 将使节点展开,并且不能被选择。 |
state | Object(可选项) | 一个节点的初始状态。 |
state.checked | Boolean,默认值false |
指示一个节点是否处于checked状态,用一个checkbox图标表示。 |
state.disabled | Boolean,默认值false |
指示一个节点是否处于disabled状态。(不是selectable,expandable或checkable) |
state.expanded | Boolean,默认值false |
指示一个节点是否处于展开状态。 |
state.selected | Boolean,默认值false |
指示一个节点是否可以被选择。 |
color | String. Optional | 节点的前景色,覆盖全局的前景色选项。 |
backColor | String. Optional | 节点的背景色,覆盖全局的背景色选项。 |
tags | Array of Strings. Optional | 通过结合全局showTags选项来在列表树节点的右边添加额外的信息。 |
全局参数
参数可以定制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' }); |
参数名称 | 参数类型 | 默认值 | 描述 |
data | Array of Objects | 无 | 列表树上显示的数据。 |
backColor | String | 所有合法的颜色值,Default: inherits from Bootstrap.css。 | 设置所有列表树节点的背景颜色。 |
borderColor | String | 所有合法的颜色值,Default: inherits from Bootstrap.css。 | 设置列表树容器的边框颜色,如果不想要边框可以设置showBorder 属性为false。 |
checkedIcon | String:class名称 | Bootstrap Glyphicons定义的 "glyphicon glyphicon-check" | 设置处于checked状态的复选框图标。 |
collapseIcon | String:class名称 | Bootstrap Glyphicons定义的 "glyphicon glyphicon-minus" | 设置列表树可收缩节点的图标。 |
color | String | 所有合法的颜色值,Default: inherits from Bootstrap.css。 | 设置列表树所有节点的前景色。 |
emptyIcon | String:class名称 | Bootstrap Glyphicons定义的"glyphicon"。 | 设置列表树中没有子节点的节点的图标。 |
enableLinks | Boolean | false | 是否使用当前节点的文本作为超链接。超链接的href 值必须在每个节点的data结构中给出。 |
expandIcon | String:class名称 | Bootstrap Glyphicons定义的 "glyphicon glyphicon-plus" | 设置列表树可展开节点的图标。 |
highlightSearchResults | Boolean | true | 是否高亮搜索结果。 |
highlightSelected | Boolean | true | 当选择节点时是否高亮显示。 |
onhoverColor | String | 所有合法的颜色值, Default: '#F5F5F5'。 | 设置列表树的节点在用户鼠标滑过时的背景颜色。 |
levels | Integer | Default: 2 | 设置继承树默认展开的级别。 |
multiSelect | Boolean | false | 是否可以同时选择多个节点。 |
nodeIcon | String:class名称 | Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop" | 设置所有列表树节点上的默认图标。 |
selectedIcon | String:class名称 | Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop" | 设置所有被选择的节点上的默认图标。 |
searchResultBackColor | String | 所有合法的颜色值, Default: undefined, inherits。 | 设置搜索结果节点的背景颜色。 |
searchResultColor | String | 所有合法的颜色值, Default: '#D9534F' | 设置搜索结果节点的前景颜色。 |
selectedBackColor | String | 所有合法的颜色值, Default: '#428bca' | 设置被选择节点的背景颜色。 |
selectedColor | String | 所有合法的颜色值, Default: '#FFFFFF'。 | 设置列表树选择节点的背景颜色。 |
showBorder | Boolean | true | 是否在节点上显示边框。 |
showCheckbox | Boolean | false | 是否在节点上显示checkboxes。 |
showIcon | Boolean | true | 是否显示节点图标。 |
showTags | Boolean | false | 是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。 |
uncheckedIcon | String:class名称 | Bootstrap Glyphicons定义的 "glyphicon glyphicon-unchecked" | 设置图标为未选择状态的checkbox图标。 |
可用方法
你可以通过两种方式来调用方法:
- 1、插件包装器:插件的包装器可以作为访问底层方法的代理。
$(
'#tree'
).treeview(
'methodName'
, args)
多个参数必须使用数组对象来传入。
- 2、直接使用treeview:你可以通过下面两种方法中的一种来获取treeview对象实例。
//该方法返回一个treeview的对象实例
$(
'#tree'
).treeview(
true
)
.methodName(args);
//对象实例也保存在DOM元素的data中,
//可以使用'treeview'的id来访问它。
$(
'#tree'
).data(
'treeview'
)
.methodName(args);
treeview方法列表
checkAll(options)
:选择所有的节点。$(
'#tree'
).treeview(
'checkAll'
, { silent:
true
});
触发
nodeChecked
事件,传入silent
来阻止其它事件。checkNode(node | nodeId, options)
:选择指定的节点,接收节点或节点ID。$(
'#tree'
).treeview(
'checkNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeChecked
事件,传入silent
来阻止其它事件。clearSearch()
:清空以前的搜索结果。例如清除它们的高亮状态。$(
'#tree'
).treeview(
'clearSearch'
);
触发
searchCleared
事件。collapseAll(options)
:折叠所有的节点,折叠整个树。$(
'#tree'
).treeview(
'collapseAll'
, { silent:
true
});
触发
nodeCollapsed
事件,传入silent
来阻止其它事件。collapseNode(node | nodeId, options)
:折叠指定节点和它的子节点。如果不想折叠子节点,可以设置{ ignoreChildren: true }
。$(
'#tree'
).treeview(
'collapseNode'
, [ nodeId, { silent:
true
, ignoreChildren:
false
} ]);
触发
nodeCollapsed
事件,传入silent
来阻止其它事件。disableAll(options)
:禁用所有的节点。$(
'#tree'
).treeview(
'disableAll'
, { silent:
true
});
触发
nodeDisabled
事件,传入silent
来阻止其它事件。disableNode(node | nodeId, options)
:禁用指定的节点,接收节点或节点ID。$(
'#tree'
).treeview(
'disableNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeDisabled
事件,传入silent
来阻止其它事件。enableAll(options)
:启用所有的节点。$(
'#tree'
).treeview(
'enableAll'
, { silent:
true
});
触发
nodeEnabled
事件,传入silent
来阻止其它事件。enableNode(node | nodeId, options)
:启用指定的节点,接收节点或节点ID。$(
'#tree'
).treeview(
'enableNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeEnabled
事件,传入silent
来阻止其它事件。expandAll(options)
:展开所有的树节点。也可以展开任何给定级别的树节点。$(
'#tree'
).treeview(
'expandAll'
, { levels: 2, silent:
true
});
触发
nodeExpanded
事件,传入silent
来阻止其它事件。expandNode(node | nodeId, options)
:展开指定的树节点,接收节点或节点ID。也可以展开任何给定级别的树节点。$(
'#tree'
).treeview(
'expandNode'
, [ nodeId, { levels: 2, silent:
true
} ]);
触发
nodeExpanded
事件,传入silent
来阻止其它事件。getCollapsed()
:返回折叠节点的数组。例如state.expanded = false
。$(
'#tree'
).treeview(
'getCollapsed'
, nodeId);
getDisabled()
:返回被禁用节点的数组。$(
'#tree'
).treeview(
'getDisabled'
, nodeId);
getEnabled()
:返回可用节点的数组。$(
'#tree'
).treeview(
'getEnabled'
, nodeId);
getExpanded()
:返回所有展开节点的数组。$(
'#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
} ]);
触发
nodeExpanded
事件,传入silent
来阻止其它事件。search(pattern, options)
:搜索匹配是非常的指定树节点,并高亮它们。返回配平节点的数组。$(
'#tree'
).treeview(
'search'
, [
'Parent'
, {
ignoreCase:
true
,
// case insensitive
exactMatch:
false
,
// like or equals
revealResults:
true
,
// reveal matching nodes
}]);
$('##tree'
).treeview('search', [ value,{ ignoreCase: false, exactMatch: false },attr]);
value:值,
attr:需要查询的属性
触发
searchComplete
事件。selectNode(node | nodeId, options)
:选择一个给定的树节点,接收节点或节点ID。$(
'#tree'
).treeview(
'selectNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeSelected
事件,传入silent
来阻止其它事件。toggleNodeChecked(node | nodeId, options)
:切换节点的Check状态。$(
'#tree'
).treeview(
'toggleNodeChecked'
, [ nodeId, { silent:
true
} ]);
触发
nodeChecked
事件或nodeUnchecked
事件,传入silent
来阻止其它事件。toggleNodeDisabled(node | nodeId, options)
:切换一个节点的可用和不可用状态。$(
'#tree'
).treeview(
'toggleNodeDisabled'
, [ nodeId, { silent:
true
} ]);
触发
nodeDisabled
事件或nodeEnabled
事件,传入silent
来阻止其它事件。toggleNodeExpanded(node | nodeId, options)
:切换一个节点的展开和折叠状态。$(
'#tree'
).treeview(
'toggleNodeExpanded'
, [ nodeId, { silent:
true
} ]);
触发
nodeExpanded
事件或nodeCollapsed
事件,传入silent
来阻止其它事件。toggleNodeSelected(node | nodeId, options)
:切换一个节点的选择状态。$(
'#tree'
).treeview(
'toggleNodeSelected'
, [ nodeId, { silent:
true
} ]);
触发
nodeSelected
事件或nodeUnselected
事件,传入silent
来阻止其它事件。uncheckAll(options)
:Uncheck所有的节点。$(
'#tree'
).treeview(
'uncheckAll'
, { silent:
true
});
触发
nodeUnchecked
事件,传入silent
来阻止其它事件。uncheckNode(node | nodeId, options)
:Uncheck一个给定的节点,接收节点或节点ID。$(
'#tree'
).treeview(
'uncheckNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeUnchecked
事件,传入silent
来阻止其它事件。unselectNode(node | nodeId, options)
:不选择指定的节点,接收节点或节点ID。$(
'#tree'
).treeview(
'unselectNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeUnselected
事件,传入silent
来阻止其它事件。
事件
你可以在参数中使用回调函数来绑定任何事件,或者使用标准的jQuery .on()
方法来绑定事件。
在参数中调用的示例:
$( '#tree' ).treeview({ // The naming convention for callback's is to prepend with `on` // and capitalize the first letter of the event name // e.g. nodeSelected -> onNodeSelected onNodeSelected: function (event, data) { // 事件代码... }); |
使用jQuery .on
方法:
$( '#tree' ).on( 'nodeSelected' , function (event, data) { // 事件代码... }); |
可用事件列表
nodeChecked (event, node)
:一个节点被checked。nodeCollapsed (event, node)
:一个节点被折叠。nodeDisabled (event, node)
:一个节点被禁用。nodeEnabled (event, node)
:一个节点被启用。nodeExpanded (event, node)
:一个节点被展开。nodeSelected (event, node)
:一个节点被选择。nodeUnchecked (event, node)
:一个节点被unchecked。nodeUnselected (event, node)
:取消选择一个节点。searchComplete (event, results)
:搜索完成之后触发。searchCleared (event, results)
:搜索结果被清除之后触发。
后台数据传递可用递归(
参数分别为实体对象、结果数组、数据数组
如果使用Map替代实体对象的话,写法可以简洁很多,只需几行代码
方法分为两部分:第一部分为初始化,第二部分开始递归
):
/**
* 获取树
* @方法名:getTreeList
* @参数 @param kpi
* @参数 @return
* @返回类型 String
*/
public String getTreeList(Kpi kpi,List<Map<String, Object>> listmap,List<Kpi> list) { if(listmap == null || list == null ) {
list= super.findList(kpi);
listmap = new ArrayList<Map<String,Object>>();
for(Kpi k: list) {
if(k.getParentId() == null || "".equals(k.getParentId()) || "null".equals(k.getParentId())) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", k.getId().toString());
map.put("text", k.getKpiName());
listmap.add(map);
}
}
getTreeList(kpi,listmap,list); } else if(listmap.size()>0 && list.size()>0) {
for(Map<String, Object> mp:listmap) {
List<Map<String, Object>> childlist = new ArrayList<Map<String,Object>>();
for(Kpi k:list) {
String id = mp.get("id")+"";
String pid = k.getParentId()+"";
if(id.equals(pid)) {
Map<String, Object> m = new HashMap<String, Object>();
m.put("id", k.getId().toString());
m.put("text", k.getKpiName());
childlist.add(m);
}
}
if(childlist.size()>0) {
List<String> sizelist = new ArrayList<String>();
sizelist.add(childlist.size()+"");
mp.put("nodes", childlist);
mp.put("tags", sizelist);
getTreeList(kpi,childlist,list);
}
}
}
return JSONArray.fromObject(listmap).toString();
}
bootstrap-treeview中文API 以及后台JSON数据处理的更多相关文章
- Bootstrap FileInput中文API文档
Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...
- 【转】Bootstrap FileInput中文API整理
Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...
- Bootstrap FileInput中文API整理
这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希 ...
- 初始化bootstrap treeview树节点
最近在做启明星图库时,使用了Jquery Bootstrap Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...
- 【多端应用开发系列1.1.1 —— Android:使用新浪API V2】服务器Json数据处理——Json数据概述
[前白] 一些基础的东西本系列中就不再详述了,争取尽量写些必不可少的技术要点. 由于本系列把Web Service 构建放到了第二部分,Android项目就采用新浪微博API v2作为服务器端. [原 ...
- Bootstrap FileInput 上传 中文 API 整理
Bootstrap FileInput 上传 中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看 会用就行 自己都不知道每个值是干嘛用的就问 ...
- Javescript——API连接 && json数据处理(待续)
原文链接1:How to Connect to an API with JavaScript 原文链接2:How to Use the JavaScript Fetch API to Get JSON ...
- (转)jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- query.validate.js使用说明+中文API
转自:http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html 看到一篇好的文章不容易,记录下来以防丢失! 官网地址:http:/ ...
随机推荐
- Excel2013复制内容粘贴到刷选的数据表中
如何将复制内容粘贴到筛选后表格中: 1.需要一个表格:我要把这个表格里姓名列不包含A的项改为另外一个表中的数据列: 2.在姓名右侧插入两列,列A.列B: 3.在列A下第一格输入1,向下序列填充: 4. ...
- EasyUI汇总
easyui combobox添加清除选项按钮 <input class="easyui-combobox" name="appType" data-op ...
- jquery的html代码中a的onclick的正确显示的代码
jquery的html代码中a的onclick的正确显示的代码 需要转义一下,试了好久才试出来 img_delete.html('<a onclick="deleteImg(\''+s ...
- Pthreads 环境配置,VisualStudio
▶ Visual Studio 下配置MPI环境 ● 下载 Pthreads(http://pthreads.org/),解压. ● 针对 x64 程序的配置 ■ 将 Pre-built.2\incl ...
- 372. Super Pow.txt
▶ 指数取模运算 ab % m ▶ 参考维基 https://en.wikipedia.org/wiki/Modular_exponentiation,给了几种计算方法:暴力计算法,保存中间结果法(分 ...
- c#正则获取html里面a标签href的值
获取单个a中href的值: string str = "<a href=\"http://www.itsve.com\">下载</a>" ...
- 实现socketChannel 通信例子
https://blog.csdn.net/qq_33935895/article/details/79678345
- zookeeper简绍
先一句话概括下zookeeper:zookeeper可谓是目前使用最广泛的分布式组件了.其功能和职责单一,但却非常重要. zookeeper到底是什么?(技术文) 1)zookeeper实际上是yah ...
- tomcat没有发布maven项目依赖的本地jar包
建立springMVC的maven项目,平时使用的jar包都是在pom.xml文件配置依赖关系, maven会自动从仓库中下载,这样使用tomcat部署发布都没有问题.但有时我们需要使用maven仓库 ...
- javascript数组操作(创建、元素删除、数组的拷贝)
这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建 复制代码 代码如下: var arrayObj = ...