权限系统的菜单管理采用了EasyUI的TreeGrid,实现了菜单管理的新增、删除、修改、初始化、拖拽改变顺序或层级等,贴出代码:
1、view页面
<link rel="stylesheet" type="text/css" href="/content/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/content/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/content/js/easyui/demo/demo.css">
<script type="text/javascript" src="/content/js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/content/js/easyui/jquery.easyui.min.js"></script>
<table id="syscaidan" title="菜单管理" class="easyui-treegrid" style="width:100%;"></table>
<script>
$(function() {
$('#syscaidan').treegrid({
loadMsg: '数据加载中,请稍后……',
url: 'listdata',
lines: true,
rownumbers: false,
idField: 'syscaidanid',
treeField: 'mingcheng',
toolbar:[{
text:'新增外部菜单',iconCls:'icon-add',handler:function(){
window.location.href='edit';
} },
{
text: '加载最新菜单', iconCls: 'icon-reload', handler: function () {
$('#syscaidan').treegrid('reload');
}
},
{
text: '恢复到原始状态', iconCls: 'icon-tip', handler: function () {
if (confirm("该操作将重置所有菜单,确定进行初始化?")) {
$.getJSON("chushihua", function (json) {
alert(json.msg);
if (json.success == true)
$('#syscaidan').treegrid('reload');
});
}
}
}
],
columns: [
[
{ field: 'mingcheng', title: '菜单名称', width: 200 },
{ field: 'biaoshi', title: '菜单标示', width: 100 },
{ field: 'yuanshimingcheng', title: '原始名称', width: 100 },
{ field: 'tanchu', title: '是否弹出', width: 100 },
{ field: 'shifouxianshi', title: '是否显示', width: 100 },
{ field: 'leixing', title: '类型', width: 100 },
{ field: 'tianjiariqi', title: '添加日期', width: 100 },
{
field: 'syscaidanid',
title: '操作',
width: 100,
align: 'center',
formatter: function(value, row, index) {
var editbtn = '', delbtn = '';
if (row.shangji != -1)
var editbtn = '<a href="edit?syscaidanid=' + row.syscaidanid + '" class="ope-edit" >修改</a> ';
if (row.leixing == '人工添加')
delbtn = '<a href="javascript:void(0)" class="ope-delete" οnclick="del(' + row.syscaidanid + ')">删除</a>';
return editbtn + delbtn;
}
}
]
],
onLoadSuccess: function(row) {
//启用拖动排序
enableDnd($('#syscaidan'));
}
});
});
//删除
function del(syscaidanid) {
if (confirm("确定要删除吗?")) {
$.getJSON("delete?syscaidanid=" + syscaidanid, function (json) {
alert(json.msg);
if(json.success==true)
$('#syscaidan').treegrid('reload');
});
}
}
//拖动实现
function enableDnd(t) {
var nodes = t.treegrid('getPanel').find('tr[node-id]');
nodes.find('span.tree-hit').bind('mousedown.treegrid', function () {
return false;
});
nodes.draggable({
disabled: false,
revert: true,
cursor: 'pointer',
proxy: function (source) {
var p = $('<div class="tree-node-proxy tree-dnd-no"></div>').appendTo('body');
p.html($(source).find('.tree-title').html());
p.hide();
return p;
},
deltaX: 15,
deltaY: 15,
onBeforeDrag: function () {
$(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({ accept: 'no-accept' });
},
onStartDrag: function () {
$(this).draggable('proxy').css({
left: -10000,
top: -10000
});
},
onDrag: function (e) {
$(this).draggable('proxy').show();
this.pageY = e.pageY;
},
onStopDrag: function () {
$(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({ accept: 'tr[node-id]' });
}
}).droppable({
accept: 'tr[node-id]',
onDragOver: function (e, source) {
//拖拽的菜单必须无子菜单
var d = $("#" + source.id).find('.tree-collapsed');
var f = $("#" + source.id).find('.tree-expanded');
if ((d.length + f.length) > 0) {
return ;
}
//控制菜单最多三级
var level = $('#syscaidan').treegrid('getLevel', $("#" + e.target.id).attr('node-id'));
if (level > 3)
return ;
var pageY = source.pageY;
var top = $(this).offset().top;
var bottom = top + $(this).outerHeight();
$(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
$(this).removeClass('row-append row-top row-bottom');
if (pageY > top + (bottom - top) / 2) {
if (bottom - pageY < 5) {
$(this).addClass('row-bottom');
} else {
$(this).addClass('row-append');
}
} else {
if (pageY - top < 5) {
$(this).addClass('row-top');
} else {
$(this).addClass('row-append');
}
}
},
onDragLeave: function (e, source) {
$(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
$(this).removeClass('row-append row-top row-bottom');
},
onDrop: function (e, source) {
//拖拽的菜单必须无子菜单
var d = $("#" + source.id).find('.tree-collapsed');
var f = $("#" + source.id).find('.tree-expanded');
if ((d.length + f.length) > 0) {
return alert("拖拽的菜单不能有子菜单!");
}
//控制菜单最多三级
var level = $('#syscaidan').treegrid('getLevel', $("#" + e.target.id).attr('node-id'));
if (level > 3)
return alert("菜单设置不能超过三级!");
var action, point;
if ($(this).hasClass('row-append')) {
action = 'append';
} else {
action = 'insert';
point = $(this).hasClass('row-top') ? 'top' : 'bottom';
}
$(this).removeClass('row-append row-top row-bottom');
//==================================
//做自己的逻辑处理
var src = $('#syscaidan').treegrid('find', $(source).attr('node-id'));
var dest = $('#syscaidan').treegrid('find', $(this).attr('node-id'));
//alert(src.mingcheng + "," + dest.mingcheng);
//拖拽事件
$.ajax({
url: 'tuozhuai',
dataType: 'json',
type: 'post',
data: {
"srcid": src.syscaidanid,
"destid": dest.syscaidanid
},
success: function (data) {
if (data.success) {
$('#syscaidan').treegrid('reload'); //重新加载treegrid
}
}
});
//====================
}
});
}
</script>
/// <summary>
/// 获取到所有菜单列表
/// </summary>
/// <param name="pb"></param>
public static void listdata(pagebase pb)
{
ArrayList arr = new ArrayList();
//取系统菜单,获取前先扫描一遍
applicationhelper.reload();
var xitongcaidan = applicationhelper.hasMenu;
//全部菜单
var quanbucaidans = queryhelper.query<_syscaidan>("select * from syscaidan order by paixu").ToList();
//加载根目录
arr.Add(new
{
syscaidanid = 0,
biaoshi = "@root",
yuanshimingcheng = "菜单目录",
shangji = -1,
mingcheng = "菜单目录",
miaoshu = "菜单目录",
tanchu = "否",
shifouxianshi = "否",
leixing = "系统",
tianjiariqi = DateTime.Now.ToString("yyyy-MM-dd"),
children = getzicaidan(0, quanbucaidans, xitongcaidan)//加载子菜单
});
//输出json
pb.json(arr);
}
/// <summary>
/// 获取菜单列表
/// </summary>
/// <param name="syscaidanid">父菜单ID</param>
/// <param name="quanbucaidans">全部菜单列表</param>
/// <param name="xitongcaidan">系统菜单列表</param>
/// <returns></returns>
public static ArrayList getzicaidan(int syscaidanid, List<_syscaidan> quanbucaidans, Dictionary<string, caidan> xitongcaidan)
{
ArrayList arr = new ArrayList();
//取一级部门
var zicaidans = from o in quanbucaidans where o.shangji == syscaidanid select o;
//加载部门
foreach (_syscaidan zicaidan in zicaidans)
{
//取原始名称
var _caidan=new caidan();
xitongcaidan.TryGetValue(zicaidan.biaoshi, out _caidan);
arr.Add(new
{
syscaidanid = zicaidan.syscaidanid,
biaoshi=zicaidan.biaoshi,
yuanshimingcheng =_caidan==null?"":_caidan.mingcheng,
shangji = zicaidan.shangji,
mingcheng = string.IsNullOrEmpty(zicaidan.mingcheng) ? _caidan == null ? "" : _caidan.mingcheng : zicaidan.mingcheng,
miaoshu = zicaidan.miaoshu,
tanchu = zicaidan.tanchu == 0 ? "否" : "是",
shifouxianshi = zicaidan.shifouxianshi==0?"否":"是",
leixing = zicaidan.leixing==0?"系统":"人工添加",
tianjiariqi = zicaidan.tianjiariqi.ToString("yyyy-MM-dd"),
children = getzicaidan(zicaidan.syscaidanid, quanbucaidans,xitongcaidan)
});
}
return arr;
}
/// <summary>
/// 编辑
/// </summary>
/// <param name="pb"></param>
[layout("default_edit")]
public static void edit(pagebase pb)
{
var id = pb.v_i(_syscaidan_.syscaidanid);
if (id <= 0) return;
//方法一
string sql = "select * from syscaidan where syscaidanid=@0";
var t = queryhelper.get<_syscaidan>(sql, id);
pb["leixing"] = t.leixing;
pb.autoloaddata(t);
}
/// <summary>
/// 保存完毕
/// </summary>
/// <param name="pb"></param>
public static void save(pagebase pb)
{
//这是一种情况
_syscaidan syscaidan = pb.getmodel<_syscaidan>();
if (syscaidan.syscaidanid <= 0)
{
syscaidan.tianjiariqi = DateTime.Now;
syscaidan.leixing = 1;//类型:人工
}
if (syscaidan.saveorupdate().identity > 0)
pb.back("保存成功!");
else
pb.back("保存失败!", false);
}
/// <summary>
/// 删除
/// </summary>
/// <param name="pb"></param>
public static void delete(pagebase pb)
{
//这是一种情况
_syscaidan syscaidan = pb.getmodel<_syscaidan>();
if (syscaidan.delete(true) > 0)
pb.json(new { msg = "删除成功!", success = true });
else
pb.json(new { msg = "删除失败!", success = false });
}
/// <summary>
/// 拖拽
/// </summary>
/// <param name="pb"></param>
public static void tuozhuai(pagebase pb)
{
var srcid = pb.v_i("srcid");//要移动的
if (srcid <= 0) return;
var destid = pb.v_i("destid");//目标位置的
if (destid < 0) return;
string sql = "select * from syscaidan where syscaidanid=@0";
var srcsyscaidan = queryhelper.get<_syscaidan>(sql, srcid);
if (destid != 0)//目标位置不是根目录时
{
var destsyscaidan = queryhelper.get<_syscaidan>(sql, destid);
srcsyscaidan.shangji = destsyscaidan.syscaidanid;
}
else
{
srcsyscaidan.shangji = 0;
}
var destmaxpaixu = queryhelper.get<int>("select num=max(paixu) from syscaidan where shangji=@0",destid);
srcsyscaidan.paixu = ++destmaxpaixu;
if (srcsyscaidan.saveorupdate().identity > 0)
pb.json(new { msg = "移动成功!", success = true });
else
pb.json(new { msg = "移动失败!", success = false });
}
/// <summary>
/// 初始化
/// </summary>
/// <param name="pb"></param>
public static void chushihua(pagebase pb)
{
string sql = "delete from syscaidan ";
var result = queryhelper.execute(sql);
xitongcaidanchushihua();
if (result >= 0)
pb.json(new { msg = "初始化成功!", success = true });
else
pb.json(new { msg = "初始化失败!", success = false });
}
/// <summary>
/// 系统菜单初始化
/// </summary>
public static void xitongcaidanchushihua()
{
//取系统菜单,获取前先扫描一遍
applicationhelper.reload();
var xitongcaidan = applicationhelper.hasMenu;
//循环写入数据库
if (xitongcaidan != null && xitongcaidan.Count > 0)
{
string sql = "";
StringBuilder sqlsb = new StringBuilder();
sqlsb.AppendLine("insert into syscaidan(biaoshi,mingcheng,path,leixing) values ");
foreach (caidan _caidan in xitongcaidan.Values)
{
sqlsb.AppendLine("('"+_caidan.biaoshi+"','"+_caidan.mingcheng+"','"+_caidan.path+"',0),");
}
sql = sqlsb.ToString().Trim();
sql = sql.Substring(0, sql.Length - 1);
queryhelper.execute(sql);
}
}
3、库表设计
/****** Object: Table [dbo].[syscaidan] Script Date: 2015/8/26 14:22:09 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[syscaidan](
[syscaidanid] [int] IDENTITY(1,1) NOT NULL,
[path] [nvarchar](200) NULL,
[biaoshi] [nvarchar](200) NULL,
[shifouxianshi] [int] NULL,
[leixing] [int] NULL,
[shangji] [int] NULL,
[paixu] [int] NULL,
[tanchu] [int] NULL,
[tianjiariqi] [datetime] NULL,
[miaoshu] [nvarchar](500) NULL,
[mingcheng] [nvarchar](200) NULL,
CONSTRAINT [PK_syscaidan] PRIMARY KEY CLUSTERED
(
[syscaidanid] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'菜单id' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'syscaidanid'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'菜单唯一系统标示,用于判断权限' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'path'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'标示' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'biaoshi'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'是否显示,0是不显示,1是显示' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'shifouxianshi'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'类型 0是系统 1是用户自定义' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'leixing'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'上级ID' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'shangji'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'排序,从小到大排序' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'paixu'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'点击菜单是否弹出 1弹出 0不弹出' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'tanchu'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'创建日期' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'tianjiariqi'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'描述' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'miaoshu'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'标题' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'syscaidan', @level2type=N'COLUMN',@level2name=N'mingcheng'
GO
4、实现效果
拖拽
有需要的童鞋,按照自己的业务逻辑改改就是了。