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

本篇文章为大家展示了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动态获取数据，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。