级联菜单的动态实现(数据库绑定)

效果预览

级联菜单的动态实现(数据库绑定)_第1张图片

级联菜单的动态实现(数据库绑定)_第2张图片

级联菜单的动态实现(数据库绑定)_第3张图片

级联菜单的动态实现(数据库绑定)_第4张图片

级联菜单的动态实现(数据库绑定)_第5张图片

级联菜单的动态实现(数据库绑定)_第6张图片

数据库设计
第一类型:
级联菜单的动态实现(数据库绑定)_第7张图片

第二类型:
级联菜单的动态实现(数据库绑定)_第8张图片

第三类型:
级联菜单的动态实现(数据库绑定)_第9张图片

Controller层代码

@RequestMapping("/noFilterGetAllInfo")
public void noFilterGetAllInfo(Integer firstSelected,Integer secondSelected,HttpServletRequest request , HttpServletResponse response){
    Map<String, Object> resultMap = new  HashMap<String, Object>();
    GoodsTypeFirst first = new GoodsTypeFirst();
    try {
        //第一类型
        List<GoodsTypeFirst> firstList = goodsTypeFirstService.getEntity(first);
        resultMap.put("firstList", firstList);
        if (firstList.size()>0) {
            GoodsTypeSecond second = new GoodsTypeSecond();
            if(null != firstSelected){
                //firstSelected为对应的GoodsTypeFirst.id
                second.setGoodsTypeFirstId(firstSelected);
            }else{
                second.setGoodsTypeFirstId(firstList.get(0).getId());
            }
            //第二类型
            List<GoodsTypeSecond> secondList = goodsTypeSecondService.getEntity(second);
            resultMap.put("secondList", secondList);
            if(secondList.size()>0){
                GoodsTypeThird third = new GoodsTypeThird();
                if(null != secondSelected){
                    //secondSelected为对应的GoodsTypeSecond.id
                    third.setGoodsTypeSecondId(secondSelected);
                }else{
                    third.setGoodsTypeSecondId(secondList.get(0).getId());
                }
                //第三类型
                List<GoodsTypeThird> thirdList = goodsTypeThirdService.getEntity(third);
                resultMap.put("thirdList", thirdList);
            }
        }
        resultMap.put(Constants.CODE, Constants.CODE_VALUE_SUCCESS);
    } catch (BaseServiceException e) {
        ExceptionHandler.handle(logger, e, "关联关系,查询资源出错!!!");
        resultMap.put(Constants.CODE, Constants.CODE_VALUE_FAILURE);
    }
    //工具类,用于将map转换为JSON数据
    JSONUtil.writeJSONString(response, resultMap);
}

JS代码

$(function(){
    //访问数据库,得到(默认选中第一项下的)三级菜单详情
    $.ajax({
        type : "POST",
        url : "admmodular/inventory/noFilterGetAllInfo.do",
        success : function(result) {
            //循环遍历得到的模块名称,动态添加到html中
            var results = eval("("+result+ ")");

            //第一类型下拉列表,onchange="changeFirst()"表示改变选项,这样将会动态改变后级菜单的值
            var firstList = ''

            //第二类型下拉列表,onchange="changeSecond()"表示改变选项,这样将会动态改变后级菜单的值
            var secondList = ''

            //第三类型下拉列表,最后一级菜单,改变选项不会影响其它地方
            var thirdList = ''
        }
        //点击按钮时,将菜单显示在弹出窗口中
        $('#add').on('click',function(){
                layer.open({
                  type: 1,
                  title:"增加入库条目",
                  skin: 'demo-class', //加上边框
                  area: ['500px', '280px'], //宽高
                  content: '
'+ ' + '类型' + firstList + secondList +thirdList + '' + ' + '数量' + '' + '' + ''
, }) }) }) }) //改变第一类型时,改变第二类型列表和第三类型列表 function changeFirst(){ //第一类型选中项 var firstSelected = $('#select1 option:selected').val(); //若第一类型选中项不为第一个,则没有第二类型与第三类型而多一个输入框,需要移除选择框,增加输入框 if(firstSelected != 1){ $("#select2").remove(); $("#select3").remove(); if($("#itemName").val() == undefined){ var input1 = '
物品名称
'
; $("#select1").after(input1); } }else{ //若第一类型选中项为第一个,则需要移除输入框,增加选择框 $("#itemNameBox").remove(); var select23 = ''; $("#select1").after(select23); //获得当前选中项的下级菜单 $.ajax({ type: "POST", url: "admmodular/inventory/noFilterGetAllInfo.do", data: "firstSelected="+firstSelected, success: function(result){ var results = eval("(" +result+ ")"); // $("#select2").find("option").remove(); if (results.code == 1) { var html; if (results.secondList.length>0) { for (var i = 0; i < results.secondList.length; i++) { html+='+results.secondList[i].typeName+'' } $("#select2").append(html) }else{ $("#select2").append("") } }else{ $("#select2").append("") } //移除第三类型的值,再加入新的值 $("#select3").find("option").remove(); if (results.code == 1) { /*不写null时,会直接使用上面的html,不会覆盖,即重新定义不会覆盖*/ var html = null; if (null != results.thirdList && results.thirdList.length>0) { for (var i = 0; i < results.thirdList.length; i++) { html+='+results.thirdList[i].typeName+'' } $("#select3").append(html) }else{ $("#select3").append("") } }else{ $("#select3").append("") } } }); } } //改变第二类型时,修改第三类型的值 function changeSecond(){ //选中项所对应的typeCode var firstSelected = $('#select1 option:selected').val(); var secondSelected = $('#select2 option:selected').val(); //查询出对应的资源 $.ajax({ type: "POST", url: "admmodular/inventory/noFilterGetAllInfo.do", data: "firstSelected="+firstSelected+"&secondSelected="+secondSelected, success: function(result){ var results = eval("(" +result+ ")"); //移除第三类型的值,并加入新的值 $("#select3").find("option").remove(); if (results.code == 1) { /*不写null时,会直接使用上面的html,不会覆盖,即重新定义不会覆盖*/ var html = null; if (null != results.thirdList && results.thirdList.length>0) { for (var i = 0; i < results.thirdList.length; i++) { html+='+results.thirdList[i].typeName+'' } $("#select3").append(html); }else{ $("#select3").append(""); } }else{ $("#select3").append(""); } } }) }

你可能感兴趣的