这段时间没事,做了一个动态菜单的实现。有很多的地方想的不是很全,做的不够完善。欢迎大神们拍砖和指点!
话不多说,进入正题:
设计了一个数据库表:
在设计的时候每一个菜单的子菜单最多能添加 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>