bootstrap treeview 菜单树 最详细
实体类
@Data
public class BootTree {
private Integer id;
private String text;
private Integer pid;
private Boolean selectable;
private List nodes;
private String href;
}
controller 层
@RequestMapping(“getBootTree”)
@ResponseBody
public List getBootTree(){
List treelist = orderService.getBootTree();
return treelist;
}
service 接口
List getBootTree();
service 实现类
@Override
public List getBootTree() {
int pid = -1;
List bootTrees = getBootTreeNodes(pid);
return bootTrees;
}
private List<BootTree> getBootTreeNodes(Integer pid) {
List<BootTree> bootTrees = orderMapper.getBootTreeNodes(pid);
for (BootTree bootTreeBean : bootTrees) {
Integer id2 = bootTreeBean.getId();
List<BootTree> bootTreeNode = getBootTreeNodes(id2);
if (bootTreeNode == null || bootTreeNode.size() <= 0) {
bootTreeBean.setSelectable(true);
}else {
bootTreeBean.setSelectable(false);
bootTreeBean.setNodes(bootTreeNode);
}
}
return bootTrees;
}
mapper 层
@Select(“select * from springboot.t_tree where pid = #{pid}”)
List getBootTreeNodes(int pid);
前台 页面
$(function(){
initMyTree();
})
function initMyTree(){
$.ajax({
url:’…/order/getBootTree’,
type:‘post’,
data:{},
dataType:‘json’,
success:function(result){
$(’#myTree’).treeview({
data:result,
onNodeSelected:function(event,node){
$.addtabs({iframeHeight: 650});
$.addtabs.add({
id:node.id,
title:node.text,
url:node.href
});
}
})
}
})
}
上一篇: Optional
推荐阅读
-
bootstrap treeview 树形菜单带复选框及级联选择功能
-
treeview bootstrap 多级下拉树
-
bootstrap ace treeview树的使用 --ASP.NET
-
jsp+bootstrap-treeview树形下拉菜单
-
bootstrap3 treeview组件实现多级菜单
-
bootstrap-treeview后端数据树展现
-
bootstrap-treeview 树列表 总结整理
-
在vuejs中如何实现递归树型菜单组件(详细教程)
-
bootstrap treeview 树形菜单带复选框及级联选择功能
-
Bootstrap树形菜单插件TreeView.js使用方法详解