本博客，介绍通过Bootstrap的treeview插件实现菜单树的功能。
treeview链接：http://www.htmleaf.com/Demo/201502141380.html
ORM框架是Mybatis的，这里其实就是单表查询而已，获取要做菜单树的信息表，这张表必须要有一个parentSeq，然后通过关联实现。
<sql id="groupDefineColum">
gr.seq,
gr.group_name,
gr.group_desc,
gr.group_type,
gr.parent_seq,
case when (select count(1)
from t_group_define
where parent_seq = gr.seq)> 0 then 'true' else 'false'
end as subFlag
</sql>
<!-- 获取信息->
<select id="listGroupDefineInfo" resultType="GroupDefineModel">
select <include refid="groupDefineColum"></include>
from t_group_define gr
</select>Model类：
package com.group.model; /** * ** 分组定义模型 **
* @author nicky
** 修改记录 * 修改后版本: 修改人： 修改日期: 2018年11月7日 修改内容: **/
public class GroupDefineModel implements Serializable{private static final long serialVersionUID = 1L;
private String seq;//UUID主键
private String uuid;//uuid
private String groupName;//分组名称
private String groupDesc;//分组描述
private Long groupType;//分组的类型（暂时只对true_false表进行分组，1：truefalse表）
private String parentSeq;//父分组主键
private String href;//链接,格式为：#href
private String subFlag;//判断一个树是否有子级节点
private String state;//树表格是否展开属性
private List<GroupDefineModel> subGroup;//子级分组列表
public String getSeq() {
return seq;
}public void setSeq(String seq) {
this.seq = seq;
}public String getUuid() {
return uuid;
}public void setUuid(String uuid) {
this.uuid = uuid;
}public String getGroupName() {
return groupName;
}public void setGroupName(String groupName) {
this.groupName = groupName;
}public String getGroupDesc() {
return groupDesc;
}public void setGroupDesc(String groupDesc) {
this.groupDesc = groupDesc;
}public Long getGroupType() {
return groupType;
}public void setGroupType(Long groupType) {
this.groupType = groupType;
}public String getParentSeq() {
return parentSeq;
}public void setParentSeq(String parentSeq) {
this.parentSeq = parentSeq;
}public String getHref() {
return href;
}public void setHref(String href) {
this.href = href;
}public String getSubFlag() {
return subFlag;
}public void setSubFlag(String subFlag) {
this.subFlag = subFlag;
}public String getState() {
return state;
}public void setState(String state) {
this.state = state;
}public List<GroupDefineModel> getSubGroup() {
return subGroup;
}public void setSubGroup(List<GroupDefineModel> subGroup) {
this.subGroup = subGroup;
}}
然后通过我封装的工具类构建数据
package com.group.util; import java.util.ArrayList; import java.util.List; import org.apache.commons.lang3.StringUtils; /** * ** 构建一棵分组树 **
* @author nicky
** 修改记录 * 修改后版本: 修改人： 修改日期: 2018年11月7日 修改内容: **/
public class GroupTreeUtils {
public List<GroupDefineModel> groups;public List<GroupDefineModel> list = new ArrayList<GroupDefineModel>();
/**
* buildGroupTree：(构建分组树)
* @author nicky
* @date 2018年11月7日下午4:34:00
* @return
*/
public List<GroupDefineModel> buildGroupTree(List<GroupDefineModel> groups) {
this.groups = groups;
for (GroupDefineModel gr : groups){
if("0".equals(gr.getParentSeq())) {//根级目录
GroupDefineModel group = new GroupDefineModel();
group.setSeq(gr.getSeq());
group.setParentSeq(gr.getParentSeq());
group.setGroupName(gr.getGroupName());
group.setGroupDesc(gr.getGroupDesc());
group.setGroupType(gr.getGroupType());
group.setHref("#"+gr.getSeq());
group.setSubGroup(treeChild(gr.getSeq()));
list.add(group);
}
}
return list;
}/**
* treeChild:(递归遍历子级分组)
* @author nicky
* @date 2018年11月7日下午4:33:47
* @return
*/
public List<GroupDefineModel> treeChild(String seq){
List<GroupDefineModel> list = new ArrayList<GroupDefineModel>();
for(GroupDefineModel gr : groups){
GroupDefineModel group = new GroupDefineModel();
if(seq.equals(gr.getParentSeq())){
group.setSeq(gr.getSeq());
group.setParentSeq(gr.getParentSeq());
group.setGroupName(gr.getGroupName());
group.setGroupDesc(gr.getGroupDesc());
group.setGroupType(gr.getGroupType());
group.setHref("#"+gr.getSeq());
group.setSubGroup(treeChild(gr.getSeq()));//递归循环
list.add(group);
}
}
return list;
}}
控制类调用：
@RequestMapping("/toGroupPage") public ModelAndView toGroupPage(HttpServletRequest request,TrueFalseModel t){ ModelAndView model = new ModelAndView(); try { logger.info("跳转到页面"); // 分组树构建 List<GroupDefineModel> groupDefineList = groupDefineService.listGroupDefineInfo(); GroupTreeUtils treeUtil = new GroupTreeUtils(); groupDefineList = treeUtil.buildGroupTree(groupDefineList); String groupTreeJson = JSON.toJSONString(groupDefineList); groupTreeJson = groupTreeJson.replace("groupName", "text"); groupTreeJson = groupTreeJson.replace("subGroup", "nodes"); logger.info("分组树信息："+groupTreeJson); model.addObject("groupTreeJson", groupTreeJson); model.setViewName("group/groupList"); } catch (Exception e) { logger.error("t跳转到页面出错！", e); } return model; }返回的json数据
[ { "groupDesc":"移动门户描述", "text":"移动门户", "groupType":1, "href":"#7CF98E8FE9870991E0530100007F9288", "parentSeq":"0", "seq":"7CF98E8FE9870991E0530100007F9288", "nodes":[ { "groupDesc":"文章收藏描述", "text":"文章收藏", "groupType":1, "href":"#7CF98E8FE9880991E0530100007F9288", "parentSeq":"7CF98E8FE9870991E0530100007F9288", "seq":"7CF98E8FE9880991E0530100007F9288", "nodes":[ ] } ] }, { "groupDesc":"测试", "text":"网上申办", "groupType":1, "href":"#7CF946FFABE8083FE0530100007FF726", "parentSeq":"0", "seq":"7CF946FFABE8083FE0530100007FF726", "nodes":[ ] } ]前端调用：
<link rel="stylesheet" href="${resource}/bootstrap/bootstrap.min.css" /> <script type="text/javascript" src="${resource}/treeview/bootstrap-treeview.js"></script><div id="groupTree" class="group_tree" > <div class="div_group" id="div_group"></div> </div>js：
/* 分组树事件绑定 */ var groupTreeData = '${groupTreeJson}'; $('#div_group').treeview({ color : "#428bca", enableLinks: true, data : groupTreeData, onNodeSelected : function(event, node) { document.getElementById(node.seq).scrollIntoView(); }, onNodeUnselected:function (event, node) { // var anh = $('#top').offset().top; // debugger // $("#content").stop().animate({scrollTop:anh},400); } });实现树形菜单：
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/17047.html
