简单的树形菜单展示
1、导入EasyUI的css和Javascript文件到页面:
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
2、静态数据页面展示:
2-1:页面:<ul id="menuTree"> </ul>
js部分:
$("#menuTree").tree({
url:'true_date1.json',
onClick:funciton(node){
openTab(node);
}
});
2-2: entity类:
public class Menu {
private String menuId;
private String menuName;
private String menuUrl;
}
public class TreeNode {
private String id;
private String text;
private Map<String, Object> attributes = new HashMap<>();
private List<TreeNode> children = new ArrayList<>();
}
2-3:dao层:
//加载数据
public List<Map<String, Object>> menuList(Menu menu,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select * from t_easyui_menu where true ";
if(StringUtils.isBlank(menu.getMenuId())) {//如果说空的话
sql +=" and parentId=-1"; //加载根目录
}else {//如果说不为空的话
// sql +=" and parentId="+ menu.getMenuId();
sql +=" and parentId in ("+menu.getMenuId()+") " ;
}
//查询出来 的格式是 [{menuid:1,menuname:学生管理.menuurl:student.jsp},{}] 不能进行展示
return super.executeQuery(sql, pageBean);
}
/**
* 将原数据的map转成可展示的tree组件数据json格式
* @param map
* @param treeNode
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
private void mapToTreeNode(Map<String, Object> map,TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
//Menuid,Menuname必须与数据库的列名保持一致
treeNode.setId((String) map.get("Menuid"));//把menu里面的值设置到TreeNode里面
treeNode.setText((String) map.get("Menuname"));
treeNode.setAttributes(map);
// treeNode.setChildren(children);
//有子节点就查询
Menu menu = new Menu();
//设置值
menu.setMenuId(treeNode.getId());//通过id去查询,查子
//调用第一个menuList方法 去查询
List<Map<String, Object>> menuList = this.menuList(menu, new PageBean()); //menuList转格式
List<TreeNode> listTreeNode = new ArrayList<>(); //创建一个节点
listToTreeNodeList(menuList, listTreeNode); //调用下面的 listToTreeNodeList 方法
treeNode.setChildren(listTreeNode); //把子节点设置进专用菜单的 children 里面
}
/**
* 将原数据的map转成可展示的tree组件数据json格式
* @param list
* @param listTreeNode
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
private void listToTreeNodeList(List<Map<String, Object>> list, List<TreeNode> listTreeNode) throws InstantiationException, IllegalAccessException, SQLException {
//把list集合遍历一下
TreeNode treeNode = null;
for (Map<String, Object> map : list) {
treeNode = new TreeNode();//实例化TreeNode
mapToTreeNode(map, treeNode);//给mapToTreeNode赋值
listTreeNode.add(treeNode);//把treeNode加到listTreeNode里面去
}
}
/**
* 最终用于tree组件的展示数据
*
* @param menu
* @param pageBean
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public List<TreeNode> menuTreeList(Menu menu,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
List<Map<String, Object>> menuList = this.menuList(menu, pageBean);
//创建一个节点
List<TreeNode> listTreeNode = new ArrayList<>();
//调用listToTreeNodeList
this.listToTreeNodeList(menuList, listTreeNode);
return listTreeNode;
}
2-4 web层:
public String list(HttpServletRequest request, HttpServletResponse response) {
try {
PageBean pageBean = new PageBean();
pageBean.setPagination(false);
List<TreeNode> menuTreeList = this.menuDao.menuTreeList(menu, pageBean);
ObjectMapper om = new ObjectMapper();
String menuTreeJson = om.writeValueAsString(menuTreeList);
ResponseUtil.write(response, menuTreeJson);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
2-4 配置mvc.xml:
<action path="/menuAction" type="com.zking.web.MenuAction">
</action>
2-5:引用到:
url:menuAction.action?methodName=list,
博主有话说: 该内容是我的日常学习,记录一下每个学习阶段的内容,都是初学者,写得不是特别好,仅供参考借鉴。以后我都会分享一些知识出来,希望能帮到大家!谢谢。