EasyUI的TreeGrid应用

权限系统的菜单管理采用了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>

2、Controller方法

 /// <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、实现效果

拖拽

有需要的童鞋，按照自己的业务逻辑改改就是了。