EasyUI 树形菜单

简单的树形菜单展示   

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,

博主有话说: 该内容是我的日常学习,记录一下每个学习阶段的内容,都是初学者,写得不是特别好,仅供参考借鉴。以后我都会分享一些知识出来,希望能帮到大家!谢谢。

猜你喜欢

转载自blog.csdn.net/qq_41320105/article/details/82595064