側邊菜單欄
頁面：
1 <!-- 頂部開始 --> 2 <div class="container"> 3 <div class="logo"><a href="/Home/Index" style="color:aquamarine"></a></div> 4 <div class="left_open"> 5 <i title="展開左側欄" class="iconfont"></i> 6 </div> 7 8 <ul class="layui-nav right" lay-filter=""> 9 <li class="layui-nav-item"> 10 <a href="javascript:;"> 11 <img src="~/Content/Layui/images/bg.png" class="layui-nav-img" /> 12 @ViewBag.UserName 13 </a> 14 <dl class="layui-nav-child"> 15 <!-- 二級菜單 --> 16 <dd><a onClick="x_admin_show('個人信息','http://www.baidu.com')">個人信息</a></dd> 17 <dd><a onClick="x_admin_show('切換帳號','http://www.baidu.com')">切換帳號</a></dd> 18 <dd><a href="/Login/Login">退出</a></dd> 19 </dl> 20 </li> 21 <li class="layui-nav-item to-index"><a href="#">前臺首頁</a></li> 22 </ul> 23 24 </div> 25 <!-- 頂部結束 --> 26 <!-- 中部開始 --> 27 <!-- 左側菜單開始 --> 28 <div class="left-nav"> 29 <div id="side-nav"> 30 31 </div> 32 </div> 33 <!-- <div class="x-slide_left"></div> --> 34 <!-- 左側菜單結束 --> 35 <!-- 右側主體開始 --> 36 <div class="page-content"> 37 <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false"> 38 <ul class="layui-tab-title"> 39 <li class="home"><i class="layui-icon"></i>我的桌面</li> 40 </ul> 41 <div class="layui-tab-content"> 42 <div class="layui-tab-item layui-show"> 43 <iframe src='/Welcome/Welcome' frameborder="0" scrolling="yes" class="x-iframe"></iframe> 44 </div> 45 </div> 46 </div> 47 </div> 48 <div class="page-content-bg"></div> 49 <!-- 右側主體結束 --> 50 <!-- 中部結束 --> 51 <!-- 底部開始 --> 52 <!--<div class="footer"> 53 <div class="copyright">Copyright ©2019 L-admin v2.3 All Rights Reserved</div> 54 </div>--> 55 <!-- 底部結束 --> 56 <script> 57 $(function () { 58 $.ajax({ 59 60 url: window.location.protocol + '//' + window.location.host + '/Home/Menu', 61 data: null, 62 type: 'post', 63 dataType: 'json', 64 async: true, 65 success: function (res) { 66 console.log(res); 67 if (res != null) { 68 var obj1 = eval(res); 69 70 alert(obj1[2].Url); 71 var comIocn = ''; 72 var data = [ 73 { 74 menuName: obj1[0].Name, 75 icon: obj1[0].Iocn , 76 iconRight: comIocn, 77 childs: [ 78 { 79 menuName: obj1[0].Children[0].Name, 80 menuUrl: obj1[0].Children[0].Url, 81 icon: comIocn 82 }, 83 { 84 menuName: obj1[0].Children[1].Name, 85 menuUrl: obj1[0].Children[1].Url, 86 icon: comIocn 87 }, 88 ] 89 }, 90 { 91 menuName: obj1[1].Name, 92 icon: obj1[1].Iocn , 93 iconRight: comIocn, 94 childs: [ 95 { 96 menuName: obj1[1].Children[0].Name, 97 menuUrl: obj1[1].Children[0].Url, 98 icon: comIocn 99 }, 100 { 101 menuName: obj1[1].Children[1].Name, 102 menuUrl: obj1[1].Children[1].Url, 103 icon: comIocn 104 }, 105 { 106 menuName: obj1[1].Children[2].Name, 107 menuUrl: obj1[1].Children[2].Url, 108 icon: comIocn 109 } 110 111 ] 112 113 }, 114 115 { 116 menuName: obj1[3].Name, 117 icon: obj1[3].Iocn , 118 iconRight: comIocn, 119 childs: [ 120 121 { 122 menuName: obj1[3].Children[0].Name, 123 menuUrl: obj1[3].Children[0].Url, 124 icon: comIocn 125 } 126 ] 127 128 }, 129 { 130 menuName: obj1[4].Name, 131 icon: obj1[4].Iocn , 132 iconRight: comIocn, 133 childs: [ 134 135 { 136 menuName: obj1[4].Children[0].Name, 137 menuUrl: obj1[4].Children[0].Url, 138 icon: comIocn 139 }, 140 141 { 142 menuName: obj1[4].Children[1].Name, 143 menuUrl: obj1[4].Children[1].Url, 144 icon: comIocn 145 } 146 ] 147 148 }, 149 { 150 menuName: obj1[5].Name, 151 icon: obj1[5].Iocn , 152 iconRight: comIocn, 153 childs: [ 154 155 { 156 menuName: obj1[5].Children[0].Name, 157 menuUrl: obj1[5].Children[0].Url, 158 icon: comIocn 159 }, 160 161 { 162 menuName: obj1[5].Children[1].Name, 163 menuUrl: obj1[5].Children[1].Url, 164 icon: comIocn 165 }, 166 { 167 menuName: obj1[5].Children[2].Name, 168 menuUrl: obj1[5].Children[2].Url, 169 icon: comIocn 170 } 171 ] 172 173 }, 174 { 175 menuName: obj1[6].Name, 176 icon: obj1[6].Iocn , 177 iconRight: comIocn, 178 childs: [ 179 180 { 181 menuName: obj1[6].Children[0].Name, 182 menuUrl: obj1[6].Children[0].Url, 183 icon: comIocn 184 }, 185 186 { 187 menuName: obj1[6].Children[1].Name, 188 menuUrl: obj1[6].Children[1].Url, 189 icon: comIocn 190 } 191 ] 192 193 }, 194 195 { 196 menuName: obj1[2].Name, 197 icon: obj1[2].Iocn, 198 iconRight: comIocn, 199 menuUrl: obj1[2].Url, 200 childs: [ 201 202 203 ] 204 205 }, 206 207 ] 208 //觸發事件 209 var tab = { 210 tabAdd: function (title, url, id) { 211 //新增一個Tab項 212 element.tabAdd('xbs_tab', { 213 title: title 214 , content: '<iframe tab-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="x-iframe"></iframe>' 215 , id: id 216 }) 217 } 218 , tabDelete: function (othis) { 219 //刪除指定Tab項 220 element.tabDelete('xbs_tab', '44'); //刪除：“管理” 221 222 othis.addClass('layui-btn-disabled'); 223 } 224 , tabChange: function (id) { 225 //切換到指定Tab項 226 element.tabChange('xbs_tab', id); //切換到：管理 227 } 228 }; 229 230 231 var html = '<ul id="nav">'; 232 var randerTree = function (d) { 233 for (var i = 0; i < d.length; i++) { 234 if (d[i].menuUrl == undefined || d[i].menuUrl.length < 0) { 235 html += '<li><a href="javascript:;"><i class="iconfont">' + d[i].icon + '</i><cite>' + d[i].menuName + '</cite><i class="iconfont nav_right">' + d[i].iconRight + '</i></a><ul class="sub-menu">' 236 } else { 237 html += '<li><a _href="' + d[i].menuUrl + '"><i class="iconfont">' + d[i].icon + '</i><cite>' + d[i].menuName + '</cite></a></li>' 238 if (i == d.length) { 239 html += '</ul>' 240 } 241 } 242 if (d[i].childs != undefined) { 243 randerTree(d[i].childs); 244 html += '</ul>' 245 } 246 247 } 248 249 return html; 250 } 251 var innerhtml = randerTree(data) + '</ul>'; 252 253 $('#side-nav').append(innerhtml); 254 255 $('#nav li').click(function (event) { 256 257 if ($(this).children('.sub-menu').length) { 258 if ($(this).hasClass('open')) { 259 $(this).removeClass('open'); 260 $(this).find('.nav_right').html(''); 261 $(this).children('.sub-menu').stop().slideUp(); 262 $(this).siblings().children('.sub-menu').slideUp(); 263 264 } else { 265 $(this).addClass('open'); 266 $(this).children('a').find('.nav_right').html(''); 267 $(this).children('.sub-menu').stop().slideDown(); 268 $(this).siblings().children('.sub-menu').stop().slideUp(); 269 $(this).siblings().find('.nav_right').html(''); 270 $(this).siblings().removeClass('open'); 271 } 272 } else { 273 274 var url = $(this).children('a').attr('_href'); 275 var title = $(this).find('cite').html(); 276 var index = $('.left-nav #nav li').index($(this)); 277 278 for (var i = 0; i < $('.x-iframe').length; i++) { 279 if ($('.x-iframe').eq(i).attr('tab-id') == index + 1) { 280 tab.tabChange(index + 1); 281 event.stopPropagation(); 282 return; 283 } 284 }; 285 tab.tabAdd(title, url, index + 1); 286 tab.tabChange(index + 1); 287 } 288 event.stopPropagation(); 289 }) 290 } 291 292 293 } 294 }); 295 296 </script>
後端：
1 public JsonResult Menu() 2 { 3 List<TreeModel> ltm = Menus.GetTrees(); 4 return Json(JsonConvert.SerializeObject(ltm)); 5 } 6 7 8 public List<PersonnelManagementCommon.Models.TreeModel> GetTrees() 9 { 10 List<Menus> listQuery = GetModelList().ToList<Menus>(); 11 List<Menus> me = listQuery.Where(t => t.ParentId == null).ToList<Menus>(); 12 List<Menus> pare = listQuery.Where(t => t.ParentId != null).ToList<Menus>(); 13 if (me == null) 14 { 15 return null; 16 } 17 List<Menus> Lme = me.ToList<Menus>(); 18 List<PersonnelManagementCommon.Models.TreeModel> tm = new List<PersonnelManagementCommon.Models.TreeModel>(); 19 foreach (Menus item in Lme) 20 { 21 PersonnelManagementCommon.Models.TreeModel tms = new PersonnelManagementCommon.Models.TreeModel(); 22 tms.Id = item.ID; 23 tms.Name = item.Name; 24 tms.Url = item.Url; 25 tms.Iocn = item.Iocn; 26 tms.ParentId = item.ParentId; 27 List<PersonnelManagementCommon.Models.TreeModel> child = new List<PersonnelManagementCommon.Models.TreeModel>(); 28 GetTree(pare, child, item.Code); 29 tms.Children = child; 30 tm.Add(tms); 31 } 32 33 return tm; 34 } 35 public void GetTree(List<Menus> list, List<PersonnelManagementCommon.Models.TreeModel> listTree, string parentId) 36 { 37 foreach (Menus item in list) 38 { 39 if (item.ParentId == parentId) 40 { 41 PersonnelManagementCommon.Models.TreeModel tm = new PersonnelManagementCommon.Models.TreeModel(); 42 tm.Id = item.ID; 43 tm.ParentId = item.ParentId; 44 tm.Name = item.Name; 45 tm.Url = item.Url; 46 tm.Iocn = item.Iocn; 47 tm.Children = new List<PersonnelManagementCommon.Models.TreeModel>(); 48 listTree.Add(tm); 49 GetTree(list, tm.Children, tm.Id.ToString()); 50 } 51 } 52 } 53 54 55 public class TreeModel 56 { 57 public int Id { get; set; } 58 public string ParentId { get; set; } 59 public string Name { get; set; } 60 public string Url { get; set; } 61 62 public string Iocn { get; set; } 63 public List<TreeModel> Children { get; set; } 64 65 }