ASP.NET MVC EXTJS 通用主菜单框架
一、说明
首先我不知道定义的文章标题是不是准确，我这篇博文介绍的是一个通用的软件主菜单框架，界面布局用的是extjs，还是先上一个图吧。
软件主界面左侧菜单采用的风格是extjs的手风琴模式，需要注意的是，界面上“修改密码”和“退出”功能没有实现。
2、系统应用步骤
（1）、在数据表moduleList中修改菜单信息，moduleList数据表的结构、数据将在后面展示
（2）、在菜单对应的界面上，添加UI设计，添加新功能的后台代码即可
在源代码中，在项目目录中的文件夹“ItemPanel”中查找相应的菜单界面
例如：菜单“入库记录”对应的界面是ItemPanel文件夹中的文件TreeModel-19.js,其内容如下：
3、数据表
(1)、数据表创建脚本
use InforDB
go
create table moduleList
(
id int primary key identity(,) not null,
Name nvarchar() null,
pid int null,
iconCls nvarchar() null,
tId nvarchar() null
)
（2）、数据库菜单数据
4、解决方案项目结构
5、Home控制器代码
using AccordationMvc.Models;
using AccordationMvc.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace AccordationMvc.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/ public ActionResult Index()
{
return View();
}
public ActionResult HandlerTreeFromDB()
{
var categoryList = DAL.DBHelper.Context().Select<moduleList>("*").From("moduleList").QueryMany();
var result = this.ConvertTreeNodes(categoryList);
return Json(result, JsonRequestBehavior.AllowGet);
}
#region 和树节点相关的
private List<Tree> ConvertTreeNodes(List<moduleList> listCategory)
{
List<Tree> listTreeNodes = new List<Tree>();
LoadTreeNode(listCategory, listTreeNodes, -);
return listTreeNodes;
}
private void LoadTreeNode(List<moduleList> listCategory, List<Tree> listTreeNodes, int pid)
{
foreach (moduleList category in listCategory)
{
if (category.pid == pid)
{
Tree node = this.TransformTreeNode(category);
listTreeNodes.Add(node); LoadTreeNode(listCategory, node.children, Convert.ToInt32(node.id));
}
}
} private Tree TransformTreeNode(moduleList category)
{
Tree treeNode = new Tree()
{
id = category.id.ToString(),
text = category.Name,
leaf = false,
fatherId = category.pid.ToString(),
iconCls = category.iconCls,
children = new List<Tree>(),
tId = category.tId };
var categoryId = category.id;
var childrens = DAL.DBHelper.Context().Select<moduleList>("*").From("moduleList").Where("pid=@0").Parameters(categoryId).QueryMany(); //判断节点是否有子节点
if (childrens.Count == )
{
treeNode.leaf = true;
treeNode.children = null;
}
return treeNode;
}
#endregion
}
}
6、DBHelper.cs类代码如下
using FluentData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace AccordationMvc.DAL
{
public static class DBHelper
{
/// <summary>
/// 根据配置文件(App.config)中的连接字符串
/// </summary>
/// <returns></returns>
public static IDbContext Context()
{
return new DbContext().ConnectionStringName("testDBContext",
new SqlServerProvider());
}
}
}
说明：testDBContext是配置文件中的连接字符串的名字
7、ViewModel文件夹下Tree.cs文件的代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace AccordationMvc.ViewModel
{
public class Tree
{
public String id;
public String text;
public String iconCls;
public Boolean leaf;
public String fatherId;
public List<Tree> children;
public string tId { get; set; }
}
}
8、Index.cshtml页面文件代码如下：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" type="text/css" href="~/Web/ext4/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" id="common" href="~/Web/css/common.css" />
<script type="text/javascript" src="~/Web/ext4/ext-all.js"></script>
<script type="text/javascript" src="~/Web/js/startup.js"></script>
<script type="text/javascript" src="~/Web/ext4/locale/zh-hans.js"></script>
<script type="text/javascript">
Startup.main(false);
</script>
</head>
<body>
</body>
</html>
9、MainViewport01.js文件代码如下：
说明：该文件是用extjs布局主界面、加载主界面左侧菜单的文件
Ext.define('ExtjsPro01.Viewports.MainViewport01', {
extend: 'Ext.container.Container',
requires: [
'Ext.tab.Panel',
'Ext.layout.container.Border'
],
xtype: 'app-main',
layout: {
type: 'border'
},
initComponent: function () {
var me = this;
me.width = '100%';
me.height = document.documentElement.clientHeight;
me.items = [
{
region: 'north',
xtype: 'panel',
height: ,
border: false,
layout: 'absolute',
bodyStyle: 'background:#D4E1F2;',
items: [
{
xtype: 'label',
forId: 'myTitle',
text: '*****系统',
y: ,
x: ,
style: {
fontSize:'24px',
color: '#990000'
}
},
{
xtype: 'button',
text: '修改密码',
x: document.documentElement.clientWidth*0.8+,
y:,
iconCls: 'key01',
scale: 'large',
handler: function () {
Ext.Msg.alert("不包含该功能", "失败");
}
},
{
xtype: 'button',
text: '退出',
x: document.documentElement.clientWidth * 0.8+,
y: ,
iconCls: 'Logout',
scale:'large',
handler: function () {
Ext.Msg.alert("不包含该功能", "失败");
}
}
]
}, {
region: 'west',
xtype: 'panel',
id:'westPanel',
width: ,
layout: 'accordion',
listeners: {
beforerender: function () {
//myMask();
me.loadMenu();
}
}
}, {
region: 'center', // center region is required, no width/height specified
xtype: 'tabpanel',
id:'tabP',
layout: 'fit',
items: []
}
];
me.callParent(arguments);
},
loadMenu: function ()
{
var obj = Ext.getCmp("westPanel");
var resultK;
Ext.Ajax.request({
url: 'Home/HandlerTreeFromDB',
method: 'post',
params: {
userAccount:'' //根据用户id获取用户的权限
},
success: function (result) {
var jsonResult = Ext.JSON.decode(result.responseText);
resultK = jsonResult;
//加载数据，菜单
for (var i = ; i < resultK.length; i++)
{
//判断一级菜单下是否有二级菜单
if (resultK[i].children != null) {
obj.add({
xtype: 'panel',
title: resultK[i].text,
layout: 'fit',
listeners: {
afterrender: function () {
var model = Ext.define("TreeModel", { // 定义树节点数据模型
extend: "Ext.data.Model",
fields: [
{ name: "id", type: "string" },
{ name: "text", type: "string" },
{ name: "iconCls", type: "string" },
{ name: "leaf", type: "boolean" },
{ name: 'tId', type: "string" }
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: model,//定义当前store对象的Model数据模型
root: {//定义根节点，此配置是必须的
// text : '管理菜单',
expanded: true,
children: resultK[i].children
}
});
var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,//隐藏根节点
listeners: {
itemclick: function (view, record, item, index, e, eOpts) {
var panelName = 'ExtjsPro01.ItemPanel.TreeModel-' + record.get('id');
var tabPnel = Ext.getCmp("tabP");
var t1 = tabPnel.getComponent('TreeModel-' + record.get('id'));
if (t1) {
tabPnel.setActiveTab('TreeModel-' + record.get('id'));
//tabPnel.setActiveTab(panel);
}
else {
if (tabPnel.items.length == ) {
alert('打开的选项卡太多了');
return;
}
else {
var panel = Ext.create(panelName, {});
tabPnel.add(panel);
tabPnel.setActiveTab('TreeModel-' + record.get('id'));
}
}
}
}
});
this.add(tree);
this.doLayout();
}
}
});
obj.doLayout();
}
}
},
callback: function () {
//myMaskH();
},
failure: function () {
Ext.Msg.alert("发送失败", "失败");
}
});
}
});
10、源代码
说明源代码开发环境：visual studio 2012
链接：https://pan.baidu.com/s/1SloB6EKtBlq4SD6c8fTdrg 密码：am7c
ASP.NET MVC EXTJS 通用主菜单框架的更多相关文章
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—2、菜单特效
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
- ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—9、服务器端排序
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
随机推荐
- iis 配置 aspnet起始页
起始页配置:在default document上面加上路径就可以了,例如 /home/kickoffjob asp.net 关于起始页的一般设置: 1: 在web.config中,加入form认证: ...
- wxpython example
#!/usr/bin/env python #---------------------------------------------------------------------------- ...
- C语言集锦（一） C代码生成图片:BMP、PNG和JPEG
1.生成BMP图片 在学习图形图像的过程中,最简单和常见的格式是BMP和PPM.下面将给出生成BMP的极度精简代码,然后讲解BMP格式. #include <stdio.h> #inclu ...
- elasticsearch入库错误：gc overhead导致数据节点脱离集群
https://my.oschina.net/u/3625378/blog/1793796
- [原创][SW]TortoiseSVN创建本地版本控制
1. 简介 TortoiseSVN是一个Windows平台下的Subversion用户端软件,以Windows shell extension的方式写成.它是自由软件,以GNU通用公共许可证发布.(f ...
- Linux下安装python3.3.2及configrue、make、make install
一.安装python3.3.2 raspberry的/usr/local/src目录没有权限,可执行如下命令 pi@raspberrypi:~$ sudo chmod -R 777 /usr/loca ...
- k8s之pod控制器
1.生产中,很少会跑一个自主式pod,一般由控制器去创建pod,其配置文件中内嵌了pod的创建方式. pod控制器:ReplicaSet.Deployment.DaemonSet.Job.Cronjo ...
- ELK之收集Java日志、通过TCP收集日志
1.Java日志收集 使用codec的multiline插件实现多行匹配,这是一个可以将多行进行合并的插件,而且可以使用what指定将匹配到的行与前面的行合并还是和后面的行合并. 语法示例: inpu ...
- 51NOD 1833 环
考虑一下简单环覆盖这个图的意义,其实就是找出原序列的所有排列,满足所有<i,a[i]>都是原图中的一条有向边. 因为一个置换就是由很多简单环构成的. 于是我们可以设 f[i][S] 为考虑 ...
- 【IntelliJ idea/My/ecplise】启动项目前，修改配置JVM参数
My/ecplise下都是一样的: IDEA下: