本篇文章为大家展示了bootstrap 中怎么利用treeview动态获取数据，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
1.前端页面引入：
计算
安全
数据库
网络和加速
企业服务
<script th:src="@{/ajax/libs/treeview/js/bootstrap-treeview.js}"></script>github地址： https://github.com/jonmiles/bootstrap-treeview
demo预览地址：http://jonmiles.github.io/bootstrap-treeview/
2.html页面：
<div class="form-group">
<label class="col-sm-3 control-label ">父节点：</label>
<input id="parentAreaCode" name="parentAreaCode" class="form-control" type="hidden">
<div class="col-sm-8">
<input id="parentAreaName" name="parentAreaName" type="text" class="form-control" onclick="$('#treeviews').show()">
<div id="treeviews" ></div>
</div>
</div>JS代码:
$.ajax({
type: "GET",
url: prefix+ "/getAreaTreeData",
cache: false,
contentType: false,
processData: false,
success: function(result) {
if(result!=null && result!=""){
$("#parentAreaName").click(function() {
var options = {
levels: 0,
data : result,
onNodeSelected : function(event, data) {
$("#parentAreaCode").val(data.id);
$("#parentAreaName").val(data.text);
$("#treeviews").hide();
}
};
$('#treeviews').treeview(options);
});
}
},
error: function(error) {
$.modal.alertWarning("获取数据失败");
}
})
$("#parentAreaName").blur(function(){
setTimeout(function(){
$("#treeviews").hide();
},300
);
});后台代码：
@GetMapping("/getAreaTreeData")
@ResponseBody
public List<TreeView> getAreaTreeData() {
List<TreeView> treeViewList = deviceAreaService.getAreaTreeData();
return treeViewList;
}主要两个实体类，拼接数据，当然还可以根据需要添加额外的属性具体参考官网的属性进行添加：
State类（主要是一些状态的控制）：
public class State {
private boolean expanded;
private boolean selected;
public boolean isExpanded() {
return expanded;
}
public void setExpanded(boolean expanded) {
this.expanded = expanded;
}
public boolean isSelected() {
return selected;
}
public void setSelected(boolean selected) {
this.selected = selected;
}
}TreeView类：
import java.util.List;
public class TreeView implements java.io.Serializable{
private String id;
private String text;
private List<TreeView> nodes;
private State state;
public String getId() {
return id;
}
public void setId(String 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<TreeView> getNodes() {
return nodes;
}
public void setNodes(List<TreeView> nodes) {
this.nodes = nodes;
}
}上述内容就是bootstrap 中怎么利用treeview动态获取数据，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/houzp/blog/3082566
