实现三级菜单联动综合代码
实现点击一级菜单弹出二级菜单，选择二级菜单弹出三级菜单的功能
1、html代码
<div class="selectedSort"><b>您当前选择的商品类别是：</b><i id="selectedSort"></i></div> <div class="wareSort clearfix"> <ul id="sort1"></ul> <ul id="sort2" style="display: none;"></ul> <ul id="sort3" style="display: none;"></ul> </div>
2、css代码
/*选择商品分类标题*/
.selectedSort {
padding: 5px 15px;
border: 1px solid #DDDDDD;
background-color: #FFFFFF;
color: #666666;
overflow: hidden;
}
.selectedSort b {
font-weight: bold;
}
.selectedSort i font {
font-family: simsun;
}
/*列表*/
.wareSort {
border: 1px solid #ddd;
position: relative;
padding-left: 10px;
padding-top: 10px;
background-color: #f6f6f6;
}
.wareSort ul {
list-style-type:none;
float: left;
border: 1px solid #ddd;
width: 200px;
max-height: 225px;
overflow: auto;
padding: 10px;
margin-right: 10px;
box-sizing: border-box;
background-color: #fff;
}
.wareSort ul li a {
display: block;
padding: 0 10px;
border: 1px solid #fff;
line-height: 28px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
}
.wareSort ul li.active a {
background-color: #C5DFED;
}
3、js代码
(function($){
var addShopType = function () {
// 商品分类
var expressP, expressC, expressD, areaCont; //类名
var province = ""; //一级分类list
var city = ""; //二级分类list
var district = ""; //三级分类list
var flag = false; //目录选择的判断条件
return {
/**
* 默认参数
*/
defaultOption : {
gc_id : '', //分类id
type_id : '', //类型id
},
/**
* 初始化
*/
init : function () {
//初始化规格选项
addShopType.initSpec();
},
/**
* 初始化分类数据
*/
initClassData: function(){
commonAjax.ajaxSubmit("shop/shopType/getGoodClass.do",'POST', null, function(result){
if(result.success){
var data = result.resData;
data=JSON.parse(data);
province = data.one;
city = data.two;
district = data.three;
/*初始化一级目录*/
areaCont = "";
for (var i=0; i<province.length; i++) {
areaCont += '<li onClick="addShopType.selectP('+i+ ',' + province[i].gc_id+ ',' + province[i].type_id+');"><a href="javascript:void(0)">' + province[i].gc_name + '</a></li>';
}
$("#sort1").html(areaCont);
}else{
layer.msg('系统错误，请联系管理员！');
}
});
},
/*选择一级目录*/
selectP:function(p,id,type_id) {
areaCont = "";
for (var j=0; j<city[p].length; j++) {
areaCont += '<li onClick="addShopType.selectC(' + p + ',' + j + ','+city[p][j].gc_id+',' + city[p][j].type_id+');"><a href="javascript:void(0)">' + city[p][j].gc_name + '</a></li>';
}
if(areaCont.length > 0){
$("#sort2").html(areaCont).show();
flag = false;
}else{
$("#sort2").hide();
addShopType.defaultOption.gc_id = id;
addShopType.defaultOption.type_id = type_id;
flag = true;
}
$("#sort3").hide();
$("#sort1 li").eq(p).addClass("active").siblings("li").removeClass("active");
expressP = province[p].gc_name;
$("#selectedSort").html(expressP);
$("#releaseBtn").removeAttr("disabled");
},
/*选择二级目录*/
selectC:function (p,c,id,type_id) {
areaCont = "";
expressC = "";
for (var k=0; k<district[p][c].length; k++) {
areaCont += '<li onClick="addShopType.selectD(' + p + ',' + c + ',' + k +',' + district[p][c][k].gc_id +',' + district[p][c][k].type_id+ ');"><a href="javascript:void(0)">' + district[p][c][k].gc_name + '</a></li>';
}
if(areaCont.length > 0){
$("#sort3").html(areaCont).show();
flag = false;
}else{
$("#sort3").hide();
addShopType.defaultOption.gc_id = id;
addShopType.defaultOption.type_id = type_id;
flag = true;
}
$("#sort2 li").eq(c).addClass("active").siblings("li").removeClass("active");
expressC = expressP + "/" + city[p][c].gc_name;
$("#selectedSort").html(expressC);
},
/*选择三级目录*/
selectD:function(p,c,d,id,type_id) {
$("#sort3 li").eq(d).addClass("active").siblings("li").removeClass("active");
expressD = expressC + "/" + district[p][c][d].gc_name;
$("#selectedSort").html(expressD);
if(expressD.length > 0){
flag = true;
addShopType.defaultOption.gc_id = id;
addShopType.defaultOption.type_id = type_id;
}else{
flag = false;
}
},
}
}();
window.addShopType = addShopType;
})(jQuery);
4、java代码
mybatis
@Override
public ResultVO getGoodClass() throws Exception {
log.info(GlobalContract.LOG_BEGIN);
ResultVO resultVO = null;
JSONObject json = new JSONObject();
Map<String, String> map = new HashMap<String, String>();
map.put("type", "1");
List<ShopGoodClassRVO> list = shopConfigDao.getGoodClass(map);
int listSize = list.size();
int listSize2 = 0;
int listSize3 = 0;
if(listSize > 0){
List<ShopGoodClassRVO> list3 = null;
StringBuffer oneIds = new StringBuffer();
for (int i = 0; i < listSize; i++) {
oneIds.append(",").append(list.get(i).getGc_id());
}
map.remove("type");
map.put("gc_parent_id", oneIds.toString().replaceFirst(",", ""));
// 获取第二级
List<ShopGoodClassRVO> list2 = shopConfigDao.getGoodClass(map);
listSize2 = list2.size();
if(listSize2 > 0){
StringBuffer twoIds = new StringBuffer();
for (int i = 0; i < listSize2; i++) {
twoIds.append(",").append(list2.get(i).getGc_id());
}
map.put("gc_parent_id", twoIds.toString().replaceFirst(",", ""));
// 获取第三级
list3 = shopConfigDao.getGoodClass(map);
listSize3 = list3.size();
}
List<ShopGoodClassRVO> one = new ArrayList<ShopGoodClassRVO>();
List<ShopGoodClassRVO> two1 = null;
List<List<ShopGoodClassRVO>> two = new ArrayList<List<ShopGoodClassRVO>>();
List<ShopGoodClassRVO> three2 = null;
List<List<ShopGoodClassRVO>> three1 = null;
List<List<List<ShopGoodClassRVO>>> three = new ArrayList<List<List<ShopGoodClassRVO>>>();
// 一级
for (int i = 0; i < listSize; i++) {
one.add(list.get(i));
two1 = new ArrayList<ShopGoodClassRVO>();
three1 = new ArrayList<List<ShopGoodClassRVO>>();
// 二级
for (int j = 0; j < listSize2; j++) {
three2 = new ArrayList<ShopGoodClassRVO>();
if(list.get(i).getGc_id().equals(list2.get(j).getGc_parent_id())){
two1.add(list2.get(j));
// 三级
for (int k = 0; k < listSize3; k++) {
if(list3.get(k).getGc_parent_id().equals(list2.get(j).getGc_id())
&& list2.get(j).getGc_parent_id().equals(list.get(i).getGc_id())){
three2.add(list3.get(k));
}
}
three1.add(three2);
}
}
two.add(two1);
three.add(three1);
}
json.put("one", one);
json.put("two", two);
json.put("three", three);
}
resultVO = new ResultVO();
resultVO.setResData(json);
log.info(GlobalContract.LOG_END);
return resultVO;
}
ibatis
@Override
public ResultVO getGoodClass() throws Exception {
log.info(GlobalContract.LOG_BEGIN);
ResultVO resultVO = null;
JSONObject json = new JSONObject();
Map<String, Object> map = new HashMap<String, Object>();
//用来查询主菜单
map.put("type", "1");
List<ShopGoodClassRVO> list = shopTypeDao.getGoodClass(map);
//主类型集合长度
int listSize = list.size();
//二级类型集合长度
int listSize2 = 0;
//三级类型集合长度
int listSize3 = 0;
if(listSize > 0){
List<ShopGoodClassRVO> list3 = null;
map.remove("type");
map.put("gc_parent_id", list);
// 获取第二级类型
List<ShopGoodClassRVO> list2 = shopTypeDao.getGoodClass(map);
listSize2 = list2.size();
if(listSize2 > 0){
//获取三级类型
map.put("gc_parent_id", list2);
list3 = shopTypeDao.getGoodClass(map);
listSize3 = list3.size();
}
//定义需要返回的一级商品类型集合
List<ShopGoodClassRVO> one = new ArrayList<ShopGoodClassRVO>();
//定义需要返回的二级商品类型集合
List<List<ShopGoodClassRVO>> two = new ArrayList<List<ShopGoodClassRVO>>();
List<ShopGoodClassRVO> two1 = null;
//定义需要返回的三级商品类型集合
List<List<List<ShopGoodClassRVO>>> three = new ArrayList<List<List<ShopGoodClassRVO>>>();
List<List<ShopGoodClassRVO>> three1 = null;
List<ShopGoodClassRVO> three2 = null;
// 一级
for (int i = 0; i < listSize; i++) {
one.add(list.get(i));
two1 = new ArrayList<ShopGoodClassRVO>();
three1 = new ArrayList<List<ShopGoodClassRVO>>();
// 二级
for (int j = 0; j < listSize2; j++) {
three2 = new ArrayList<ShopGoodClassRVO>();
if(list.get(i).getGc_id().equals(list2.get(j).getGc_parent_id())){
two1.add(list2.get(j));
// 三级
for (int k = 0; k < listSize3; k++) {
if(list3.get(k).getGc_parent_id().equals(list2.get(j).getGc_id())
&& list2.get(j).getGc_parent_id().equals(list.get(i).getGc_id())){
three2.add(list3.get(k));
}
}
three1.add(three2);
}
}
two.add(two1);
three.add(three1);
}
//存入json
json.put("one", one);
json.put("two", two);
json.put("three", three);
}
resultVO = new ResultVO();
resultVO.setResData(json.toString());
log.info(GlobalContract.LOG_END);
return resultVO;
}
5、sql语句
mybatis
<!-- 获取商品分类 -->
<select id="getGoodClass" resultMap="shopGoodClassRVO">
select t.gc_id,
t.gc_name,
t.type_id,
t.type_name,
t.store_id,
t.gc_parent_id,
t.gc_sort,
t.gc_show,
t.gc_keyword,
t.creatorid,
t.createdate,
t.updateid,
t.updatedate,
t.delflag
from T_SHOP_GOODS_CLASS t
where t.delflag = '0'
<if test="type == '1'.toString()">
AND t.gc_parent_id is null
</if>
<if test="gc_parent_id != null and gc_parent_id != ''">
AND t.gc_parent_id in (${gc_parent_id})
</if>
order by t.gc_sort,t.gc_id
</select>
ibatis
<!-- 获取商品分类 -->
<select id="getGoodClass" parameterClass="java.util.Map" resultClass="shopGoodClassRVO">
<![CDATA[
select t.gc_id,
t.gc_name,
t.type_id,
t.type_name,
t.store_id,
t.gc_parent_id,
t.gc_sort,
t.gc_show,
t.gc_keyword,
t.creatorid,
t.createdate,
t.updateid,
t.updatedate,
t.delflag
from T_SHOP_GOODS_CLASS t
where t.delflag = '0'
]]>
<dynamic>
<isEqual property="type" compareValue="1" prepend="and">
t.gc_parent_id is null
</isEqual>
<isNotEmpty prepend="and" property="gc_parent_id">
t.gc_parent_id in
<iterate property="gc_parent_id" open="(" conjunction="," close=")">
<!--每一个NameSpace实例的name属性通过namespaces[].name获取-->
#gc_parent_id[].gc_id#
</iterate>
</isNotEmpty>
</dynamic>
<![CDATA[
order by t.gc_sort,t.gc_id
]]>
</select>
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/13902.html