JQuery Easy UI Treegrid学习
最近在学习Jquery EasyUI Treegrid，关于递归生成菜单的问题很是上火，本来想法挺简单使用一个ViewModel用来辅助实体Model递归生成菜单。结果是因为自己太菜了，最终没能成功(递归学的不好，伤不起)。最终经过一番努力还是做出来(主要代码还是Copy过来的)。最终效果图如下(网上找了好多都没有找到类似的，就此送给像我这样的菜鸟。大牛们就请路过吧)
打字太慢点，直接帖code吧
前端主要代码:
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" content="width=device-width" /> 6 <link href="~/Content/themes/default/easyui.css" rel="stylesheet" /> 7 <link href="~/Content/themes/icon.css" rel="stylesheet" /> 8 <script src="~/Scripts/jquery-1.8.2.min.js"></script> 9 <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 10 <script src="~/Scripts/jquery.easyui.min.js"></script> 11 <script src="~/Scripts/easyui-lang-zh_CN.js"></script> 12 <title>导航管理</title> 13 <style> 14 .ftitle { font-size: 14px; font-weight: bold; padding: 5px 0; margin-bottom: 10px; border-bottom: 1px solid #ccc; } 15 .fitem { margin-bottom: 5px; } 16 .fitem label { display: inline-block; width: 80px; } 17 .fitem input { width: 160px; } 18 </style> 19 <script> 20 //显示添加对话框 21 function adddia() { 22 var row = $('#dg').treegrid('getSelected'); 23 if (row) { 24 $('#tipcont').text('确定要添加子菜单吗'); 25 $('#tipdia').dialog('open'); 26 } else { 27 $('#addv').dialog('open').dialog('setTitle', '添加导航'); 28 } 29 } 30 //显示修改对话框 31 function edtdia() { 32 var row = $('#dg').treegrid('getSelected'); 33 if (row) { 34 $('#edtnid').val(row.Id); 35 $('#edtnpid').val(row.NavPId); 36 $('#edt_navn').val(row.NavName); 37 $('#edt_navl').val(row.NavLnk); 38 $('#edtdv').dialog('open').dialog('setTitle', '修改导航'); 39 } 40 } 41 //添加成功后 42 function addSucc(res) { 43 if (res == 'ok') { 44 $('#addform').reset(); 45 $('#addv').dialog('close'); 46 $('#dg').reload(); 47 } 48 } 49 //修改成功后 50 function edtSucc() { } 51 </script> 52 </head> 53 <body> 54 <div class="main"> 55 <table id="dg" title="导航信息管理" class="easyui-treegrid" style="width:700px; height: 450px;" toolbar="#toolbar" data-options="url: '/Home/GetNaves', method:'get', lines: true, rownumbers: true, idField:'Id', treeField: 'NavName'"> 56 <thead> 57 <tr> 58 <th data-options="field:'Id', hidden: true">编号</th> 59 <th data-options="field:'NavName'" width="150">导航名称</th> 60 <th data-options="field:'NavLnk'" width="200">导航链接</th> 61 <th data-options="field:'NavPId', hidden: true">navpar</th> 62 </tr> 63 </thead> 64 </table> 65 <div id="toolbar"> 66 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="adddia()">添加链接</a> 67 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="edtdia()">修改链接</a> 68 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="delNav()">删除链接</a> 69 </div> 70 </div> 71 @* 添加对话框 *@ 72 <div id="addv" class="easyui-dialog" style="width:400px; height: 200px; padding: 10px 20px;" closed="true" data-options="modal: true, buttons:[{ 73 text: '确定', 74 iconCls: 'icon-ok', 75 handler: function(){ 76 $('#addform').submit(); 77 } 78 }, { 79 text: '取消', 80 iconCls: 'icon-cancel', 81 handler: function(){ 82 $('#addv').dialog('close'); 83 } 84 }]"> 85 <div class="ftitle">添加导航</div> 86 @using (Ajax.BeginForm("AddNav", "Home", new AjaxOptions { OnSuccess = "addSucc", HttpMethod = "post" }, new { id = "addform" })) 87 { 88 <div class="fitem"> 89 <label>导航名称：</label> 90 <input type="text" name="NavName" class="easyui-textbox" data-options="required: true" /> 91 </div> 92 <div class="fitem"> 93 <label>导航链接：</label> 94 <input type="text" name="NavLnk" class="easyui-textbox" data-options="required: true" /> 95 </div> 96 <input type="hidden" id="adpid" name="NavPid" value="0" /> 97 } 98 </div> 99 @* 修改对话框 *@ 100 <div id="edtdv" class="easyui-dialog" style="width:400px; height: 200px; padding: 10px 20px;" closed="true" data-options="modal:true, buttons:[{ 101 text: '确定', 102 iconCls: 'icon-ok', 103 handler: function(){ 104 addNav(); 105 } 106 }, { 107 text: '取消', 108 iconCls: 'icon-cancel', 109 handler: function(){ 110 $('#edtdv').dialog('close'); 111 } 112 }]"> 113 <div class="ftitle">修改导航</div> 114 @using (Ajax.BeginForm("AddNav", "Home", new AjaxOptions { OnSuccess = "edtSucc", HttpMethod = "post" }, new { id = "addform" })) 115 { 116 <div class="fitem"> 117 <label>导航名称：</label> 118 <input type="text" id="edt_navn" name="NavName" class="easyui-textbox" data-options="required: true" /> 119 </div> 120 <div class="fitem"> 121 <label>导航链接：</label> 122 <input type="text" id="edt_navl" name="NavLnk" class="easyui-textbox" data-options="required: true" /> 123 </div> 124 <input type="hidden" id="edtnid" name="Id" value="" /> 125 <input type="hidden" id="edtnpid" name="NavPid" value="" /> 126 } 127 </div> 128 @* 消息提示对话框 *@ 129 <div id="tipdia" class="easyui-dialog" closed="true" data-options=" 130 title:'消息', 131 width: 300, 132 height: 120, 133 modal: true, 134 buttons:[{ 135 text: '确定', 136 iconCls: 'icon-ok', 137 handler: function(){ 138 var row = $('#dg').treegrid('getSelected'); 139 var rid = row.Id; 140 $('#adpid').val(rid); 141 $('#addv').dialog('open').dialog('setTitle', '添加导航'); 142 $('#tipdia').dialog('close'); 143 } 144 }, { 145 text: '取消', 146 iconCls: 'icon-cancel', 147 handler: function(){ 148 $('#adpid').val(0); 149 $('#addv').dialog('open').dialog('setTitle', '添加导航'); 150 $('#tipdia').dialog('close'); 151 } 152 }]"> 153 <div id="tipcont"></div> 154 </div> 155 </body> 156 </html>
数据库
code：
1 USE [Test] 2 GO 3 /****** Object: Table [dbo].[Navigates] Script Date: 2014/9/5 10:46:32 ******/ 4 SET ANSI_NULLS ON 5 GO 6 SET QUOTED_IDENTIFIER ON 7 GO 8 CREATE TABLE [dbo].[Navigates]( 9 [Id] [int] IDENTITY(1,1) NOT NULL, 10 [NavName] [nvarchar](20) NOT NULL, 11 [NavLnk] [nvarchar](50) NOT NULL, 12 [NavPId] [int] NOT NULL, 13 CONSTRAINT [PK_Navigates] PRIMARY KEY CLUSTERED 14 ( 15 [Id] ASC 16 )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] 17 ) ON [PRIMARY] 18 19 GO 20 SET IDENTITY_INSERT [dbo].[Navigates] ON 21 22 GO 23 INSERT [dbo].[Navigates] ([Id], [NavName], [NavLnk], [NavPId]) VALUES (1, N'首页', N'/Home/Index', 0) 24 GO 25 INSERT [dbo].[Navigates] ([Id], [NavName], [NavLnk], [NavPId]) VALUES (2, N'娱乐', N'/Home/News', 1) 26 GO 27 INSERT [dbo].[Navigates] ([Id], [NavName], [NavLnk], [NavPId]) VALUES (3, N'新闻', N'/Home/News', 0) 28 GO 29 INSERT [dbo].[Navigates] ([Id], [NavName], [NavLnk], [NavPId]) VALUES (4, N'大陆', N'/Home/Land', 2) 30 GO 31 INSERT [dbo].[Navigates] ([Id], [NavName], [NavLnk], [NavPId]) VALUES (5, N'国际新闻', N'/Home/For', 3) 32 GO 33 INSERT [dbo].[Navigates] ([Id], [NavName], [NavLnk], [NavPId]) VALUES (6, N'体育', N'/Home/Sports', 1) 34 GO 35 SET IDENTITY_INSERT [dbo].[Navigates] OFF 36 GO
后台代码：
1 public class HomeController : Controller 2 { 3 /// <summary> 4 /// 导航服务 5 /// </summary> 6 INavigatesService navService = new NavigatesService(); 7 8 #region 展示页 +ActionResult Index() 9 /// <summary> 10 /// 展示页 11 /// </summary> 12 /// <returns></returns> 13 public ActionResult Index() 14 { 15 return View(); 16 } 17 #endregion 18 19 #region 获得导航数据 +ActionResult GetNaves() 20 /// <summary> 21 /// 获得导航数据 22 /// </summary> 23 /// <returns></returns> 24 public ActionResult GetNaves() 25 { 26 //获得所有的菜单 27 List<Navigates> rootlist = navService.GetEntities(n => true).ToList(); 28 return Content(GenerateMenu(rootlist)); 29 } 30 #endregion 31 32 #region 添加导航 +ActionResult AddNav(Navigates nav) 33 /// <summary> 34 /// 添加导航 35 /// </summary> 36 /// <param name="nav">导航实体</param> 37 /// <returns></returns> 38 public ActionResult AddNav(Navigates nav) 39 { 40 navService.AddEntity(nav); 41 if (nav.Id > 0) 42 { 43 return Content("ok"); 44 } 45 return Content("err"); 46 } 47 #endregion 48 49 /************* Json Menu ******************/ 50 51 #region 生成菜单 -string GenerateMenu(List<Navigates> listAll) 52 /// <summary> 53 /// 生成菜单 54 /// </summary> 55 /// <param name="listAll">所有菜单项</param> 56 /// <returns></returns> 57 private string GenerateMenu(List<Navigates> listAll) 58 { 59 StringBuilder sb = new StringBuilder(); 60 sb.Append("["); 61 //获得根节点 62 List<Navigates> rootList = listAll.Where(n => n.NavPId == 0).ToList<Navigates>(); 63 foreach (Navigates root in rootList) 64 { 65 string js = CreateJsonString(root); 66 string children = ""; 67 children = RecuMenu(listAll, children, root.Id); 68 sb.Append("{" + string.Format(js, children) + "},"); //替换children:{0} 69 } 70 string res = sb.ToString(); 71 if (res.LastIndexOf(",") < 1) 72 { 73 //菜单项为空 (集合元素为0) 74 res += "]"; 75 } 76 else 77 { 78 //去掉最后一个, 79 res = res.Substring(0, res.Length - 1) + "]"; 80 } 81 return res.Replace(",children:[]", ""); 82 } 83 #endregion 84 85 #region 递归生成子菜单 -string RecuMenu(List<Navigates> listAll, string children, int pId) 86 /// <summary> 87 /// 递归生成子菜单 88 /// </summary> 89 /// <param name="listAll">全部菜单</param> 90 /// <param name="children">子菜单字符串</param> 91 /// <param name="pId">父菜单id</param> 92 /// <returns></returns> 93 private string RecuMenu(List<Navigates> listAll, string children, int pId) 94 { 95 StringBuilder sbChilds = new StringBuilder(); 96 sbChilds.Append("["); 97 List<Navigates> childsList = listAll.Where(n => n.NavPId == pId).ToList<Navigates>(); 98 foreach (Navigates item in childsList) 99 { 100 string js = CreateJsonString(item); 101 string cd = string.Empty; 102 cd = RecuMenu(listAll, cd, item.Id); 103 sbChilds.Append("{" + string.Format(js, cd) + "},"); 104 } 105 string res = sbChilds.ToString(); 106 if (res.LastIndexOf(",") < 1) 107 { 108 res += "]"; 109 } 110 else 111 { 112 res = res.Substring(0, res.Length - 1) + "]"; 113 } 114 return res; 115 } 116 #endregion 117 118 #region 生成json字符串 -string CreateJsonString(Navigates nav) 119 /// <summary> 120 /// 生成json字符串 121 /// </summary> 122 /// <param name="nav">菜单项实体</param> 123 /// <returns></returns> 124 private string CreateJsonString(Navigates nav) 125 { 126 string json = "\"Id\":" + nav.Id + ",\"NavName\":\"" + nav.NavName + "\",\"NavLnk\":\"" + nav.NavLnk + "\",\"NavPId\":" + nav.NavPId + ",\"children\":{0}"; 127 return json; 128 } 129 #endregion 130 }
主要代码来源：http://www.2cto.com/kf/201310/250013.html
在此谢谢那位大牛
