对于使用js+html+ssm创建树形菜单的记录
通过创建树形菜单对js和Java的使用进一步加深自己对其知识和基本用法的理解。
树形菜单的逻辑过程(个人想法)
- 使用mybatis对数据库表进行sql操作,取出所需数据;
- 在service的实现类中编写List转树形结构的实现函数;
- 在JS中编写对树形结构数据的遍历函数,使数据可以在页面进行对树形菜单的查询操作。
mybatis取数据的实现
这是数据库表所需的两项数据
因为只要取出无重复的下一级数据就可以得到全部的上一级数据,所以使用group by进行筛选。
<select id="selectCategory" resultType="map">
select good_category,good_category_parent from good group by good_category
</select>
service实现类中对数据的结构转换的函数
首先是将取出的数据中的所有最上级菜单数据取出的函数
public ArrayList<Map< String, Object>> findParent(ArrayList<Map<String, Object>> arrayList) {
ArrayList<Map<String,Object>> treeList = new ArrayList<>();
ArrayList<String> list = new ArrayList<>();
for (Map<String,Object> parentMap : arrayList){
Map<String,Object> treeMap = new HashMap<>();
String good_category_parent = "";
int num=0;
/*。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。*/
//对于数据中在上级数据项中存在的非最上级数据进行筛选
if(parentMap.get("good_category_parent") != null){
for(Map<String,Object> firstMap : arrayList){
if(firstMap.get("good_category").toString().contains(parentMap.get("good_category_parent").toString())){
num += 1; break; }
}
if(num != 0) { continue; }
else { good_category_parent = parentMap.get("good_category_parent").toString(); }
/*。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。*/
}else { good_category_parent = parentMap.get("good_category").toString(); }
System.out.println(list.contains(good_category_parent));
/*。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。*/
//对筛选出的数据进行去重操作
if(!list.contains(good_category_parent)) {
list.add(good_category_parent);
treeMap.put("good_category_parent", good_category_parent);
//在此处使用递归函数findchildren查找所有的下级数据建立树形结构
treeMap.put("children", findChildren(arrayList, good_category_parent));
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
}else {continue;}
treeList.add(treeMap);
/*。。。。。。。。。。。。。。。。。。。。。。。。。。。.。。。。。。。。。。。。。。。。。*/
System.out.println(treeList);
}
return treeList;
}
下面为findchildren函数的具体实现内容
public ArrayList<Map< String, Object>> findChildren(ArrayList<Map<String, Object>> arrayList,String good_category_parent) {
ArrayList<Map<String,Object>> childList = new ArrayList<>();
for (Map<String,Object> map : arrayList){
Map<String,Object> childMap = new HashMap<>();
if(map.get("good_category_parent") != null) {
if (good_category_parent.equals(map.get("good_category_parent").toString())) {
if (map.get("good_category") != null) {
childMap.put("good_category_parent", map.get("good_category").toString());
childMap.put("children", findChildren(arrayList, map.get("good_category").toString()));
}else {continue;}
}else {continue;}
}else {continue;}
childList.add(childMap);
}
return childList;
}
JS中对树形结构数据在页面显示的函数编写
在这里使用了Jquery插件通过Ajax从后台获取数据,并通过onclick点击触发函数在页面显示最上级菜单
function selectCategory() {
$.ajax({
url:'/MenuOperate/SelectGoodsCategory',
dataType:'json',
type:'POST',
success:function (data) {
console.log(data);
let html = '';
for (let i = 0; i < data.length; i++) {
console.log(data[i].good_category_parent);
const treeChildren = JSON.stringify(data[i].children).replace(/"/g, " ");
console.log(treeChildren);
//在拼写字符串时如果想要实现函数中数组作为形参传递数据,需要先转换成字符串
html += '<li><a onclick="selectByCategory(\'' + data[i].good_category_parent + '\',\'' + treeChildren + '\')">'
+ data[i].good_category_parent + '</a></li>' +
'<li><ul id="' + data[i].good_category_parent + '"></ul></li>';
}
const hidden = '<li><a onclick="hideContent(\'' + "firstCategory" + '\')">^^^</a></li>';
const content = html + hidden;
$("#firstCategory").html(content);
}
});
}
下面是触发点击事件实现循环遍历下级菜单的递归函数
function selectByCategory(good_category_parent,children) {
children=children.replace(/ /g,'"');
console.log(children);
const childrenList = JSON.parse(children);
console.log(childrenList);
if (childrenList.length !== 0) {
let html = '';
for (let i = 0; i < childrenList.length; i++) {
let children=JSON.stringify(childrenList[i].children).replace(/"/g," ");
html += '<li><a onclick="selectByCategory(\'' + childrenList[i].good_category_parent + '\',\'' +
children + '\')">'
+ childrenList[i].good_category_parent + '</a></li>' +
'<li><ul id="' + childrenList[i].good_category_parent + '"></ul></li>';
}
const hidden = '<li><a onclick="hideContent(\'' + good_category_parent + '\')">^^^</a></li>';
const content = html + hidden;
$("#"+good_category_parent).html(content);
} else {
alert("无下级分类");
}
对展开菜单的隐藏功能的实现
function hideContent(idefine){
const html = '';
$("#"+idefine).html(html);
}
html页面代码以及实现效果截图(页面未优化)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形菜单</title>
<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/js/tree.js"></script>
</head>
<body>
<ul><li><a onclick="selectCategory()">商品分类</a></li>
<li><ul id="firstCategory"></ul></li>
</ul>
<div></div>
</body>
</html>
实现效果截图