SSM整合ProjectDay02-菜单管理功能呈现【附加技能bootstrap-treegrid模板】

菜单管理：目的：对用户访问权限进行管理

一、查看数据库对应字段、分析功能

note 备注
parentId 树结构
permission 权限标识

二、Controller

@Controller
@RequestMapping("/menu/")
public class SysMenuController {
//    绑定页面
    @RequestMapping("doMenuListUI")
    public String doMemuListUI(){
        return "sys/menu_list";
    }
}

三、首页添加菜单模块连接

     $(function(){
     /* $("#load-log-id").click(function(){
    		var url="log/doLogListUI.do";
    		//load函数为一个特殊的ajax函数
    		$("#mainContentId").load(url);
    	}) */
       /*$("#load-menu-id").click(function(){
    		var url="menu/doMenuListUI.do";
    		//load函数为一个特殊的ajax函数
    		$("#mainContentId").load(url);
    	})*/
          doLoadUI("load-log-id","log/doLogListUI");
          doLoadUI("load-menu-id","menu/doMenuListUI");
     });
//     发现两个方法大量代码重复，可提取
  function doLoadUI(id,url) {
    $("#"+id).click(function(){
      //load函数为一个特殊的ajax函数
      $("#mainContentId").load(url,function () {
        //初始化对象 如果有数据，移除
        $("#mainContentId").removeData();
      });
    });
  }

结果：

菜单页面数据呈现

一、Dao

public interface SysMenuDao {

//    查询所有菜单以及菜单对应的上级菜单信息
    List<Map<String,Object>> findObject();
}

二、Mapper

<mapper namespace="com.jt.sys.dao.SysMenuDao">

    <!--定义查询所有菜单的元素-->
    <select id="findObjects" resultType="map">
--         select c.*,p.name parentName
--         from sys_menus c left join sys_menus p
--         on c.parentId=p.id
          select c.*,(
                    select p.name
                    from sys_menus p
                    where c.parentId=p.id
                    ) parentName
          from sys_menus c

    </select>
</mapper>

三、service层

public interface SysMenuService {

//
    List<Map<String,Object>> findObjects();
}

@Service
public class SysMenuServiceImpl implements SysMenuService {

    @Autowired
    private SysMenuDao sysMenuDao;
    
    @Override
    public List<Map<String, Object>> findObjects() {
        return sysMenuDao.findObjects();
    }
}

四、Controller

@Controller
@RequestMapping("/menu/")
public class SysMenuController {

    @Autowired
    private SysMenuService sysMenuService;

//    绑定页面
    @RequestMapping("doMenuListUI")
    public String doMemuListUI(){
        return "sys/menu_list";
    }


    @RequestMapping("/doFindObjects")
    @ResponseBody
    public JsonResult doFindObjects(){
        return new JsonResult(sysMenuService.findObjects());
    }
}

测试一下

访问：http://localhost:8080/ssmday4/menu/doFindObjects
结果：

前端页面呈现

1.menu_list.html

$(function(){
		doGetObjects();
	})
	function doGetObjects(){
		//构建table对象（bootstrap框架中greeGride插件）
		var treeTable=
		new TreeTable("menuTable", //talbeid
				"menu/doFindObjects", //url
		 		columns);
		//2 初始化table对象（底层发送ajax请求获取数据）
		treeTable.init();
		
	}

结果：