本博客，介紹通過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;
/**
*
* <pre>
* 分組定義模型
* </pre>
*
* @author nicky
* <pre>
* 修改記錄
* 修改后版本: 修改人： 修改日期: 2018年11月7日 修改內容:
* </pre>
*/
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;
/**
*
* <pre>
* 構建一棵分組樹
* </pre>
*
* @author nicky
* <pre>
* 修改記錄
* 修改后版本: 修改人： 修改日期: 2018年11月7日 修改內容:
* </pre>
*/
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);
}
});
實現樹形菜單：
