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 ...
随机推荐
- 【CF725D】Contest Balloons（贪心，堆）
题意:acm队伍可以得气球,相同气球数是一个排名.每个队伍有一个气球数上限,如果该队伍的气球数大于上限 该队伍被淘汰.给了你队伍的气球数,你的气球可以给别人,问你最大可能的排名. (2 ≤ n ≤ 3 ...
- Scrapy学习-16-动态网页技术
Selenium浏览器自动化测试框架 简介 Selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样. 支持的浏览器包括IE(7, 8, ...
- Remove Nth Node From End of List（链表,带测试代码）
Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...
- JavaSwing仿QQ登录界面，注释完善，适合新手学习
使用说明: 这是一个java做的仿制QQ登录界面,界面仅使用一个类, JDK版本为jdk-11 素材包的名字为:素材(下载)请在项目中新建一个名字为“素材”的文件夹. 素材: https://pan. ...
- 554 DT:SPM 163 smtp5,D9GowAD3RPYqSvxZjpMaAA--.4817S2 1509706293 坑爹的防垃圾邮件机制
代码如下 package ssmtest; import java.io.File;import java.io.UnsupportedEncodingException;import java.ut ...
- 数组对象(NSArray和NSMutableArrray)
Objective-C中除了可以使用C中的基本数组外,如int[5],char word[] ={‘a’,'b’,'c’};Foundation还提供了NSArray类.Foundation是有序的对 ...
- python 工具 二进制文件处理之——大小端变换
大端换小端 16位: import struct import sys # main body if sys.argv.__len__() > 1: # 参数获取 src_file = sys. ...
- vscode格式化代码无效--可能的解决方法
因为vscode默认启用了根据文件类型自动设置tabsize的选项,因此,可以通过关闭自动设置选项,防止格式覆盖.在用户设置里添加如下配置即可: "editor.detectIndentat ...
- Debian Customer PPA RFC (by quqi99)
作者:张华 发表于:2016-01-13版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) Pre ...
- ajax加载时的进度条
运行效果如下图,pc和移动都可以展示,调用方法很简单,开始调用:loading.baosight.showPageLoadingMsg(false),false代表不现实加载说明,true展示加载说明 ...