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 ListgetAreaTreeData() { 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 Listnodes; 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