前言
本章用一个案列来教大家实现Easyui tree前端展示。
效果图：
案列步骤
1.导入所需jar包：
2.导入js
3.导入之前写好的mvc工具类
4.创建实体类
private String serialNo;
private String menuid;
private String menuname;
private String menuURL;
private String parentid;
public String getSerialNo() {
return serialNo;
}
public void setSerialNo(String serialNo) {
this.serialNo = serialNo;
}
public String getMenuid() {
return menuid;
}
public void setMenuid(String menuid) {
this.menuid = menuid;
}
public String getMenuname() {
return menuname;
}
public void setMenuname(String menuname) {
this.menuname = menuname;
}
public String getMenuURL() {
return menuURL;
}
public void setMenuURL(String menuURL) {
this.menuURL = menuURL;
}
public String getParentid() {
return parentid;
}
public void setParentid(String parentid) {
this.parentid = parentid;
}
@Override
public String toString() {
return "Menu [serialNo=" + serialNo + ", menuid=" + menuid + ", menuname=" + menuname + ", menuURL=" + menuURL
+ ", parentid=" + parentid + "]";
}
}
5.dao方法
public class MenuDao extends BaseDao<Menu>{
public List<Menu> list(Menu menu,PageBean pagebean) throws InstantiationException, IllegalAccessException, SQLException{
String sql="select * from t_easyui_menu";
return super.executeQuery(sql, Menu.class, pagebean);
}
public List<TreeVo<Menu>> topNode(Menu menu,PageBean pagebean) throws InstantiationException, IllegalAccessException, SQLException{
List<Menu> list = this.list(menu, pagebean);
List<TreeVo<Menu>> nodes=new ArrayList<TreeVo<Menu>>();
TreeVo treevo=null;
for (Menu p : list) {
treevo=new TreeVo<>();
treevo.setId(p.getMenuid()+"");
treevo.setText(p.getMenuname());
treevo.setParentId(p.getParentid()+"");
Map<String, Object> attributes=new HashMap<String,Object>();
attributes.put("self", p);
treevo.setAttributes(attributes);
nodes.add(treevo);
}
return BuildTree.buildList(nodes, "-1");
}
public static void main(String[] args) throws InstantiationException, IllegalAccessException, SQLException {
MenuDao me=new MenuDao();
List<Menu> list = me.list(null, null);
for (Menu menu : list) {
System.out.println(menu);
}
}
}6.action
public class MenuAction extends ActionSupport implements ModelDriven<Menu> {
private Menu menu=new Menu();
private MenuDao menudao=new MenuDao();
@Override
public Menu getModel(HttpServletRequest arg0) throws IllegalAccessException, InvocationTargetException {
// TODO Auto-generated method stub
return menu;
}
public String menuTree(HttpServletRequest req,HttpServletResponse resp)throws Exception {
try{
ResponseUtil.writeJson(resp, this.menudao.topNode(null, null));
}catch(InstantiationException e) {
e.printStackTrace();
}
return null;
}
}7.mvc.xml配置
8.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!-- 组件库源码的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>
<title>登录后的主界面</title>
</head>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
<ul id="tt"></ul>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'"></div>
</body>
</html>本章的实现步骤教程就到处结束，如果出现bug，可以打开浏览器按f12进行调试，有需要补充的小伙伴欢迎在留言区留言！