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動態獲取數據，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。