layui 树型菜单绑定数据

侧边菜单栏

页面：

  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">&#xe699;</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">&#xe68e;</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 = '&#xe6a7;';
 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('&#xe6a7;');
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('&#xe6a6;');
267                                     $(this).children('.sub-menu').stop().slideDown();
268                                     $(this).siblings().children('.sub-menu').stop().slideUp();
269                                     $(this).siblings().find('.nav_right').html('&#xe6a7;');
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>

View Code

后端：

 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     }

View Code

相关阅读:
GPU上的基本线性代数
 NVIDIA数据中心深度学习产品性能
 GeforceRTX系列参数对比
 NVIDIA CUDA-X AI
NVIDIA 认证系统
 汉字手写训练和识别
 动态表单工作量给后端
 机器学习PAL数据可视化
 越是向前越受阻力
 Caused by: java.lang.IllegalStateException: java.lang.IllegalStateException: Cannot emit more than one data
原文地址：https://www.cnblogs.com/BabyRui/p/13895489.html