基于easyUI实现权限管理系统（二）——菜单导航
此文章是基于 EasyUI+Knockout实现经典表单的查看、编辑
一. 相关文件介绍
1. menu.jsp：菜单导航主界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单导航</title>
<%@ include file="/common/head.jsp"%>
</head>
<body>
<div class="toolbar">
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a>
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-add" title="新增" data-bind="click:addClick">新增</a>
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-edit" title="编辑" data-bind="click:editClick">编辑</a>
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-cross" title="删除" data-bind="click:deleteClick">删除</a>
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-save" title="保存" data-bind="click:saveClick">保存</a>
</div> <table id="gridlist" data-bind="treegrid:grid">
<thead>
<tr>
<th field="id" hidden="true"></th>
<th field="menuName" align="left" width="150" editor="{type:'validatebox',options:{required: true }}">菜单名称 </th>
<th field="parentId" align="left" width="150" editor="combotree" formatter="formatterParent">上级菜单 </th>
<th field="iconClass" align="left" width="180" editor="{type:'lookup'}">图标 </th>
<th field="url" align="left" width="180" editor="text">链接地址 </th>
<th field="isVisible" align="center" width="60" editor="{type: 'checkbox',options: {on: 1,off: 0}}" formatter="formatterEnable" >是否可见</th>
<th field="isEnable" align="center" width="60" editor="{type: 'checkbox',options: {on: 1,off: 0}}" formatter="formatterEnable" >是否启用</th>
<th field="menuSeq" align="right" width="50" editor="text">排序</th>
<th field="button" align="center" width="100" formatter="formatterButton">页面按钮 </th>
</tr>
</thead>
</table> <script type="text/html" id="button-template">
<div style="margin:5px;height:320px;overflow:auto;">
<style type="text/css">
.listview{ margin:0 !important;}
.listview li{width:100px !important;background-color:#ECECFF !important;float:left;margin:3px;overflow:hidden;}
.listview span{ font-size:14px !important;height:auto !important; white-space: nowrap;}
.listview .icon:before{content:"" !important}
</style> <div style="border-bottom:1px solid #CCC; margin-bottom:5px;">
<span class="icon32 icon-settings32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;">请选择页面按钮</span>
</div> <div class="metrouicss">
<label class="input-control checkbox" style="margin-top:6px;margin-left:3px;">
<input type="checkbox" data-bind="checked:checkAll"><span class="helper">全选</span>
</label>
<button class="image-button standart fg-color-white" style="float:right" data-bind="click:manageClick">
<i class="icon-grid-view bg-color-green"></i>
管理按钮库
</button>
<ul class="listview" data-bind="foreach: buttons" style="clear:both">
<li data-bind="click:$parent.buttonClick,css:{selected:selected()>0}"><span class="icon" data-bind="text:buttonName,css:buttonIcon"></span></li>
</ul>
</div>
</div>
<div style="text-align:center;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)" >确定</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a>
</div>
</script> <script type="text/html" id="manage-template">
<style type="text/css">
.datagrid-wrap{border-width:0 0 1px 0;}
.datagrid-toolbar{background-color:#E0ECFF !important}
</style> <table data-bind="datagrid:grid">
<thead>
<th field="id" hidden="true"></th>
<th field="buttonCode" align="left" editor="{type:'validatebox',options:{required:true}}" width="80" >编码 </th>
<th field="buttonName" align="left" editor="{type:'validatebox',options:{required:true}}" width="70" >名称 </th>
<th field="buttonIcon" align="left" editor="{type:'validatebox',options:{required:true}}" width="120" >图标 </th>
<th field="buttonSeq" align="left" editor="text" width="50" >排序 </th>
<th field="description" align="left" editor="text" width="200" >备注说明 </th>
</thead>
</table> <div style="text-align:center;margin:5px;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)" >确定</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a>
</div>
</script> <%@ include file="/common/foot.jsp"%>
<script src="viewModel/sys/menu.js"></script>
<script type="text/javascript">
using(['lookup', 'numberspinner'], easyuifix.datagrid_editor_extend);
ko.bindingViewModel(new viewModel());
using(['validatebox','combotree','dialog','messager']);
var formatterEnable = function (value,row) {return '<img src="content/images/' + ((value||'').toString()=="1" ? "checkmark.gif" : "checknomark.gif") + '"/>';};
var formatterParent = function (value, row) { return row.parentName };
var formatterButton = function (value, row) { return (row.url&&row.url!='#')?'<a href="javascript:;" onclick="setButton(\'' + row.id + '\')"><span class="icon icon-set2"> </span>[设置按钮]</a>':''; };
</script>
</body>
</html>
2. menu.js：实现菜单导航功能、列表，设置按钮功能
function viewModel() {
var self = this;
this.editClick = function () {
var row = self.grid.treegrid('getSelected');
if (row) {
//取得父节点数据
var treeData = JSON.parse(JSON.stringify(self.grid.treegrid('getData')).replace(/menuName/g, "text"));
treeData.unshift({ "id": 0, "text": "" });
//设置上级菜单下拉树
var gridOpt = $.data(self.grid.$element()[0], "datagrid").options;
var col = $.grep(gridOpt.columns[0], function (n) { return n.field == 'parentId' })[0];
col.editor = { type: 'combotree', options: { data: treeData } };
col.editor.options.onBeforeSelect = function (node) {
var isChild = utils.isInChild(treeData, row.id, node.id);
com.messageif(isChild, 'warning', '不能将自己或下级设为上级节点');
return !isChild;
};
//开始编辑行数据
self.grid.treegrid('beginEdit', row.id);
self.edit_id = row.id;
var eds = self.grid.treegrid('getEditors', row.id);
var edt = function (field) { return $.grep(eds, function (n) { return n.field == field })[0]; };
self.afterCreateEditors(edt);
}
};
this.grid = {
size: { w: 4, h: 40 },
url: rootPath+'/sys/menu!getAll.do',
idField: 'id',
queryParams: ko.observable(),
treeField: 'menuName',
loadFilter: function (d) {
d = utils.copyProperty(d.rows || d, ["iconClass"], ["iconCls"], false);
return utils.toTreeData(d, 'id', 'parentId', "children");
}
};
this.grid.onClickRow = function () {
var edit_id = self.edit_id;
if (!!edit_id) {
if (self.grid.treegrid('validateRow', edit_id)) { //通过验证
self.grid.treegrid('endEdit', edit_id);
self.edit_id = undefined;
}
else { //未通过验证
self.grid.treegrid('select', edit_id);
return false;
}
}
return true;
};
this.grid.onDblClickRow = self.editClick;
this.grid.OnBeforeDestroyEditor = function (editors, row) {
row.parentName = editors['parentId'].target.combotree('getText');
row.iconClass = editors["iconClass"].target.lookup('textbox').val();
};
this.refreshClick = function () {
window.location.reload();
};
this.addClick = function () {
if (self.grid.onClickRow()) {
var row = { id: '0', menuName:''};
self.grid.treegrid('append', { parent: '', data: [row] });
self.grid.treegrid('select', row.id);
self.grid.$element().data("datagrid").insertedRows.push(row);
self.editClick();
}
};
this.afterCreateEditors = function (editors) {
var iconInput = editors("iconClass").target;
var onShowPanel = function () {
iconInput.lookup('hidePanel');
com.dialog({
title: " 选择图标",
iconCls: 'icon-node_tree',
width: 700,
height: 500,
url: rootPath+"/view/sys/icon.html",
viewModel: function (w) {
w.find('#iconlist').css("padding", "5px");
w.find('#iconlist li').attr('style', 'float:left;border:1px solid #fff; line-height:20px; margin-right:4px;width:16px;cursor:pointer')
.click(function () {
iconInput.lookup('setValue',$(this).find('span').attr('class').split(" ")[1]);
w.dialog('close');
}).hover(function () {
$(this).css({ 'border': '1px solid red' });
}, function () {
$(this).css({ 'border': '1px solid #fff' });
});
}
});
};
iconInput.lookup({ customShowPanel: true, onShowPanel: onShowPanel, editable: true });
iconInput.lookup('resize', iconInput.parent().width());
iconInput.lookup('textbox').unbind();
};
this.deleteClick = function () {
var row = self.grid.treegrid('getSelected');
if (row) {
var childNodes = self.grid.treegrid('getChildren', row.id);
if(childNodes.length>0){
com.message('warning', '请先删除子菜单!');
return;
}
self.grid.$element().treegrid('remove', row.id);
self.grid.$element().data("datagrid").deletedRows.push(row);
}
};
this.saveClick = function () {
self.grid.onClickRow();
var post = {};
post.list = new com.editTreeGridViewModel(self.grid).getChanges(['id', 'menuName', 'parentId', 'iconClass', 'url', 'isVisible', 'isEnable', 'menuSeq']);
if (self.grid.onClickRow() && post.list._changed) {
com.ajax({
url: rootPath+'/sys/menu!edit.do',
contentType: 'application/json',
data: ko.toJSON(post),
success: function (d) {
com.message('success', '保存成功！');
self.grid.treegrid('acceptChanges');
self.grid.queryParams({});
}
});
}
};
}
var setButton = function (menuId) {
com.dialog({
title: "设置按钮",
width: 555,
height: 400,
html: "#button-template",
viewModel: function (w) {
var self = this;
com.loadCss(rootPath+'/content/css/metro/css/modern.css', parent.document);
this.buttons = ko.observableArray();
this.refresh = function () {
com.ajax({
url: rootPath+'/sys/button!getMenuButtons.do?menuId=' + menuId,
type: 'GET',
async: false,
success: function (d) {
self.buttons(ko.mapping.fromJS(d)());
}
});
};
this.refresh();
this.checkAll = ko.observable(false);
this.checkAll.subscribe(function (value) {
$.each(self.buttons(), function () {
this.selected(value ? 1 : 0);
});
});
this.buttonClick = function (row) {
row.selected(row.selected() ? 0 : 1);
};
this.confirmClick = function () {
var data = utils.filterProperties($.grep(self.buttons(), function (row) {
return row.selected() > 0;
}), ['id']);
com.ajax({
url: rootPath+'/sys/button!editMenuButtons.do?menuId=' + menuId,
data: ko.toJSON(data),
success: function (d) {
com.message('success', '保存成功！');
self.cancelClick();
}
});
};
this.manageClick = function () {
com.dialog({
title: "管理按钮库",
width: 600,
height: 410,
html: "#manage-template",
viewModel: function (w_sub) {
var that = this;
this.grid = {
width: 586,
height: 340,
pagination: false,
pageSize: 10,
url: rootPath+"/sys/button!getButtons.do",
queryParams: ko.observable()
};
this.cancelClick = function () {
w_sub.dialog('close');
};
this.gridEdit = new com.editGridViewModel(this.grid);
this.grid.OnAfterCreateEditor = function (editors, row) {
if (!row._isnew) com.readOnlyHandler('input')(editors["buttonCode"].target, true);
};
this.grid.onClickRow = that.gridEdit.ended;
this.grid.onDblClickRow = that.gridEdit.begin;
this.grid.toolbar = [
{ text: '新增', iconCls: 'icon-add', handler: function () { that.gridEdit.addnew(); } }, '-',
{ text: '编辑', iconCls: 'icon-edit', handler: that.gridEdit.begin }, '-',
{ text: '删除', iconCls: 'icon-cross', handler: that.gridEdit.deleterow }
];
this.confirmClick = function () {
if (!that.gridEdit.isChangedAndValid()) return;
var list = that.gridEdit.getChanges(['id', 'buttonCode', 'buttonName','buttonIcon', 'buttonSeq', 'description']);
com.ajax({
url: rootPath+'/sys/button!editbutton.do',
data: ko.toJSON({ list: list }),
success: function (d) {
that.cancelClick();
self.refresh();
com.message('success', '保存成功！');
}
});
};
}
});
};
this.cancelClick = function () {
w.dialog('close');
};
}
});
};
二. 效果图
1. 访问：http://localhost:8080/ims/sys/menu.do，菜单导航主界面
2. 点击 设置按钮
3. 点击 管理按钮库
基于easyUI实现权限管理系统（二）——菜单导航的更多相关文章
- 基于easyUI实现权限管理系统（三）——角色管理
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. role.jsp:角色管理界面 <!DOCTYPE html PUBLIC "-//W3 ...
- 基于easyUI实现权限管理系统（四）——用户管理
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. user.jsp:用户管理界面 <!DOCTYPE html PUBLIC "-//W3 ...
- 基于easyUI实现权限管理系统（一）一—组织结构树图形
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. organize.jsp:组织结构树的主界面 <!DOCTYPE html PUBLIC &quo ...
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——菜单模块的实现（二）
ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计(一) 菜单和模块是在同一个表中,采用的是树形结构,模块菜单表结构如下代码: USE [Permis ...
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计（一）
快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一个用户可以有多个角色,一个用户可以属于多个部门,这些都可以控制到权限,有时特殊要求,同样的部门和角 ...
- （转）ASP.NET MVC4+EasyUI+EntityFrameWork权限管理系统——数据库的设计（一）
原文地址:http://www.cnblogs.com/cmsdn/p/3371576.html 快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一 ...
- 项目：rbac 基于角色的权限管理系统；
- 简单示意流程图 - RBAC分析: - 基于角色的权限管理: - 权限等于用户可以访问的URL: - 通过限制URL来限制权限: - RBAC表结构组成: from django.db impor ...
- Shiro集成SSM基于动态URL权限管理(二)
这个案例基于上一个demo扩展而来.所以数据库表,在Shiro集成SSM基于URL权限管理(一)开篇的一致.如果上个demo操作的建议重新导入一次,避免出现问题. 而这次都不是通过固定写在方法上的注解 ...
- Oracle+FluentData+MVC4+EasyUI开发权限管理系统之开篇
在园子里有很多EF+MVC+EasyUI的框架实在是太多了,经过在一段时间的学习高手写的思路,但是都是针对Sql数据的,但是今年我当上研发组组长的第一个任务就是编写一个通用平台框架,一刚开始想把学习过 ...
随机推荐
- Kid的某些跳刺套路
需要按二段方向键的跳跃: 中途松开方向键的跳跃: 中途按下方向键的跳跃: 意想不到的小跳(如果上方有墙,小跳比大跳磕头跳的更远)(kid站的是最后的位置): 意想不到的小跳*2: 意想不到的小跳*3( ...
- H5新手教程，小白来看看。
H5教程(一) 相信点进来看这篇文章的应该都是刚刚接触H5的新手,那么你真的是找到了一篇合适的文章. 1.学习前准备 既然想学习好H5,只是这样看是不够的,还需要动手练习,以及及时复习,所以我推荐几款 ...
- 数据结构65：快速排序算法（QSort，快排）
上节介绍了如何使用起泡排序的思想对无序表中的记录按照一定的规则进行排序,本节再介绍一种排序算法——快速排序算法(Quick Sort). C语言中自带函数库中就有快速排序——qsort函数 ,包含在 ...
- 主流服务器虚拟化技术简单使用——KVM（二）
通过Linux工具管理KVM 主流服务器虚拟化技术简单使用——KVM(一)部署了一台KVM主机,提到KVM可以通过命令行工具(virt-install.virsh)和GUI工具(virt-manage ...
- rm: cannot remove `xxx’: Operation not permitted问题的处理方案
第一步:22.txt lsattr 22.txt 查看文件属性 看到的情况 -----a------- 第二步:去除a的属性 chattr -a 22.txt 第三步:在此执行删除 rm 22.txt
- Linux Mint下FireFox安装Adobe Flash Player
最近在为自己的家里一台很老的机子(由于微软不再支持windows,windows10什么的不是这个老机子可以带的起来的233)选择一个合适的linux系统安装.看来看去,最终选择了排行很靠前,感觉也不 ...
- C# 父窗体与子窗体之间委托
先实例化子窗体jobForm,然后让 jobForm.TransfEvent += job_TransfEvent;显示子窗体 if (jobForm.DialogResult != DialogRe ...
- [大数据入门]实战练习 安装Cloudera-Hadoop集群
实验环境规划 Hostname IP OS Roles Machine 0 elephant 192.168.124.131 Machine 1 tiger 192.168.124.132 ...
- 我的Python升级打怪之路【六】：面向对象（一）
面向对象的概述 面向过程:根据业务逻辑从上到下写代码 函数式:将其功能代码封装到函数中,日后便无需编写,仅仅调用即可 [执行函数] 面向对象:对函数进行分类和封装.[创建对象]==>[通过对象执 ...
- SpringBoot1.5.2安装配置--1.5.2版本问题
简述下java环境 1.安装jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...