Bootstrap-treeview 树形工具
GitHub https://github.com/oldguys/Bootstrap3Demo
默认Json数据格式
[{
"id": 0,
"text": "名称-0",
"sequence": "sequence-0",
"state": null,
"icon": "glyphicon glyphicon-leaf",
"nodes": [{
"id": 1,
"text": "名称-0-1",
"sequence": "sequence-0-1",
"state": null,
"icon": "glyphicon glyphicon-leaf"
}, {
"id": 2,
"text": "名称-0-2",
"sequence": "sequence-0-2",
"state": null,
"icon": "glyphicon glyphicon-leaf",
"nodes": [{
"id": 1,
"text": "名称-0-2-1",
"sequence": "sequence-0-2-1",
"state": null,
"icon": "glyphicon glyphicon-leaf"
}]
}]
}]
java类
package com.oldguy.example.common.dto;
import com.fasterxml.jackson.annotation.JsonInclude;
import java.util.Collections;
import java.util.List;
/**
* @Description: 树节点
* @Author: ren
* @CreateTime: 2018-10-2018/10/26 0026 14:44
*/
public class BootstrapTreeNode {
private Long id;
private String text;
private String sequence;
private State state;
@JsonInclude(JsonInclude.Include.NON_NULL)
private String icon;
@JsonInclude(JsonInclude.Include.NON_EMPTY)
private List<BootstrapTreeNode> nodes = Collections.emptyList();
public BootstrapTreeNode() {
}
public BootstrapTreeNode(Long id, String text, String sequence, String icon) {
this.id = id;
this.text = text;
this.sequence = sequence;
this.icon = icon;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public State getState() {
return state;
}
public void setState(State state) {
this.state = state;
}
public List<BootstrapTreeNode> getNodes() {
return nodes;
}
public void setNodes(List<BootstrapTreeNode> nodes) {
this.nodes = nodes;
}
public String getSequence() {
return sequence;
}
public void setSequence(String sequence) {
this.sequence = sequence;
}
public static class State {
private Boolean checked = false;
public State(Boolean checked) {
this.checked = checked;
}
public Boolean getChecked() {
return checked;
}
public void setChecked(Boolean checked) {
this.checked = checked;
}
}
}
- 基本模板
https://github.com/oldguys/Bootstrap3Demo/blob/master/src/main/resources/templates/tree/SimpleTree.html
部署URL: http://localhost:8081/view/tree/simple
<div id="menu-info"></div>
<script th:inline="text">
$.get("[[@{/tree/simple}]]", function (data) {
$("#menu-info").treeview({
data: data,// 赋值
highlightSelected: true,// 选中项不高亮，避免和上述制定的颜色变化规则冲突
multiSelect: false,// 不允许多选，因为我们要通过check框来控制
showCheckbox: false,// 展示checkbox
highlightSearchResults: true, // 高亮查询结果
levels: 10 // 展开级别 Default: 2
});
})
</script>
基本模板.png
- checkbox 模板
https://github.com/oldguys/Bootstrap3Demo/blob/master/src/main/resources/templates/tree/CheckTree.html
部署URL: http://localhost:8081/view/tree/check
<div id="record-tree"></div>
<script th:inline="text">
$.get("[[@{/tree/simple}]]", function (data) {
$("#record-tree").treeview({
data: data,// 赋值
highlightSelected: true,// 选中项不高亮，避免和上述制定的颜色变化规则冲突
multiSelect: false,// 不允许多选，因为我们要通过check框来控制
showCheckbox: true,// 展示checkbox
highlightSearchResults: true, // 高亮查询结果
levels: 5, // 展开级别 Default: 2
searchResultBackColor: '#CCC', // 查找背景
// showTags: true,
showIcon: false,
onNodeSelected: function (event, data) {
// 触发选择(取消)checkbox
$("#record-tree").treeview("toggleNodeChecked", data['nodeId']);
},
onNodeUnselected: function (event, data) {
// console.log("onNodeUnselected");
},
onNodeChecked: function (event, data) {
// 级联选取
var parentId = data['parentId'];
if (parentId != undefined) {
$("#record-tree").treeview("checkNode", data['parentId']);
}
},
onNodeUnchecked: function (event, data) {
if (nodes != undefined) {
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var state = node['state'];
if (state != undefined && state['checked']) {
$("#record-tree").treeview("uncheckNode", node['nodeId']);
}
}
}
},
});
})
</script>
check box.png
- 搜索
https://github.com/oldguys/Bootstrap3Demo/blob/master/src/main/resources/templates/tree/SearchTree.html
部署URL: http://localhost:8081/view/tree/search
<!-- 树 -->
<div id="record-tree"></div>
<!-- 搜索框 -->
<input type="text" id="tree-query" class="form-control" placeholder="Search for...">
<script th:inline="text">
$.get("[[@{/tree/simple}]]", function (data) {
var json = JSON.stringify(data, null, 2);
$("#data-panel").html(json).show();
$("#record-tree").treeview({
data: data,// 赋值
highlightSelected: true,// 选中项不高亮，避免和上述制定的颜色变化规则冲突
multiSelect: false,// 不允许多选，因为我们要通过check框来控制
showCheckbox: false,// 展示checkbox
highlightSearchResults: true, // 高亮查询结果
levels: 10, // 展开级别 Default: 2
searchResultBackColor: '#CCC', // 查找背景
showTags: true,
onNodeSelected: function (event, data) {
var json = JSON.stringify(data, null, 2);
$("#data-panel").html(json).show();
}
});
})
$("#tree-query").on("keyup", function () {
var value = $.trim($(this).val());
if (value.length > 0) {
// 先折叠
$('#record-tree').treeview('collapseAll', {silent: true});
// 自动展开结果，返回搜索到的集合
var nodes = $("#record-tree").treeview('clearSearch').treeview('search', [value, {
ignoreCase: true, // 忽略大小写
exactMatch: false, // like or equals
revealResults: true, // reveal matching nodes
}]);
} else {
$('#record-tree').treeview('clearSearch').treeview('expandAll', {silent: true});
}
})
</script>
搜索.png
