我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(二)菜单导航

原文地址为: 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(二)菜单导航

一、前言

上篇博客中已经总体的说了一下权限系统的思路和表结构设计,那接下来我们就要进入正文了,先从菜单导航这个功能开始。

二、实现

这个页面基本不用什么需求分析了,大家都很明白,不过在这个页面要多维护一个东西,那就是定义页面中有哪些按钮,这个用弹出窗口做。
我们技术分析一下:
1、直在grid中在线编辑,使用easyui的treegrid控件可实现。
2、行编辑时选择父节点,使用easyui中的combotree控件,数据源直接在treegrid中取。
3、选择图标,这个没有控件可用,自己代码实现
4、弹出设置按钮窗口,使用easyui的window或dialog控件
5、按钮库管理窗口,使用easyui的datagrid控件。
6、前台交互逻辑使用ko,后台数据接口采用web api
经上面分析,技术上没有什么问题,唯一就是选择图标这个要自己实现比较麻烦点。

1、当然先从mvc控制器开始吧。创建MenuController.cs 里面只有一个index方法的空的mvc控件器,里面什么都不用写。

public class MenuController : Controller
{
public ActionResult Index()
{
return View();
}
}


2、接下来再创建对应的视图,前台razor页面代码如下,看完了我再给大家解释

@{
ViewBag.Title = "title";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@section scripts{
@Scripts.Render("~/Resource/Sys/Menu.js")
<script type="text/javascript">
using([
'lookup', 'validatebox', 'combotree', 'numberspinner'], easyuifix.datagrid_editor_extend);
var formatterParent = function (value, row) { return row.ParentName };
var formatterButton = function (value, row) { return (row.URL&&row.URL!='#')?''
+ row.MenuCode + '\')"> [设置按钮]
':''; }; ko.bindingViewModel(new viewModel());
script>
}
<div class="z-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="MenuCode" align="left" width="80" editor="{type:'validatebox',options:{required: true }}">编码 th>
<th field="ParentCode" 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: true,off: false}}" formatter="com.formatCheckbox" >是否可见th>
<th field="IsEnable" align="center" width="60" editor="{type: 'checkbox',options: {on: true,off: false}}" formatter="com.formatCheckbox" >是否启用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="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>

这一段基本上都是html,大家都懂,要解释的可能会有以下几点:
@Scripts.Render("~/Resource/Sys/Menu.js") 这个是利用了mvc4下面的bundle技术对js文件进行压缩捆绑。
using(['lookup', 'validatebox', 'combotree', 'numberspinner'], easyuifix.datagrid_editor_extend);  这句话的意思是这个页面中动态载入这些组件,(我没有默认加载所有的easyui控件,都是使用时动态加载的)  
这句是表示我有一个隐藏的_id字段,因为我的这个功能是可以修改主键的,所以不能把主键做为更新条件,只有建一个隐藏字段来当做更新条件才能实现。

你可能感兴趣的:(我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(二)菜单导航)