189 8069 5689

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")
@ResponseBody
public 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动态获取数据，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


文章名称：bootstrap中怎么利用treeview动态获取数据
转载来源：http://cdxtjz.cn/article/pespgj.html

其他资讯