使用struts2实现动态树形菜单 - 七堇年

公告

1、实现这样一个三级菜单功能，首先需要将静态的源码改为动态的

1.1静态源码如下：二级三级菜单都是json格式生成的，我们要做的就是讲json格式的数据动态的从数据库中拿到

  1 <!DOCTYPE HTML>
  2 <html>
  3  <head>
  4   <title> BUI 管理系统</title>
  5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6    <link href="assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
  7   <link href="assets/css/bui-min.css" rel="stylesheet" type="text/css" />
  8    <link href="assets/css/main-min.css" rel="stylesheet" type="text/css" />
  9  </head>
 10  <body>
 11 
 12   <div class="header">
 13     
 14       <div class="dl-title">
 15         <a href="http://www.builive.com" title="文档库地址" target="_blank"><!-- 仅仅为了提供文档的快速入口，项目中请删除链接 -->
 16           <span class="lp-title-port">BUI</span><span class="dl-title-text">前端框架</span>
 17         </a>
 18       </div>
 19 
 20     <div class="dl-log">欢迎您，<span class="dl-log-user">**.**@alibaba-inc.com</span><a href="###" title="退出系统" class="dl-log-quit">[退出]</a><a href="http://http://www.builive.com/" title="文档库" class="dl-log-quit">文档库</a>
 21     </div>
 22   </div>
 23    <div class="content">
 24     <div class="dl-main-nav">
 25       <div class="dl-inform"><div class="dl-inform-title">贴心小秘书<s class="dl-inform-icon dl-up"></s></div></div>
 26       <ul id="J_Nav"  class="nav-list ks-clear">
 27         <li class="nav-item dl-selected"><div class="nav-item-inner nav-home">首页</div></li>
 28         <li class="nav-item"><div class="nav-item-inner nav-order">表单页</div></li>
 29         <li class="nav-item"><div class="nav-item-inner nav-inventory">搜索页</div></li>
 30         <li class="nav-item"><div class="nav-item-inner nav-supplier">详情页</div></li>
 31         <li class="nav-item"><div class="nav-item-inner nav-marketing">图表</div></li>
 32       </ul>
 33     </div>
 34     <ul id="J_NavContent" class="dl-tab-conten">
 35 
 36     </ul>
 37    </div>
 38   <script type="text/javascript" src="assets/js/jquery-1.8.1.min.js"></script>
 39   <script type="text/javascript" src="./assets/js/bui.js"></script>
 40   <script type="text/javascript" src="./assets/js/config.js"></script>
 41 
 42   <script>
 43     BUI.use('common/main',function(){
 44       var config = [{
 45           id:'menu', 
 46           homePage : 'code',
 47           menu:[{
 48               text:'首页内容',
 49               items:[
 50                 {id:'code',text:'首页代码',href:'main/code.html',closeable : false},
 51                 {id:'main-menu',text:'顶部导航',href:'main/menu.html'},
 52                 {id:'second-menu',text:'右边菜单',href:'main/second-menu.html'},
 53                 {id:'dyna-menu',text:'动态菜单',href:'main/dyna-menu.html'}
 54               ]
 55             },{
 56               text:'页面操作',
 57               items:[
 58                 {id:'operation',text:'页面常见操作',href:'main/operation.html'},
 59                 {id:'quick',text:'页面操作快捷方式',href:'main/quick.html'}  
 60               ]
 61             },{
 62               text:'文件结构',
 63               items:[
 64                 {id:'resource',text:'资源文件结构',href:'main/resource.html'},
 65                 {id:'loader',text:'引入JS方式',href:'main/loader.html'}  
 66               ]
 67             }]
 68           },{
 69             id:'form',
 70             menu:[{
 71                 text:'表单页面',
 72                 items:[
 73                   {id:'code',text:'表单代码',href:'form/code.html'},
 74                   {id:'example',text:'表单示例',href:'form/example.html'},
 75                   {id:'introduce',text:'表单简介',href:'form/introduce.html'},
 76                   {id:'valid',text:'表单基本验证',href:'form/basicValid.html'},
 77                   {id:'advalid',text:'表单复杂验证',href:'form/advalid.html'},
 78                   {id:'remote',text:'远程调用',href:'form/remote.html'},
 79                   {id:'group',text:'表单分组',href:'form/group.html'},
 80                   {id:'depends',text:'表单联动',href:'form/depends.html'}
 81                 ]
 82               },{
 83                 text:'成功失败页面',
 84                 items:[
 85                   {id:'success',text:'成功页面',href:'form/success.html'},
 86                   {id:'fail',text:'失败页面',href:'form/fail.html'}
 87                 
 88                 ]
 89               },{
 90                 text:'可编辑表格',
 91                 items:[
 92                   {id:'grid',text:'可编辑表格',href:'form/grid.html'},
 93                   {id:'form-grid',text:'表单中的可编辑表格',href:'form/form-grid.html'},
 94                   {id:'dialog-grid',text:'使用弹出框',href:'form/dialog-grid.html'},
 95                   {id:'form-dialog-grid',text:'表单中使用弹出框',href:'form/form-dialog-grid.html'}
 96                 ]
 97               }]
 98           },{
 99             id:'search',
100             menu:[{
101                 text:'搜索页面',
102                 items:[
103                   {id:'code',text:'搜索页面代码',href:'search/code.html'},
104                   {id:'example',text:'搜索页面示例',href:'search/example.html'},
105                   {id:'example-dialog',text:'搜索页面编辑示例',href:'search/example-dialog.html'},
106                   {id:'introduce',text:'搜索页面简介',href:'search/introduce.html'}, 
107                   {id:'config',text:'搜索配置',href:'search/config.html'}
108                 ]
109               },{
110                 text : '更多示例',
111                 items : [
112                   {id : 'tab',text : '使用tab过滤',href : 'search/tab.html'}
113                 ]
114               }]
115           },{
116             id:'detail',
117             menu:[{
118                 text:'详情页面',
119                 items:[
120                   {id:'code',text:'详情页面代码',href:'detail/code.html'},
121                   {id:'example',text:'详情页面示例',href:'detail/example.html'},
122                   {id:'introduce',text:'详情页面简介',href:'detail/introduce.html'}
123                 ]
124               }]
125           },{
126             id : 'chart',
127             menu : [{
128               text : '图表',
129               items:[
130                   {id:'code',text:'引入代码',href:'chart/code.html'},
131                   {id:'line',text:'折线图',href:'chart/line.html'},
132                   {id:'area',text:'区域图',href:'chart/area.html'},
133                   {id:'column',text:'柱状图',href:'chart/column.html'},
134                   {id:'pie',text:'饼图',href:'chart/pie.html'}, 
135                   {id:'radar',text:'雷达图',href:'chart/radar.html'}
136               ]
137             }]
138           }];
139       new PageUtil.MainPage({
140         modulesConfig : config
141       });
142     });
143   </script>
144  </body>
145 </html>

2、数据库表结构如下：

create table t_menus(
   id varchar(200) primary key,
   homePage varchar(200),
   text varchar(200),
   href varchar(200),
   closeable int,
   fid varchar(200)
);


insert into t_menus(id,homePage,text) values('menu','code','首页');
insert into t_menus(id,homePage,text,fid) values('index','code','首页内容','menu');
insert into t_menus(id,homePage,href,closeable,text,fid) values('codeindex','code','main/code.html',1,'首页代码','index');
insert into t_menus(id,homePage,href,closeable,text,fid) values('topindex','code','main/code.html',1,'顶部导航','index');

这里插入首页（一级菜单），首页内容(二级菜单),首页导航、顶部导航（三级菜单）

3、表对应的pojo类为：

 1 public List<TMenu> getRoots(){
 2         SqlSession session = SqlSessionHelp.getSession(true);
 3         TMenuMapper mapper = session.getMapper(TMenuMapper.class);
 4         List<TMenu> list = null;
 5         try {
 6             list = mapper.getRoots();
 7         }catch (Exception e){
 8             e.printStackTrace();
 9         }
10         return list;
11     }
12 
13     public  String getMenuJs(List<TMenu> list){
14         StringBuffer msg = new StringBuffer();
15         StringBuffer subMenu = new StringBuffer();
16 
17         for (TMenu m: list) {
18             StringBuffer oneMenu = new StringBuffer();
19             oneMenu.append(" {id:'"+m.getId()+"', homePage : '"+m.getHomePage()+"',menu:");
20 
21             List<TMenu> sons = m.getItems();
22             String sonJs = JSONArray.toJSONString(sons);
23             oneMenu.append(sonJs);
24             oneMenu.append("}");
25             subMenu.append(oneMenu+",");
26         }
27         subMenu.deleteCharAt(subMenu.length()-1);
28         msg.append("["+subMenu.toString()+"]");
29         return  msg.toString();
30     }

action层

 1  private TMenu root;
 2 
 3     public TMenu getRoot() {
 4         return root;
 5     }
 6 
 7     public void setRoot(TMenu root) {
 8         this.root = root;
 9     }
10 
11     @Override
12     public String toString() {
13         TMenuService service = new TMenuService();
14         List<TMenu> roots = service.getRoots();
15 
16         String menu = service.getMenuJs(roots);
17         ServletActionContext.getRequest().getSession().setAttribute("roots",roots);
18         ServletActionContext.getRequest().getSession().setAttribute("subMenu",menu);
19         return "list";
20     }

create TABLE t_menus(id varchar(200) PRIMARY key,homePage VARCHAR(200) ,text varchar(200),href varchar(200),closeable int,fid varchar(200));

posted on 2017-07-15 14:42 七堇年阅读(228) 评论(0) 收藏举报

刷新页面返回顶部