bootstrap 中怎么利用treeview动态获取数据

本篇文章为大家展示了bootstrap 中怎么利用treeview动态获取数据，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

1.前端页面引入：

github地址： https://github.com/jonmiles/bootstrap-treeview

demo预览地址：http://jonmiles.github.io/bootstrap-treeview/

2.html页面：

                                父节点：                                                                
                                                                
                                
                        

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")@ResponseBodypublic List getAreaTreeData() {        List 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 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 getNodes() {                return nodes;        }        public void setNodes(List nodes) {                this.nodes = nodes;        }}

上述内容就是bootstrap 中怎么利用treeview动态获取数据，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。