基于EasyUI 快速搭建权限管理平台

前言：

一.用户角色权限设计思路：

<1>不同职责的人员，对于系统操作的权限应该是不同;
<2>可以对“组”进行权限分配;
<3>权限管理系统应该是可扩展的;
<4>满足业务系统中的功能权限

2. 角色和操作的权限设计（
不同的应用场合，你可能会想出不同的需求，提了一个新的需求以后，可能会发现原来的设计没方法实现了，于是还要添加一个新的表。这也是上面所提到的问题。 其实不必想得那么复杂，权限可以简单描述为：

某某主体 在 某某领域 有 某某权限

1，主体可以是用户，可以是角色，也可以是一个部门

2， 领域可以是一个模块，可以是一个页面，也可以是页面上的按钮

3， 权限可以是“可见”，可以是“只读”，也可以是“可用”(如按钮可以点击)

其实就是Who、What、How的问题， 谁对什么功能，动作有怎样的操作权限

下面来看看表结构是如何设计的，代码如下：

{% extends 'layout/_layout.html' %}

{% block  content %}

<div style="float: left;width: 300px">
<ul id="pers_tree" ></ul>
<!-- <ul id="tt" class="easyui-tree" data-options="url:'/get_permission_tree/',method:'get',animate:true"></ul> -->
</div>

<div style="float: left;width: 600px">
<table id="dg"></table>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px 20px" closed="true" buttons="#dlg-buttons"> <!-#easyui订制模态对话框，默认关闭状态->
<form id="fm1">
<div class="input-group clearfix">
<div class="group-label" style="width: 80px;">
<span>省份：</span>
</div>
<div class="group-input" style="width: 300px;">
<input id="dlg_nid" style="width: 200px;display: none"  name="nid"/>
<input id="dlg_province" style="width: 200px" class="easyui-textbox" type="text" name="caption" data-options="required:true,missingMessage:'省份不能为空'" />
</div>
</div>
</form>
</div>
<div id="dlg-buttons">　
<span id="dlg_summary" style="color: red"></span>
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="Save()">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
{% endblock %}

{% block js %}
<script>
$(function(){
InitTree();
});

function InitTree(){
$('#pers_tree').tree({
url: '/get_permission_tree/',
method: 'get',
animate: true,
onClick: function(node){
console.log(node.text,node.id);
InitTable(node.id);
InitPagination();
}
})
}

function InitTable(node_parent_id){
$('#dg').datagrid({
title: '听不下去了',
url: '/get_child_permission/',
method: 'get',
queryParams: {
node_parent_id: node_parent_id
},
columns: [[
{
field: 'ck',
checkbox: true
},
{
field: 'caption',
title: '标题',
width: 180,
align: 'center'
},
{
field: 'code',
title: 'URL',
width: 180,
align: 'center'
}

]],
toolbar: [
{
text: '添加',
iconCls: 'icon-add',
handler: AddRow
}, {
text: '删除',
iconCls: 'icon-remove',
handler: RemoveRow
}, {
text: '修改',
iconCls: 'icon-edit',
handler: EditRow
}
],
pagePosition: 'both',
pagination: true,
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 50]
})
}

function AddRow(){
// 显示对话框，由于希望添加则将方法设置为POST
$('#fm1').form('clear');
$('#dlg').dialog('open').dialog('setTitle','创建省份');
$('#dlg_summary').empty();
METHOD = 'post';　　
}
function RemoveRow(){
console.log('RemoveRow');
}
function EditRow(){
console.log('EditRow');
}

function InitPagination() {
var pager = $('#dg').datagrid('getPager');
$(pager).pagination({
beforePageText: '第',
afterPageText: '页 共{pages}页',
displayMsg: '当前显示{from}-{to}条记录 共{total}条数据'
})
}
</script>
{% endblock %}

View Code

EasyUI 已经高度封装了树形菜单的实现方法，我们只要了解具体的参数即可，详见http://www.jeasyui.com/demo/main/index.php