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动态获取数据
网站URL:http://hbruida.cn/article/pespgj.html

其他资讯