1. Categoryvo and Subcategoryvo
CategoryVO
public class CategoryVO {
private Integer id;
private String name;
private String type;
private Integer fatherId;
private List<SubCategoryVO> SubCatList;omitgetand harmonysetmethod.......
}
SubCategoryVO
public class SubCategoryVO {
private Integer subId;
private String SubName;
private String SubType;
private Integer SubFatherId;omitgetand harmonysetmethod......
}
2. Inquiry second classification and sub -classification requires custom SQL, so you have to re -create the CategoryMapperCustom interface and CategoryMapperCustom.xml
CategoryMapperCustom interface
public interface CategoryMapperCustom {
/**
* Query all the second class categories
*/
public List<CategoryVO> getSubCatList(Integer rootCatId);
}
CategoryMapperCustom.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.lzx.mapper.CategoryMapperCustom" >
<resultMap id="myCategoryVO" type="com.lzx.pojo.vo.CategoryVO">
<id column="id" property="id" />
<result column="name" property="name"/>
<result column="type" property="type" />
<result column="fatherId" property="fatherId" />
<!--
collection:Used to define the related List
Property:Corresponding to the three -level classification list attribute name
OFTYPE: The type of collection, the third classificationVO
-->
<collection property="SubCatList" ofType="com.lzx.pojo.vo.SubCategoryVO">
<id column="subId" property="subId" />
<result column="subName" property="subName"/>
<result column="subType" property="subType" />
<result column="subFatherId" property="subFatherId" />
</collection>
</resultMap>
<select id="getSubCatList" resultMap="myCategoryVO" parameterType="int">
SELECT
f.`id` AS id,
f.`name` AS `name`,
f.`type` AS TYPE,
f.`father_id` AS fatherId,
c.`id` AS subId,
c.`name` AS `subName`,
c.`type` AS subType,
c.`father_id` AS subFatherId
FROM
category f
LEFT JOIN
category c
ON
f.id = c.father_id
WHERE
f.father_id = #{
rootCatId}
</select>
</mapper>
3. Query first class category and sub -category catalog
CategoryService
public interface CategoryService {
/**
* Query first classification
* @param
* @Return
*/
public List<Category> queryAllRootLevel();
/**
* Query all secondary categories and sub -categories
* @param rootcatid
* @Return
*/
public List<CategoryVO> getSubCatlist(Integer rootCatId);
}
CategoryServiceImpl
@Service
public class CategoryServiceImpl implements CategoryService {
@Autowired
private CategoryMapper categoryMapper;
@Autowired
private CategoryMapperCustom categoryMapperCustom;
@Transactional(propagation = Propagation.SUPPORTS)
@Override
public List<Category> queryAllRootLevel() {
Example example = new Example(Category.class);
Example.Criteria criteria = example.createCriteria();
criteria.andEqualTo("type",1);
List<Category> result = categoryMapper.selectByExample(example);
return result;
}
@Transactional(propagation = Propagation.SUPPORTS)
@Override
public List<CategoryVO> getSubCatlist(Integer rootCatId) {
return categoryMapperCustom.getSubCatList(rootCatId);
}
}
front end(Partial code)
renderCategorys() {
var serverUrl = app.serverUrl;
// Obtain product classification -large classification
axios.get(
serverUrl + '/index/cats', {
})
.then(res => {
if (res.data.status == 200) {
var categoryList = res.data.data
this.categoryList = categoryList;
var rootCatHtml = "";
for (var i = 0; i < categoryList.length; i++) {
var cat = categoryList[i];
rootCatHtml += '' +
'<li class="appliance js_toggle relative">' +
'<div class="category-info">' +
'<h3 class="category-name b-category-name">' +
'<i><img src="' + cat.logo + '"></i>' +
'<a class="ml-22" title="' + cat.name + '">' + cat.name + '</a>' +
'</h3>' +
'<em>></em></div>' +
'<div class="menu-item menu-in top">' +
'<div class="area-in">' +
'<div class="area-bg">' +
'<div class="menu-srot">' +
'<div class="sort-side" rootCatId="' + cat.id + '"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<b class="arrow"></b>' +
'</li>';
}
var $leftNav = $('#js_climit_li');
$leftNav.html(rootCatHtml);
$("li").hover(function () {
// debugger;
$(".category-content .category-list li.first .menu-in").css("display",
"none");
$(".category-content .category-list li.first").removeClass("hover");
var meLi = $(this);
var subWapper = $(this).children("div.menu-in").children("div.area-in")
.children("div.area-bg").children("div.menu-srot").children(
"div.sort-side");
// console.log(subWapper.html());
var subCatHtml = subWapper.html();
var rootCatId = subWapper.attr("rootCatId");
// console.log(rootCatId);
// If there is no content under the node, initiate a request query subclass and rendered it to the page.
if (subCatHtml == null || subCatHtml == '' || subCatHtml == undefined) {
if (rootCatId != undefined && rootCatId != null && rootCatId != '') {
// Query all sub -classification under this classification according to the root classification ID
axios.get(
serverUrl + '/index/subCat/' + rootCatId, {
})
.then(res => {
if (res.data.status == 200) {
var catList = res.data.data
// this.catList = catList;
// debugger;
var subRenderHtml = '';
for (var i = 0; i < catList.length; i++) {
var cat = catList[i];
subRenderHtml += '' +
'<dl class="dl-sort">' +
'<dt><span title="' + cat.name + '">' +
cat.name + '</span></dt>';
// Stitching third classification
var subCatList = cat.subCatList;
for (var j = 0; j < subCatList.length; j++) {
var subCat = subCatList[j];
subRenderHtml += '<dd><a title="' + subCat
.subName + '" href="catItems.html?searchType=catItems&catId='+ subCat.subId +'" target="_blank"><span>' +
subCat.subName + '</span></a></dd>'
}
subRenderHtml += '</dl>';
}
subWapper.html(subRenderHtml);
meLi.addClass("hover");
meLi.children("div.menu-in").css("display",
"block");
}
});
}
// var renderHtml = ''
// + '<dl class="dl-sort">'
// + '<dt> <span title = "Big Packaging"> Big Packaging </span> </dt>'
// + '<dd> <a title=" steamed cake" href="#"> <span> steamed cake </span> </a> </dd>'
// + '<dd> <a title="hydrical cake" href="#"> <span> Dehydration cake </span> </a> </dd>'
// + '<dd> <a title=" Swiss volume" href="#"> <span> Swiss volume </span> </a> </dd>'
// + '<dd> <a title=" soft bread" href="#"> <span> soft bread </span> </a> </dd>'
// + '<dd> <a title=" macaron" href="#"> <span> Macaron </span> </a> </dd>'
// + '<dd> <a title=",000 cake" href="#"> <span> Thousand Layers Cakes </span> </a> </dd>'
// + '<dd> <a title=" donut" href="#"> <span> Glose </span> </a> </dd>'
// + '<dd> <a title=" steamed Sanmingzhi" href="#"> <span> Steamed sandwich </span> </a> </dd>'
// + '<dd> <a title="Href="#"> <span> Causeway </span> </a> </dd>'
// + '</dl>'
// + '<dl class="dl-sort">'
// + '<dt> <span title = "two -piece set"> Two -piece set </span> </dt>'
// + '<dd> <a title=" steamed cake" href="#"> <span> steamed cake </span> </a> </dd>'
// + '<dd> <a title="hydrical cake" href="#"> <span> Dehydration cake </span> </a> </dd>'
// + '<dd> <a title=" HREF="#"> <span> Swiss Volume </span> </a> </dd>'
// + '<dd> <a title=" soft bread" href="#"> <span> soft bread </span> </a> </dd>'
// + '<dd> <a title=" macaron" href="#"> <span> Macaron </span> </a> </dd>'
// + '<dd> <a title=",000 cake" href="#"> <span> Thousand Layers Cakes </span> </a> </dd>'
// + '<dd> <a title=" donut" href="#"> <span> Glose </span> </a> </dd>'
// + '<dd> <a title=" steamed Sanmingzhi" href="#"> <span> Steamed sandwich </span> </a> </dd>'
// + '<dd> <a title=" 铜 4" href="#"> <span> Causeway </span> </a> </dd>'
// + '</dl>';
// $(this)
// .children("div.menu-in")
// .children("div.area-in")
// .children("div.area-bg")
// .children("div.menu-srot")
// .children("div.sort-side")
// .html(renderHtml);
} else {
$(this).addClass("hover");
$(this).children("div.menu-in").css("display", "block");
}
// $(this).addClass("hover");
// $(this).children("div.menu-in").css("display", "block")
}, function () {
$(this).removeClass("hover")
$(this).children("div.menu-in").css("display", "none")
});
this.renderSixNewItems();
}
});
},