前言

  • 本篇幅将对系统的菜单管理模块进行说明,系统的菜单采用树形结构,这样可以更好地方便层级设计和查看。本示例将说明如何通过EntityFramework读取递归的菜单树形结构,以及结合EasyUI的treegrid在Asp.net MVC上显示树形菜单和管理操作。

Easyui-treegrid的使用方法

  • 首先我们来看一下treegrid的基本使用方法。很简单,和easyui-datagrid差不多。
<table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"
data-options="
url: 'treegrid_data1.json',
method: 'get',
rownumbers: true,
idField: 'id',
treeField: 'name' ">
<thead>
<tr>
<th data-options="field:'name'" width="">Name</th>
<th data-options="field:'size'" width="" align="right">Size</th>
<th data-options="field:'date'" width="">Modified Date</th>
</tr>
</thead>
</table>
  • 之前说过data-options可以通过GET方式发送异步请求,读取json数据后就可以加载数据呢。Treegrid中的data-options有两个关键参数idField(主键字段)、treeField(显示字段),上面很明显是利id作为主键字段,name作为显示字段。我们查看一下treegrid_data1.json文件究竟是怎样的格式。 
[{
"id":,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":,
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010"
},{
"id":,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010"
}]
},{
"id":,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009"
},{
"id":,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009"
},{
"id":,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009"
}]
}]
},{
"id":,
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"children":[{
"id":,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009"
},{
"id":,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010"
},{
"id":,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005"
}]
}]
}]
  • 从treegrid_data1.json格式上可以看出还有一个很重要的属性,那就是children,所有的递归的子元素都会包含其中。这和我们的EntityFramework中的对象设计是一致的。所以接下来我们只要通过EntityFramework读取数据后,再利用ASP.NET MVC的json机制序列化出我们需要的json格式就可以绑定到Treegrid上呢。

示例中的treegrid使用方法

  • 首先,我们定义需要的ASP.NET MVC的Model,treegrid绑定的json数据就是按照此属性来序列化的。参考代码如下:
 public class mod_S_Menu
{
public long ID { get; set; }
public long? PID { get; set; }
public string MenuName { get; set; }
public string Icon { get; set; }
public string Link { get; set; }
public string IsUse { get; set; }
public int Level { get; set; }
public int SerialNO { get; set; }
public string Remark { get; set; }
public List<mod_S_Menu> children { get; set; }
}
  • 接下来我们定义菜单操作界面视图MenuList,其中绑定easyui-Treegrid的参考代码如下:
<table id="dg" class="easyui-treegrid" toolbar="#toolbar" style=" height:500px;" fitcolumns="true" singleselect="true"
fit="true"
data-options="
url: '/System/GetMenus',
method: 'get',
lines: true,
rownumbers: true,
idField: 'ID',
treeField: 'MenuName'
">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th> <th data-options="field:'ID'" width="" hidden="true">
主键ID
</th>
<th data-options="field:'MenuName'" width="">
菜单名称
</th>
<th data-options="field:'Icon'" width="">
菜单图标
</th>
<th data-options="field:'Link'" width="">
菜单链接
</th>
<th data-options="field:'IsUse'" width="">
是否启用
</th>
<th data-options="field:'SerialNO'" width="">
排序号
</th>
<th data-options="field:'Remark'" width="">
备注
</th>
<th data-options="field:'PID'" width="" hidden="true">
父级菜单
</th>
</tr>
</thead>
</table>
  • 接下来,我们通过EntityFramework读取数据,再在SystemController中进行处理,之前说过使用延迟加载会一次性加载出所有与对象相关联的对象。由于S_Menu中的父级菜单ID是子菜单的外键,所以读取数据变得很简单呢。参考代码如下:
    public List<S_Menu> GetInfo()
{
context.Configuration.ProxyCreationEnabled = true;
context.Configuration.LazyLoadingEnabled = true; List<S_Menu> listData = new List<S_Menu>();
listData = context.S_Menus.Where(x => x.PID.Equals(null)).OrderBy(x => x.SerialNO).ToList();
return listData; }
  • 最后,处理获得的GetInfo集合,因为我们需要序列化出treegrid的识别的json格式,而且我们也希望一次性序列化集合,所以我们可以使用递归的方式来绑定我们需要的数据格式(其实此时的EntityFramework加载的菜单体现的也是一种递归方式)。参考代码如下: 
  public ActionResult GetMenus(string page, string rows)
{
List<S_Menu> listDataParent = IS_Menu.GetInfo();
List<mod_S_Menu> DataModel = new List<mod_S_Menu>();
foreach (var item in listDataParent)
{
mod_S_Menu model = new mod_S_Menu();
model.ID = item.ID;
model.PID = item.PID;
model.Icon = item.Icon;
model.IsUse = item.IsUse;
model.Level = item.Level;
model.Link = item.Link;
model.MenuName = item.MenuName;
model.SerialNO = item.SerialNO;
model.Remark = item.Remark;
model.children = new List<mod_S_Menu>(); GetRecursion(model, item); //递归
DataModel.Add(model);
}
return Json(DataModel, JsonRequestBehavior.AllowGet);
} protected void GetRecursion(mod_S_Menu model,S_Menu item)
{
var children = item.Children.OrderBy(x => x.SerialNO).ToList();
foreach (var childitem in children)
{
mod_S_Menu childmodel = new mod_S_Menu();
childmodel.ID = childitem.ID;
childmodel.PID = childitem.PID;
childmodel.Icon = childitem.Icon;
childmodel.IsUse = childitem.IsUse;
childmodel.Level = childitem.Level;
childmodel.Link = childitem.Link;
childmodel.MenuName = childitem.MenuName;
childmodel.SerialNO = childitem.SerialNO;
childmodel.Remark = childitem.Remark;
childmodel.children = new List<mod_S_Menu>(); model.children.Add(childmodel); GetRecursion(childmodel, childitem); //递归
} }
  • 到此,我们通过treegrid加载出我们想要的树形结构数据呢。执行以下数据脚本:
INSERT [dbo].[S_Menu] ([ID], [MenuName], [Icon], [Link], [IsUse], [Level], [SerialNO], [PID], [Remark]) VALUES (, N'系统权限管理', N'icon-large-chart', N'', N'是', , , NULL, N'设置权限管理的以及菜单')
INSERT [dbo].[S_Menu] ([ID], [MenuName], [Icon], [Link], [IsUse], [Level], [SerialNO], [PID], [Remark]) VALUES (, N'基本数据设置', N'asd', N'/bb/sss', N'是', , , NULL, N'基础数据管理')
INSERT [dbo].[S_Menu] ([ID], [MenuName], [Icon], [Link], [IsUse], [Level], [SerialNO], [PID], [Remark]) VALUES (, N'用户管理', N'icon-large-picture', N'/System/UserList', N'是', , , , N'asd')
INSERT [dbo].[S_Menu] ([ID], [MenuName], [Icon], [Link], [IsUse], [Level], [SerialNO], [PID], [Remark]) VALUES (, N'角色管理', N'icon-large-clipart', N'/System/RoleList', N'是', , , , NULL)
INSERT [dbo].[S_Menu] ([ID], [MenuName], [Icon], [Link], [IsUse], [Level], [SerialNO], [PID], [Remark]) VALUES (, N'test1', N'test1', N'test1', N'是', , , NULL, N'asadas')
INSERT [dbo].[S_Menu] ([ID], [MenuName], [Icon], [Link], [IsUse], [Level], [SerialNO], [PID], [Remark]) VALUES (, N'test12', N'test12', N'test12', N'是', , , , N'assadasd')
INSERT [dbo].[S_Menu] ([ID], [MenuName], [Icon], [Link], [IsUse], [Level], [SerialNO], [PID], [Remark]) VALUES (, N'菜单管理', N'icon-large-shapes', N'/System/MenuList', N'是', , , , NULL)
INSERT [dbo].[S_Menu] ([ID], [MenuName], [Icon], [Link], [IsUse], [Level], [SerialNO], [PID], [Remark]) VALUES (, N'权限设置', N'icon-large-smartart', N'/System/PermitList', N'是', , , , NULL)
INSERT [dbo].[S_Menu] ([ID], [MenuName], [Icon], [Link], [IsUse], [Level], [SerialNO], [PID], [Remark]) VALUES (, N'承包合同数据录入', N'ss', N'/ss/ssss', N'是', , , , N'线程')
  • 运行效果如下:

  

EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(八)的更多相关文章

  1. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(一)

    前言 本系列源自对EF6 CodeFirst的探索,但后来发现在自己项目中构建的时候遇到了一些问题以及一些解决方法,因此想作为一个系列写下来. 本系列并不是教你怎么做架构设计,但可以参照一下里面的方法 ...

  2. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(六)

    前言 在接下来的篇幅里将对系统的模块功能进行编写.主要以代码实现为主.这一篇我们需要完成系统模块“角色管理”的相关功能.完成后可以对系统框架结构有进一步了解. Abstract层 之前说过,Abstr ...

  3. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(完)

    前言 这一篇是本系列的最后一篇,虽然示例讲到这里就停止呢,但对于这些技术的学习远不能停止.虽然本示例讲的比较基础,但是正如我第一篇说到的,这个系列的目的不是说一些高端的架构设计,而是作为一个入门级,对 ...

  4. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(七)

    前言 上一篇文章我们完成了系统角色管理的基本功能实现,也对系统层次结构进行了了解.这一篇我们将继续对系统的用户管理模块进行代码编写.代码没有做封装,所以大部分的逻辑代码都是相通的,只是在一些前端的细节 ...

  5. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(四)

    前言 这一篇,我们终于到了讲解Entity Framework CodeFirst 的时刻了,首先创建实体对象模型,然后会通过配置Fluent API的方式来对实体对象模型进行完整的数据库映射操作. ...

  6. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(三)

    前言 在上一篇中,我们依靠着EasyUI强大的前端布局特性把前端登录界面和主界面给搭建完成了.这一篇我们就要尝试着把整个解决方案部署到云端呢,也就是Visual Studio Online(TFVC) ...

  7. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(二)

    前言 写完第一篇后,我一直在想接下来应该从哪一方面开始讲.后来我觉得不用那么死板的把每一个课程和大纲都列出来吧,毕竟我又不是教书的,呵呵...我觉得就像做实验一样,我们一部分一部分的完成,最后总个结果 ...

  8. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(九)

    前言 这一篇我们将完成系统的权限设置功能以及不同角色用户登录系统后动态加载菜单.注意:此示例权限只针对菜单级,如果园友需要更复杂的系统权限设置,可以拓展到按钮级或属性级. 用户的登录采用Form认证来 ...

  9. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(五)

    前言 在编写代码的时候,我遇到了很多关于EntityFramework6的疑问,所以现在就提前把这些问题列出来做一下解答,以便在以后的代码编写过程中减少不必要的Bug. EntityFramework ...

随机推荐

  1. javascript数据属性和访问器属性

    var book={ _year:2004, edition:1};Object.defineProperty(book,"year",{ get:function(){ retu ...

  2. printf(),类型修饰符

    %s, 将输出作为字符串,要一直找到结束符'\0',这样在内存访问中,如果访问的是char 类型的,就会出现,从起始位置一直访问把整个申请的内存空间都遍历没有找到'\0',就会出现segment fa ...

  3. iOS中事件传递过程

    iOS中,UIApplication管理着一个事件的队列,当系统获取用户的点击或滑动等事件后,就会将这些事件按顺序插入UIApplication管理的这个队里中,UIApplication再从这个队列 ...

  4. python之路3:

    class set(object): """ set() -> new empty set object set(iterable) -> new set o ...

  5. MyEclipse中的SVN操作手册

    原文出处:http://blog.sina.com.cn/s/blog_8a3d83320100zhmp.html 1.导入项目 点击工具栏上的[File-Import],进入下图 (如果你的对话框中 ...

  6. Failed to load resource: the server responded with a status of 500 (Internal Server Error)

    错误提示: 原因: MIME类型错误. 之前添加json.woff.woff2映射,更换系统(Win7升Win10)后配置失效,在webconfig中删除映射即可,因为Win10自带上面3个MIME映 ...

  7. lightBox灯箱效果

    最近想做一个类似QQ空间相册,点击照片会出现一个遮罩层,然后显示照片,可以左右切换照片,上网查了,原来叫灯箱效果,于是自己也写了一个简单的灯箱效果,并进行了简单封装,封装得不是很完善,后面还需要改进, ...

  8. zookeeper 故障重连机制

    一.连接多个服务器,用逗号隔开 如果在连接时候zk服务器宕机 To create a client session the application code must provide a connec ...

  9. (十七)linux网络命令 vconfig ifconfig

    增删VLAN    vconfig add eth0 10    vconfig rem eth0.10重启网卡    ifconfig eth0.101 up    ifconfig eth0.10 ...

  10. IOS判断设备是否已越狱

    转自:http://www.cnblogs.com/supercheng/archive/2012/12/05/2804166.html - (BOOL)isJailbroken { BOOL jai ...