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

话不多说,进入正题:

设计了一个数据库表:

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

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

这里因为要用到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>
View Code

相关文章: