ASP.NET MVC4 +EF+ EasyUI实现 动态菜单

69 篇文章 1 订阅

这段时间没事,做了一个动态菜单的实现。有很多的地方想的不是很全,做的不够完善。欢迎大神们拍砖和指点!

话不多说,进入正题:

设计了一个数据库表:

在设计的时候每一个菜单的子菜单最多能添加 99 个,子菜单编号根据父菜单编号拼接上同级子菜单的个数。

     

这里因为要用到Easyui,一些子段是按照easyui属性设计的。

EF使用的是数据库优先方式创建。

贴上代码:

1.HTML代码:



 1     <style type="text/css">
 2         header {
 3             height:60px;
 4         }
 5         aside{
 6             float:left;
 7             width:200px;
 8         }
 9         article{
10             margin-left:204px
11         }
12     </style>
13 <body>
14     <header>
15         EasyUI treegrid 实现动态菜单
16     </header>
17 
18     <aside>
19     @*树形菜单*@
20         <ul id="tt"></ul>
21     </aside>
22     <article>
23         
24     @*treegrid数据表格*@
25 
26     <table id="treegrid" style="width: 600px; height: 400px"></table>
27         
28     @*treegrid的右键菜单*@
29     <div id="tree_menu" class="easyui-menu" style="width: 120px;">
30         <div>
31             <span>数据操作</span>
32             <div style="width: 120px;">
33                 <div id="add" data-options="iconCls:''icon-add0''">添加节点</div>
34                 <div id="edit" data-options="iconCls:''icon-edit0''">修改节点</div>
35                 <div id="delete" data-options="iconCls:''icon-delete0''">删除节点</div>
36             </div>
37         </div>
38         <div id="ref" data-options="iconCls:''icon-new0''">刷 新</div>
39         <div class="menu-sep"></div>
40         <div>Exit</div>
41     </div>
42     @*添加,修改表单(弹窗模式)*@
43     <div class ="treegrid_dialog" style="display: none;">
44         <form id="treegrid_form">
45             @*菜单主键*@
46             <input type="hidden" name ="MId"  />
47             @*父菜单编号*@
48             <input type="hidden" name ="pid" id="menuPid" />
49             @*菜单编号*@
50             <input type="hidden" name ="id" />
51             <table>
52                 <tr>
53                     <td>菜单名称</td><td><input  class="easyui-validatebox" name="text" data-options="required:true" /></td>
54                 </tr>
55                 <tr>
56                     <td>菜单图标</td><td><input  id="icon" name="iconCls" editable="false"/></td>
57                 </tr>
58                 <tr>
59                     <td>菜单路径</td><td><input  class="easyui-validatebox" name="url" data-options="required:true" /></td>
60                 </tr>
61                 <tr>
62                     <td>菜单是否选中</td>
63                     <td>
64                         <input id="yes" type="radio" name="checked" value="1" /><label for="yes"></label>
65                         <input id="no" type="radio" name="checked" value="0" /><label for="no"></label>
66                     </td>
67                 </tr>
68             </table>
69         </form>
70     </div>
71     </article>
72 </body>

2.JavaScript代码:



  1        var treegrid;
  2         var treegrid_dialog;
  3         var iconData;
  4         $(function () {
  5             //绑定菜单tree数据
  6             $(''#tt'').tree({
  7                 url: ''/System/GetTree''
  8             });
  9 
 10             iconData = [{
 11                 value: '''',
 12                 text: ''默认''
 13             }, {
 14                 value: ''icon-add'',
 15                 text: ''icon-add''
 16             }, {
 17                 value: ''icon-edit'',
 18                 text: ''icon-edit''
 19             }, {
 20                 value: ''icon-remove'',
 21                 text: ''icon-remove''
 22             }, {
 23                 value: ''icon-save'',
 24                 text: ''icon-save''
 25             }, {
 26                 value: ''icon-cut'',
 27                 text: ''icon-cut''
 28             }, {
 29                 value: ''icon-ok'',
 30                 text: ''icon-ok''
 31             }, {
 32                 value: ''icon-no'',
 33                 text: ''icon-no''
 34             }, {
 35                 value: ''icon-cancel'',
 36                 text: ''icon-cancel''
 37             }, {
 38                 value: ''icon-reload'',
 39                 text: ''icon-reload''
 40             }, {
 41                 value: ''icon-search'',
 42                 text: ''icon-search''
 43             }, {
 44                 value: ''icon-print'',
 45                 text: ''icon-print''
 46             }, {
 47                 value: ''icon-help'',
 48                 text: ''icon-help''
 49             }, {
 50                 value: ''icon-undo'',
 51                 text: ''icon-undo''
 52             }, {
 53                 value: ''icon-redo'',
 54                 text: ''icon-redo''
 55             }, {
 56                 value: ''icon-back'',
 57                 text: ''icon-back''
 58             }, {
 59                 value: ''icon-sum'',
 60                 text: ''icon-sum''
 61             }, {
 62                 value: ''icon-tip'',
 63                 text: ''icon-tip''
 64             }];
 65 
 66            treegrid= $(''#treegrid'').treegrid({
 67                         url: ''/System/GetTree'',
 68                         idField: ''id'',
 69                         treeField: ''text'',
 70                         columns: [[
 71                             { title: ''菜单名称'', field: ''text'', width: 180 },
 72                             {
 73                                 title: ''菜单图标'', field: ''iconCls'', width: 100,
 74                                 formatter: function (value) {
 75                                     if (value!=null) {
 76                                         return ''<span class="'' + value+ ''"></span>'';
 77                                     }
 78                                 }
 79                             },
 80                             { title: ''菜单路径'', field: ''url'', width: 100 },
 81                             { title: ''是否选中'', field: ''checked'', width: 100 }
 82                         ]],
 83                         onContextMenu: function (e, row) {
 84                             e.preventDefault();
 85                             $(this).treegrid(''unselectAll'');
 86                             $(this).treegrid(''select'', row.id);
 87                             $(''#tree_menu'').menu(''show'', {
 88                                 left: e.pageX,
 89                                 top: e.pageY
 90                             });
 91                         }
 92            });
 93             //刷新treegrid数据
 94             $("#ref").click(function () {
 95                    treegrid.treegrid(''reload'');
 96                });
 97             //添加节点
 98             $("#add").click(function () {
 99                 //取得选中节点
100                 var node = treegrid.treegrid(''getSelected'');
101                 //清空表单数据
102                 $("#treegrid_form").form(''clear'');
103                 $("#no").attr("checked", "true");//添加节点--设置表单(菜单是否选中)--默认选择‘否’
104                 $("#menuPid").val(node.id); //设置将要添加节点 的 父节点编号
105                 $("#icon").combobox({
106                     //url: ''../../Content/data/icondata.json'',
107                     //valueField: ''id'',
108                     //textField: ''text''
109                     data: iconData
110                 });
111                 treegrid_dialog = $(".treegrid_dialog").show().dialog({
112                     modal: true,
113                     title: ''添加 '' + node.text + '' 节点的子节点'',
114                     closed: false,
115                     width: 400,
116                     height: 250,
117                     cache: false,
118                     collapsible: true,
119                     maximizable: true,
120                     resizable: true,
121                     buttons: [{
122                         text: ''保    存'',
123                         plain:true,
124                         iconCls: ''icon-save'',
125                         handler: function () {
126                             //数据验证 通过与否
127                             var validate = $("#treegrid_form").form(''validate'');
128                             if (validate == false) {
129                                 return false;
130                             }
131 
132                             $.ajax({
133                                 url: ''/System/AddMenu'',
134                                 data: $("#treegrid_form").serialize(),
135                                 type: ''POST'',
136                                 cache: false,
137                                 dataType: ''json'',
138                                 success: function (data) {
139                                     if (data && data.Success) {
140                                         $.messager.show({ title: ''提示'', msg: '''' + data.Msg + '''', timeout: 5000, showType: ''slide'' });
141                                         treegrid_dialog.dialog(''close'');
142                                         treegrid.treegrid(''reload'');
143                                     }
144                                     else {
145                                         $.messager.show({ title: ''提示'', msg: '''' + data.Msg + '''', timeout: 5000, showType: ''slide'' });
146                                         treegrid_dialog.dialog(''close'');
147                                         treegrid.treegrid(''reload'');
148                                     }
149                                 }
150                             });
151                         }
152                     }, {
153                         text: ''取   消'',
154                         iconCls: ''icon-redo'',
155                         plain: true,
156                         handler: function () {
157                             treegrid_dialog.dialog(''close'');
158                         }
159                     }]
160                 });
161             });
162             //编辑节点
163             $("#edit").click(function () {
164                 //取得选中节点
165                 var node = treegrid.treegrid(''getSelected'');
166                 //清空表单数据
167                 $("#treegrid_form").form(''clear'');
168                 treegrid_dialog = $(".treegrid_dialog").show().dialog({
169                     modal: true,
170                     title: ''编辑 '' + node.text + '' 节点'',
171                     closed: false,
172                     width: 400,
173                     height: 250,
174                     cache: false,
175                     collapsible: true,
176                     maximizable: true,
177                     resizable: true,
178                     buttons: [{
179                         text: ''保    存'',
180                         plain:true,
181                         iconCls: ''icon-save'',
182                         handler: function () {
183                             //数据验证 通过与否
184                             var validate = $("#treegrid_form").form(''validate'');
185                             if (validate == false) {
186                                 return false;
187                             }
188                             $.ajax({
189                                 url: ''/System/EditMenu'',
190                                 data: $("#treegrid_form").serialize(),
191                                 type: ''POST'',
192                                 cache: false,
193                                 dataType: ''json'',
194                                 success: function (data) {
195                                     if (data && data.Success) {
196                                         $.messager.show({ title: ''提示'', msg: '''' + data.Msg + '''', timeout: 5000, showType: ''slide'' });
197                                         treegrid_dialog.dialog(''close'');
198                                         treegrid.treegrid(''reload'');
199                                     }
200                                     else {
201                                         $.messager.show({ title: ''提示'', msg: '''' + data.Msg + '''', timeout: 5000, showType: ''slide'' });
202                                         treegrid_dialog.dialog(''close'');
203                                         treegrid.treegrid(''reload'');
204                                     }
205                                 }
206                             });
207                         }
208                     }, {
209                         text: ''取   消'',
210                         iconCls: ''icon-redo'',
211                         plain: true,
212                         handler: function () {
213                             treegrid_dialog.dialog(''close'');
214                         }
215                     }]
216                 });
217                 //绑定编辑窗口表单数据
218                 $("#treegrid_form").form(''load'', node);
219             });
220             //删除节点
221             $("#delete").click(function () {
222                 //取得选中节点
223                 var node = treegrid.treegrid(''getSelected'');
224                 $.post(''/System/DeleteMenu'', { MId: node.MId }, function (data) {
225                     if (data && data.Success) {
226                         $.messager.show({ title: ''提示'', msg: '''' + data.Msg + '''', timeout: 5000, showType: ''slide'' });
227                         treegrid.treegrid(''reload'');
228                     }
229                     else {
230                         $.messager.show({ title: ''提示'', msg: '''' + data.Msg + '''', timeout: 5000, showType: ''slide'' });
231                         treegrid.treegrid(''reload'');
232                     }
233                 });
234             });
235         });

3.后台Controller方法



  1        private SYS_UserLimitEntities db = new SYS_UserLimitEntities();
  2 
  3         public ActionResult Index()
  4         {
  5             return View();
  6         }
  7 
  8         #region 取得树形菜单 + ActionResult GetTree(string id)
  9         /// <summary>
 10         /// 取得树形菜单
 11         /// </summary>
 12         /// <param name="id">用户点击tree时,向后台访问父菜单编号</param>
 13         /// <returns></returns>
 14         [HttpPost]
 15         public ActionResult GetTree(string id)
 16         {
 17             try
 18             {
 19                 List<Menu> list = null;
 20                 //判断是否执行点击tree时,按需加载要扩展的菜单
 21                 if (id != null)
 22                 {
 23                     list = db.Menu.Where(a => a.pid == id).ToList();
 24                 }
 25                 else
 26                 {
 27                     list = db.Menu.Where(a => a.pid == "000").ToList();//取得根菜单
 28                 }
 29                 return Json(list);//返回easyui展示数据的json数据
 30             }
 31             catch (Exception)
 32             {
 33                 throw;
 34             }
 35         } 
 36         #endregion
 37 
 38         #region 添加菜单操作 + ActionResult AddMenu(Menu menu)
 39         /// <summary>
 40         /// 添加菜单操作
 41         /// </summary>
 42         /// <param name="menu">收集到的Menu菜单各个属性的值</param>
 43         /// <returns></returns>
 44         [HttpPost]
 45         public ActionResult AddMenu(Menu menu)
 46         {
 47             Messages m = new Messages();
 48             try
 49             {
 50                 string newid = null;//将要添加菜单的编号
 51                 //判断将要添加子菜单的父菜单状态是否为父菜单状态/否则修改
 52                 Menu me = db.Menu.Single(a => a.id == menu.pid);
 53                 if (me.state == "open")
 54                 {
 55                     me.state = "closed";
 56                 }
 57                 //取得将要添加子菜单同级菜单-----并倒序排列
 58                 var mlist = db.Menu.Where(a => a.pid == menu.pid).OrderByDescending(a => a.MId).ToList();
 59                 //判断与将要添加的子菜单的同级菜单数目是否为0
 60                 if (mlist.Count > 0)
 61                 {
 62                     //取得同级菜单编号最大的的最后 两位 以便计算出将要添加菜单编号
 63                     string id = mlist[0].id;
 64                     int i = Convert.ToInt32(id.Substring(id.Length - 2, 2)) + 1;
 65                     //限定每一个子菜单的数目不得超过99个
 66                     if (i == 100)
 67                     {
 68                         m.Msg = "该菜单的子菜单已经达到最大数目了,你可以选择创建其他菜单选项";
 69                         return Json(m);
 70                     }
 71                     //判断子菜单编号后两位是否为‘01’两位形式不是则补填为两位
 72                     newid = i > 9 ? mlist[0].pid + i.ToString() : mlist[0].pid + "0" + i.ToString();
 73                 }
 74                 else
 75                 {
 76                     newid = menu.pid + "01";//没有同级菜单时候就默认添加菜单的编号为 父菜单编号+‘01’
 77                 }
 78                 //修改将要添加菜单的菜单编号
 79                 menu.id = newid;
 80                 menu.state = "open";
 81                 //写入数据库
 82                 db.Menu.Add(menu);
 83 
 84                 db.SaveChanges();
 85                 m.Msg = "成功的添加["+menu.text+"]的菜单节点信息!";
 86                 m.Success = true;
 87                 return Json(m);
 88             }
 89             catch (Exception ex)
 90             {
 91                 m.Msg = "添加失败!" + ex.Message;
 92                 return Json(m);
 93             }
 94         } 
 95         #endregion
 96 
 97         #region 编辑菜单操作 + ActionResult EditMenu(Menu menu)
 98         /// <summary>
 99         /// 编辑菜单操作
100         /// </summary>
101         /// <param name="menu">收集表单Menu数据</param>
102         /// <returns></returns>
103         [HttpPost]
104         public ActionResult EditMenu(Menu menu)
105         {
106             Messages m = new Messages();
107             try
108             {
109                 //将要修改的菜单添加到EF容器
110                 DbEntityEntry<Menu> entry = db.Entry<Menu>(menu);
111                 //设置包装类对象状态为unchanged
112                 entry.State = System.Data.EntityState.Unchanged;
113                 //设置改变的属性
114                 entry.Property(a => a.text).IsModified = true;
115                 entry.Property(a => a.url).IsModified = true;
116                 entry.Property(a => a.@checked).IsModified = true;
117                 entry.Property(a => a.iconCls).IsModified = true;
118                 //提交数据库
119                 db.SaveChanges();
120                 m.Msg = "节点["+menu.text+"]的信息修改成功!";
121                 m.Success = true;
122                 return Json(m);
123             }
124             catch (Exception ex)
125             {
126                 m.Msg = "修改失败!" + ex.Message;
127                 return Json(m);
128             }
129         }
130         #endregion
131 
132         #region 删除菜单操作 + ActionResult DeleteMenu(int MId)
133         /// <summary>
134         /// 删除菜单操作
135         /// </summary>
136         /// <param name="MId">将要删除的菜单编号</param>
137         /// <returns></returns>
138         [HttpPost]
139         public ActionResult DeleteMenu(int MId)
140         {
141             Messages m = new Messages();
142             try
143             {
144                 //取得将要删除的实体对象
145                 Menu menu = db.Menu.Single(a => a.MId == MId);
146                 // 删除项有--子菜单时
147                 /*
148                  * 从选中的节点开始,将其节点以及其一下节点都删除
149                  * --无论从那个节点开始删除都能自如的将其子菜单以及子子菜单删除,以此类推
150                 */
151                 List<Menu> mlist = db.Menu.Where(a => a.id.IndexOf(menu.id)>=0).ToList();
152                 if (mlist.Count>0)
153                 {
154                     foreach (var item in mlist)
155                     {
156                         db.Menu.Remove(item);
157                     }
158                 }
159                 db.Menu.Remove(menu);
160                 db.SaveChanges();
161                 m.Msg = "节点已经被成功删除!";
162                 m.Success = true;
163                 return Json(m);
164             }
165             catch (Exception ex)
166             {
167                 m.Msg = "删除失败!" + ex.Message;
168                 return Json(m);
169             }
170         }
171         #endregion

效果图如下:





 




 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Easyui开发框架源码 源码描述: 一、功能介绍: 本系统实现的核心功能完全适合企业级开发 1、框架采用多层架构,反射技术。 2、权限管理里实现的功能:按钮管理、菜单管理、角色管理、用户管理、数据字典、单号管理、日志管理等。通用于后台管理系统以及权限管理模块。 3、系统用到缓存技术,MemCached和Redis这2种,具体缓存资料网上很多。 二、目录结构: 01 Reference DLL 这里主要包括第三方的框架和组件项目,把这些文件分门别类地集中放在此目录下。 02 Solution Items 项目的规范、流程、重要文件等。 03 Test 这里主要放置测试需要的一些信息,如测试版本、测试文档等。 04 Publish 这个文件夹主要放置发布的版本。 05 Framework 主要包括数据访问框架、通用权限框架、异常和日志处理框架、IOC框架、AOP框架等基础或常用功能。 06 Bussiness JTS项目的业务文件夹。 07 UI 即User Interface,该层作为数据输入和展示的界面,是与用户交互的有效途径,所以它起着至关重要的作用。往往给人第一印象的就是UI层,在设计的时候也要根据不同的技术或者不同的要求进行斟酌。通常可以把UI分为B/S UI、C/S UI以及WEB服务。在这里就是我们的ASP.NET项目。 08 SOA 这一层不是必须的,根据项目的具体情况进行取舍,如果业务比较复杂且交互项目繁多,那么SOA可以减轻我们的负担;如果业务比较单一且相对简单,就可以直接调用或者使用Web Service/Remoting/WCF作为通信框架即可。在实施SOA的过程中,可以自己使用WCF+WF搭建一个小型轻量级的SOA框架,也可以使用诸如Biztalk等软件。 三、注意事项: 1、开发环境为Visual Studio 2010及以上,数据库为SQL Server 2008R2,数据库文件在DB文件夹中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值