BS架构ERP系统开发全系列之白金教程－主界面设计

最新推荐文章于 2024-06-23 08:12:40 发布

神色自若

最新推荐文章于 2024-06-23 08:12:40 发布

阅读量1.2w

点赞数 3

分类专栏： asp.net 文章标签：界面设计架构 web service vs2012 jqGrid

本文链接：https://blog.csdn.net/mansai/article/details/50408709

版权

asp.net 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

１、打开VS2012

新建ERP专案，如图

在ERP解决方案上，右击添加新建项目，新建一个CommonTools共用类库，如图

删除Class1.cs，在CommonTools右击，添加新建类，输入BasePage，结果如图

在ERP专案上右击，打开ERP专案所在文件夹，如下图

添加４个文件夹（ＷＳ存放WebService），如图

将上一章所介绍的js类库全部下载到js文件夹，如图

在解决方案上单击显示所有文件

选中添加的的４个文件夹，右击，包在项目中

在CommonTools上添加System.Web引用

打开BasePage文件，代码修改如下

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace CommonTools
{
    public class BasePage : Page
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            AddCss(this.Page, "~/js/JqueryEasyUI/themes/default/easyui.css");
            AddCss(this.Page, "~/js/JqueryEasyUI/themes/icon.css");
            AddCss(this.Page, "~/js/My97DatePicker/skin/WdatePicker.css");
            AddScript(this.Page, "~/js/JqueryEasyUI/jquery.min.js");
            AddScript(this.Page, "~/js/jquery-ui/jquery-ui.min.js");
            AddScript(this.Page, "~/js/JqueryEasyUI/jquery.easyui.min.js");
            AddScript(this.Page, "~/js/JqueryEasyUI/locale/easyui-lang-zh_CN.js");
            AddCss(this.Page, "~/js/jquery-ui/themes/redmond/jquery-ui.css");
            AddCss(this.Page, "~/css/ui.jqgrid.css");
            AddScript(this.Page, "~/js/jqGrid/i18n/grid.locale-cn.js");
            AddScript(this.Page, "~/js/jqGrid/jquery.jqGrid.min.js");
            AddScript(this.Page, "~/js/jqGrid/jqGridExportToExcel.js");
            AddScript(this.Page, "~/js/My97DatePicker/WdatePicker.js");
            AddScript(this.Page, "~/js/JqueryEasyUI/plugins/jquery.my97.js");            
        }
        public static void AddScript(System.Web.UI.Page page, string url)
        {
            HtmlGenericControl JsControl = new HtmlGenericControl("script");
            JsControl.Attributes.Add("type", "text/javascript");
            JsControl.Attributes.Add("src", page.ResolveClientUrl(url));
            page.Header.Controls.Add(JsControl);
        }
        public static void AddEndScript(System.Web.UI.Page page, string url)
        {
            HtmlGenericControl JsControl = new HtmlGenericControl("script");
            JsControl.Attributes.Add("type", "text/javascript");
            JsControl.Attributes.Add("src", page.ResolveClientUrl(url));
            page.Controls.Add(JsControl);
        }
        public static void AddCss(System.Web.UI.Page page, string url)
        {
            HtmlLink CssControl = new HtmlLink();
            CssControl.Href = url;
            CssControl.Attributes.Add("rel", "stylesheet");
            CssControl.Attributes.Add("type", "text/css");
            page.Header.Controls.Add(CssControl);
        }
    }
}

在ＥＲＰ上右击，添加CommonTools引用

ＥＲＰ专案上右击，添加web窗体，命名为

Index页面，按F7，切换到.cs页面，将页面继承basepage，如图

再按F7切换到.aspx页面视图

添加代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>唯准电子企业管理系统</title>
</head>
<body class="easyui-layout">
    <form id="form1" runat="server">
        <div id="top" data-options="region:'north',border:false,height:0">
            <div id="logo">
                <div id="menu">
                    <ul>
                        <asp:Label ID="topMenu" runat="server"></asp:Label>
                        <li>
                            <asp:LinkButton ID="lbnLogout" runat="server"><span>登出</span></asp:LinkButton>
                        </li>
                    </ul>
                </div>
                <div id="SubMenu">
                    <div>部门：<asp:Label ID="lblUnitName" runat="server" Text="资讯部"></asp:Label></div>
                    <div>姓名：<asp:Label ID="lblHumanName" runat="server" Text="满赛"></asp:Label></div>
                </div>
            </div>
        </div>
        <div id="IndexTree" data-options="region:'west',split:true" title="ERP系统" style="width: 160px;">
            <div class="easyui-accordion" data-options="fit:true,border:false">
            </div>
        </div>
        <div data-options="region:'center',title:'操作窗口'">
            <div id="tabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
                <div title="工作台">
                    <iframe src='' frameborder="0" scrolling="auto" style="width: 100%; height: 99.5%"></iframe>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

修改顶部的li标签css样式变为横向

#top {
	BACKGROUND: url(../images/topbg.gif) repeat-x;FONT-SIZE: 12px;OVERFLOW: hidden;
}
#logo {
	BACKGROUND: url(../images/logo.gif) no-repeat; float :left; height :72px; OVERFLOW: hidden;
}
#menu{HEIGHT: 48px;OVERFLOW: hidden;}
#logo ul{padding:5px 0 0 460px;list-style:none;}
#logo ul li{float:left;HEIGHT: 30px;border:solid 1px #d4e4f3;}
#logo ul li a {
	DISPLAY: block; BACKGROUND: url(../images/digital_left.gif) no-repeat left top;COLOR: #2867b1;FLOAT: left;HEIGHT: 30px; LINE-HEIGHT: 20px; TEXT-DECORATION: none;OVERFLOW: hidden;
}
#logo ul li a SPAN {
	DISPLAY: block;FONT-WEIGHT: bold; BACKGROUND: url(../images/digital_side.gif) no-repeat right top;padding:7px 13px 0 13px;  FLOAT: left; CURSOR: pointer;OVERFLOW: hidden;HEIGHT: 30px;
}
#logo ul li a:hover{
	background:url(../images/seg_left.gif) no-repeat left top;COLOR: #fff;	
}
#logo ul li a:hover SPAN
{   
	background:url(../images/seg_side.gif) no-repeat right top;
}
#SubMenu {
	MARGIN-LEFT: 460px;COLOR: #fff;FONT-WEIGHT: bold; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: left;
}
#SubMenu div{
	float:left;width:200px;
}
#TreeView1 a:link,a:visited {text-decoration:none; color:#126499;}
#TreeView1 a:hover,a:active {text-decoration:underline; color:#126499;}
#TreeView1 tr:hover {
    background-color:#e6e6e6;
}
.easyui-tree,.easyui-tree .tree-node-selected,.easyui-tree span:hover {    
    color:#126499
}

至此主页面已经做完，在浏览器中查看即可，看到如下效果页面（建议用google chrome）

QQ：25489181

邮箱：mansai@163.com

针对程序员的养生保健微信18136761128(专治颈椎、久坐导到慢性疾病，已经上央视了，假一罚十)

神色自若

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
1
评论
BS架构ERP系统开发全系列之白金教程－主界面设计

１、打开VS2012新建ERP专案，如图在ERP解决方案上，右击添加新建项目，新建一个CommonTools共用类库，如图删除Class1.cs，在CommonTools右击，添加新建类，输入BasePage，结果如图在ERP专案上右击，打开ERP专案所在文件夹，如下图添加三个文件夹（ＷＳ存放WebService），如图
复制链接

扫一扫