EasyUI的TreeGrid应用
来源：互联网 发布：药店销售软件 编辑：程序博客网 时间：2024/04/30 23:25
权限系统的菜单管理采用了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" onclick="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 ONGOSET QUOTED_IDENTIFIER ONGOCREATE 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]GOEXEC 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'GOEXEC 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'GOEXEC 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'GOEXEC 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'GOEXEC 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'GOEXEC 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'GOEXEC 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'GOEXEC 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'GOEXEC 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'GOEXEC 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'GOEXEC 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、实现效果
拖拽
有需要的童鞋，按照自己的业务逻辑改改就是了。
0 0
- EasyUI的TreeGrid应用
- easyUI treegrid的使用
- easyui-treegrid的案例
- 可拖拽的easyui treegrid
- easyui的treegrid
- easyui的treegrid开发使用
- easyui中treegrid的数据格式
- easyui treegrid
- easyUI TreeGrid
- easyUI TreeGrid
- easyui treegrid
- jquery easyui的treegrid的级联扩展
- jquery easyui的treegrid的控制
- easyUI 创建一个基础的TreeGrid
- EasyUI的TreeGrid查询功能实现
- EasyUI treegrid 生成json格式的方法
- 记录一次EasyUI 的treegrid优化实践
- easyui treegrid的拖拽效果实现
- Subsets C#
- SpringMVC和Struts2的区别
- STM32停止模式唤醒不恢复时钟的后果
- 我的第一个java定时器
- USB中的描述符详解【一】
- EasyUI的TreeGrid应用
- MSChart的初步使用和学习
- MongoDB C# r 中IMongoQuery的内部实现Query的用法
- 人脸识别研究综述
- PHP抓取远程图片到本地
- Ruby第二天作业
- MultiplePack - 多重背包模板
- USB中的描述符详解[二]
- python idle 清屏问题的解决
