MVC+Nhibernate+jquery+easyui递归实现多级菜单
1.新建访问的控制器动作返回视图,在视图中使用easyui的treegrid插件来得到后台得到的json数据显示多级菜单
public ActionResult Menu()
{
return View();
}
视图:
@{
ViewBag.Title = "Menu";
Layout = "~/Views/Shared/_GridView.cshtml";
}
@section header{}
@section body{
<div id="dataGrid" class="easyui-layout" data-options="fit:true">
<table id="gridView"></table>
</div>
}
@section scripts{
<script src="~/Content/oa/scripts/xlayout.js"></script>
<script type="text/javascript">
$(function () {
alert()
load();
});
function load() {
$('#gridView').treegrid({
url: '/WxMenu/MenuGridView',
title: '微信菜单配置',
treeField: 'Text',
fit: true,
fitColumns: true,
idField: 'Id',
loadMsg: '数据正在加载中......',
sortName: 'Orderby',
sortOrder: 'asc',
pagination: true,
singleSelect: true,
pageSize: ,
pageNumber: ,
pageList: [, , , ],
queryParams: {},
rownumbers: true,
checkOnSelect: true,
selectOnCheck: true,
lines: true,
columns: [[
{ field: 'ck', checkbox: true, width: },
{ field: 'Text', title: '菜单名字', width: , align: 'left' },
{
field: 'MenuId', title: '菜单编码', width: , align: 'left',
formatter: function (value, row, index) {
return value == "-1" ? "" : value;
}
},
{
field: 'IsEnable', title: '有效', width: , align: 'center',
formatter: function (value, row, index) {
return "<span style=\"color:{1};\">{0}</span>".format(
value == "" ? "已启用" : "已禁用",
value == "" ? "green" : "red");
}
},
{ field: 'OrderBy', title: '排序号', width: , align: 'left' },
{
field: 'Target', title: '动作类型', width: , align: 'center',
formatter: function (value, row, index) {
switch (value) {
case 'view':
return "跳转URL";
case 'click':
return "点击推事件";
case 'scancode_push':
return "扫码推事件";
case 'scancode_waitmsg':
return "扫码推事件且弹出(消息接收中)提示框";
case 'pic_sysphoto':
return "弹出系统拍照发图";
case 'pic_photo_or_album':
return "弹出拍照或者相册发图";
case 'pic_weixin':
return "弹出微信相册发图器";
case 'location_select':
return "弹出地理位置选择器";
case 'media_id':
return "下发消息(除文本消息)";
case 'view_limited':
return "跳转图文消息URL";
}
}
},
{ field: 'Ico', title: 'MenuKey', width: , align: 'left' },
{ field: 'Url', title: '菜单URL', width: , align: 'left' }
]],
toolbar: [{
id: 'btnAdd',
text: '添加',
iconCls: 'icon-add',
handler: function () {
showWindow("添加菜单", "/OA/WeiXin/MenuEdit/0", , );
}
}, {
id: 'btnAdd',
text: '编辑',
iconCls: 'icon-edit',
handler: function () {
var row = $('#gridView').datagrid('getSelected');
if (!row) {
showMsg("系统提示", "请选择要编辑的行", true);
return;
}
if (row.Id == "") {
showMsg("系统提示", "此数据不能修改", true);
return;
}
showWindow("添加菜单", "/OA/WeiXin/MenuEdit/" + row.Id, , );
}
},
{
id: 'btnDelete',
text: '删除',
iconCls: 'icon-remove',
handler: function () {
var rows = $('#gridView').datagrid('getChecked');
if (!rows || rows.length == ) {
showMsg("系统提示", "请选择要删除的行", true);
return;
}
showConfirm('系统提示', '删除数据后将无法恢复,还确认删除吗?', function () {
var ids = new Array();
var isRoot = false;
$.each(rows, function (i, n) {
ids.push("'" + n.Id + "'");
isRoot = n.MenuId == "";
if (isRoot) return false;
});
if (isRoot) {
showMsg("系统提示", "菜单(微信公众平台菜单)不能删除!", true);
return;
}
showProcess(true, "系统提示", "正在删除中......");
setTimeout(function () {
$.ajax({
url: "/OA/WeiXin/MenuDelete",
data: { ids: ids.toString(",") },
dataType: "json",
type: "POST",
traditional: true,
success: function (result) {
showProcess(false);
if (result.Success) {
showMsg("系统提示", result.Message, false);
$('#gridView').datagrid('reload');
} else {
showMsg("系统提示", result.Message, true);
}
}
});
}, );
});
}
}, {
id: 'btnRefresh',
text: '更新',
iconCls: 'icon-reload',
handler: function () {
$('#gridView').treegrid('reload');
}
}, {
id: 'btnRefresh',
text: '发布到微信公众平台',
iconCls: 'icon-redo',
handler: function () {
$.ajax({
url: "/WxMenu/MenuToWeiXin",
data: {},
dataType: "json",
type: "POST",
traditional: true,
beforeSend: function () {
showProcess(true, "系统提示", "正发布到微信公众平台......");
},
error: function () {
},
success: function (result) {
showMsg("系统提示", result.Message, false);
},
complete: function () {
showProcess(false);
}
});
}
}],
onLoadSuccess: function () {
var pager = $('#gridView').treegrid('getPager');
pager.pagination({
beforePageText: '第',
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
buttons: []
});
}
});
}
function radWindowCallBackFn() {
showMsg("系统提示", "存盘成功!", false);
$('#gridView').treegrid('reload');
}
</script>}
2. 后台动作返回一个content()。
public ActionResult MenuGridView(int? page, int? rows, string sort = "", string order = "asc")
{
return Content(GetMenuGridTree());
}
3.通过GetMenuGridTree()函数来返回一个json对象:
public string GetMenuGridTree()
{
NHibernateHelper nhlper = new NHibernateHelper();
ISession session = nhlper.GetSession();
List<TreeModel> result = new List<TreeModel>();
List<TreeModel> children = new List<TreeModel>();
IEnumerable<WeiXinMenu> kinds = session.Query<WeiXinMenu>();
WeiXinMenu root = kinds.FirstOrDefault(c => c.ParentId == "-1");
GetMenuGridTree(kinds, children, "");
result.Add(new TreeModel
{
Id = root.Id.ToString(),
MenuId = root.MenuId,
Text = root.MenuName,
Url = root.MenuUrl,
ParentMenuId = root.ParentId.ToString(),
IsEnable = root.IsEnable,
OrderBy = root.OrderBy.ToString(),
Target = root.MenuType,
Ico = root.MenuKey,
children = children
});
return JsonConvert.SerializeObject(result);
}
其中NHibernateHelper是申明了一个Nhibernate的辅助类,用来建立一个isessionfactory(会话工厂),然后打开一个isession,如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using NHibernate;
using NHibernate.Cfg; namespace Data
{
public class NHibernateHelper
{
private ISessionFactory _sessionFactory;
public NHibernateHelper()
{
//创建ISessionFactory
_sessionFactory = GetSessionFactory();
}
public ISessionFactory GetSessionFactory()
{
//配置ISessionFactory
return (new Configuration()).Configure().BuildSessionFactory();
}
public ISession GetSession()
{
return _sessionFactory.OpenSession();
}
}
}
其中TreeModel类,是创建一个有递归子类的数据库存的菜单表的类。跟我们在Nhibernate中持久化实体的菜单类似,如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks; namespace Domain.OrmLib.Model
{
public class TreeModel
{
public string Id { get; set; }
public string MenuId { get; set; }
public string Text { get; set; }
public string Url { get; set; }
public string Ico { get; set; }
public string ParentMenuId { get; set; }
public string IsEnable { get; set; }
public string OrderBy { get; set; }
public string Target { get; set; }
public string IsStretch { get; set; }
public string IsEdit { get; set; }
public string IsDelete { get; set; }
public string Remark { get; set; }
public string state { get; set; }
public string iconCls { get; set; }
public List<TreeModel> children { get; set; }
} }
其中IEnumerable<WeiXinMenu> kinds = session.Query<WeiXinMenu>();这句就是通过Nhibernate的会话isession查询到并枚举我们的实体WeiXinMenu。先把root根部的实体查询出来。
GetMenuGridTree()方法就是递归的调用得到剩下的chilren.
private void GetMenuGridTree(IEnumerable<WeiXinMenu> kinds, List<TreeModel> children, string pId)
{
foreach (WeiXinMenu p in kinds.Where(c => c.ParentId == pId).OrderBy(c => c.OrderBy))
{
TreeModel gt = new TreeModel();
gt.Id = p.Id.ToString();
gt.MenuId = p.MenuId;
gt.Text = p.MenuName;
gt.Url = p.MenuUrl;
gt.ParentMenuId = p.ParentId;
gt.IsEnable = p.IsEnable;
gt.OrderBy = p.OrderBy.ToString();
gt.Target = p.MenuType;
gt.Ico = p.MenuKey; List<TreeModel> childrenTmp = new List<TreeModel>(); GetMenuGridTree(kinds, childrenTmp, p.MenuId); /*
if (childrenTmp.Count > 0)
{
gt.state = "closed";
}
*/ gt.children = childrenTmp; children.Add(gt);
}
}
MVC+Nhibernate+jquery+easyui递归实现多级菜单的更多相关文章
- 年底小回顾(MVC+NHibernate+Jquery+JqueryUI——网站)
1.附:利用MVC+NHibernate+Jquery+JqueryUI这些技术可以做出一个比较好的前台+后台网站.下面是本人对这些技术的笔记,作为私人年底小结吧.呵呵 好久没写文章了,感觉下不了笔吐 ...
- JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...
- MVC 使用Jquery EasyUI分页成功
先上图吧
- [转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo
热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...
- 开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo(转)
热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...
- 使用 EasyUI 创建左侧导航菜单
使用 JQuery EasyUI 创建左侧导航菜单,菜单的数据由后台服务提供. 效果图 HTML 元素 <div id="menuAccordion"></div ...
- Python作业之多级菜单
作业之多级菜单 菜单实现要求: 1. 列出菜单选择供选择 2. 选择对应内容进入下一级菜单 3. 任何时候都可以选择退出程序或返回上一级菜单 具体代码如下: goods = {'华为':{'A系':{ ...
- 记一次艰难的jquery easy-ui ajax post 体验
分享的经验和教训是: 1.jquery easy-ui ajax post 复杂的Json给后端解析,后端如果接收和解析 2.asp.net webform jquery easy-ui datagr ...
- jquery easyui菜单树显示
目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQuery EasyUI方便多了. 效果体验:http://hovertree.com/texi ...
随机推荐
- C# 5.0中新增特性
C# 5.0随着VisualStudio 2012一起正式发布了,让我们来看看C#5.0中增加了哪些功能. 1. 异步编程 在.Net 4.5中,通过async和await两个关键字,引入了一种新的基 ...
- 【Strtus2】
基于mvc设计模式的web应用框架!strtus2作为控制器来建立模型与视图数据的交互.
- pandas中df.ix, df.loc, df.iloc 的使用场景以及区别
pandas中df.ix, df.loc, df.iloc 的使用场景以及区别: https://stackoverflow.com/questions/31593201/pandas-iloc-vs ...
- VS Code 缩小
一.问题描述 当我们在使用 Visual Studio Code 时,放大,我们可以使用 “ CTRL + ” 快捷键来实现.在使用 “ CRRL - ” 快捷键,缩小不了,我们怎么办? 二.解决方案 ...
- C++基础之类和对象一
(1)类是一种复杂的数据类型,它是抽象数据类型的实现,是数据和相关操作的封装体.类用来确定一类对象的形为,而这些行为是通过类的内部数据和操作来确定的.这些行为是通过一种操作接口来描述的.(2)类的定义 ...
- HTML 表单 / HTML5 表单元素datalist
<form> 属性的列表: 属性 描述 accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集). action 规定向何处提交表单的地址(URL)(提交页面). ...
- pb_ds的优先队列实现dijkstra
用pb_ds的优先队列来做dijkstra..据说noip能用哟. 先来篇关于仿函数的文章. 由于pb_ds支持由迭代器访问元素,并且push操作会返回一个迭代器,merge操作会更新迭代器,相当于帮 ...
- Spring MVC那点事儿
自问自答 1 Spring MVC的启动原理? spring mvc是基于ioc容器的,因此需要先创建IOC容器,才能创建对应的spring mvc执行环境. IOC容器是通过ContextLoade ...
- InfoQ —— 腾讯游戏大数据服务场景与应用
简介 周东祥,本人从2010年毕业进入腾讯互动娱乐部门工作,一直致力在腾讯游戏运营开发工作.先后负责SAP业务受理系统,盗号自助系统,元数据系统以及近2年在腾讯游戏大数据运营开发中积累大量的大数据开发 ...
- 利用CSS制作脸书
很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...