每次写博客，第一句话都是这样的：程序员很苦逼，除了会写程序，还得会写博客！当然，希望将来的一天，某位老板看到此博客，给你的程序员职工加点薪资吧！因为程序员的世界除了苦逼就是沉默。我眼中的程序员大多都不爱说话，默默承受着编程的巨大压力，除了技术上的交流外，他们不愿意也不擅长和别人交流，更不乐意任何人走进他们的内心，他们常常一个人宅在家中！有上进心的，查查资料，学习新的知识，没上进心的，在家一日重复一日的打游戏！当然，题外话说多了，咱进入正题！

今天，公司没有给我具体的开发任务，受朋友邀请，我闲来无事，写篇博客献给在千里之外家乡的‘女性’朋友，也是奉献给大家阅读！

首先说说EasyUI

EasyUI的介入，大大减轻了程序员后台框架设计的工作量，其提供了简洁优美的后端页面，提供了强大的JS功能，譬如：基本布局(控制面板，选项卡，布局面板灯)，常见的客户端验证(非空验证，手机号，Email，身份证号等验证)，数据绑定(EasyUI采用轻量级数据传输，也就是大家常见的JSON格式数据)，数据分页，大量表单控件(按钮，菜单，下拉框，树，验证框，日历，滑动条，进度条等)，以及窗口及窗口对话框等。

以前大家做项目，可能为格式验证，相关插件去查阅大量的资料，费神费力费时，举个简单例子哈，(就diaLog为例，可能大家比较熟悉一个叫做artDiaLog的插件，参考网址：http://www.mb5u.com/jscode/html/ajax/426_artDialog2_0_4/   日历插件：比如：My97DatePicker，官方网址：http://www.my97.net 等等吧，总之：  大家可能在一个项目中用到多种插件，致使代码变的庞大，复杂，可读性差，难以维护)。那么EasyUI的到来，这些问题就迎刃而解了！EasyUI将这些全部封装了，大家尽可引入EasyUI相关JS  CSS文件后，按照EasyUI相关格式语法，进行书写！具体请参考EasyUI中文帮助手册.chm

那么现在我贴上几张图，先让大家目睹下EasyUI的界面效果。当然，我做的界面比较简单，还请大家多多包涵！

、

关于EasyUI的使用：

俗话说：授人以鱼不如授人以渔！

大家可尽情参考：http://www.jeasyui.com/  有demo 也有API文档，还有教程。

在三层架构中，我们应将EasyUI通用的页面布局的上部分、左导航部分、右部分、下部分用模板页处理！在此，我贴出我的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>e赔偿公众平台管理系统</title>
<link href="/jquery-easyui-1.3.0/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.3.0/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.3.0/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../jquery-easyui-1.3.0/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/jquery-easyui-1.3.0/themes/icon.css" />
<link href="/jquery-easyui-1.3.0/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="easyUI_JS/sys/master.js" type="text/javascript"></script>
<link href="css/master.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function datagrideReLoad() {
var pagesize = $('#test').datagrid('getPager').data("pagination").options.pageSize;
var pageNumber = $('#test').datagrid('getPager').data("pagination").options.pageNumber;
loadData(pageNumber, pagesize)
}

function outLogin() {
$.messager.confirm("系统提示", "您确定要退出当前系统吗？", function (data) {
if (data) {
window.location.href = "/Login.aspx";
}
});
}
</script>
<style type="text/css">
.div
{
height: 60px;
line-height: 60px;
float: right;
margin-right: 25px;
width: 60%;
border: 1px solid red;
}
</style>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</head>
<body class="easyui-layout">
<form id="form1" runat="server">
<div region="north" border="true" class="cs-north">
<div class="cs-north-bg">
<div class="cs-north-logo">
<a style="color: White; text-decoration: none;" href="JavaScript:void(0)" onclick="outLogin()">
上边部分
</div>
</div>
</div>
<div region="west" border="true" split="true" title="e赔偿公众平台" class="cs-west">
<div class="easyui-accordion" fit="true" border="false">
左侧导航部分
</div>
</div>
<div id="mainPanle" region="center" border="true" border="false">
<div id="tabs" class="easyui-tabs" fit="true" border="false">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div region="south" border="false" class="cs-south">
下面部分
</div>
<div id="mm" class="easyui-menu cs-tab-menu">
<div id="mm-tabupdate">
刷新</div>
<div class="menu-sep">
</div>
<div id="mm-tabclose">
关闭</div>
<div id="mm-tabcloseother">
关闭其他</div>
<div id="mm-tabcloseall">
关闭全部</div>
</div>
</form>
</body>
</html>

上述文件中引入了master.js  其他JS及CSS样式，请大家到官网上下载使用。本项目采用EasyUI1.3.0版本，属于早期版本，有点过时哦。

其代码如下：

function addTab(title, url) {
if ($('#tabs').tabs('exists', title)) {
$('#tabs').tabs('select', title); //选中并刷新
var currTab = $('#tabs').tabs('getSelected');
var url = $(currTab.panel('options').content).attr('src');
if (url != undefined && currTab.panel('options').title != 'Home') {
$('#tabs').tabs('update', {
tab: currTab,
options: {
content: createFrame(url)
}
})
}
} else {
var content = createFrame(url);
$('#tabs').tabs('add', {
title: title,
content: content,
closable: true
});
}
tabClose();
}
function createFrame(url) {
var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
return s;
}

function tabClose() {
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function () {
var subtitle = $(this).children(".tabs-closable").text();
$('#tabs').tabs('close', subtitle);
})
/*为选项卡绑定右键*/
$(".tabs-inner").bind('contextmenu', function (e) {
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});

var subtitle = $(this).children(".tabs-closable").text();

$('#mm').data("currtab", subtitle);
$('#tabs').tabs('select', subtitle);
return false;
});
}
//绑定右键菜单事件
function tabCloseEven() {
//刷新
$('#mm-tabupdate').click(function () {
var currTab = $('#tabs').tabs('getSelected');
var url = $(currTab.panel('options').content).attr('src');
if (url != undefined && currTab.panel('options').title != 'Home') {
$('#tabs').tabs('update', {
tab: currTab,
options: {
content: createFrame(url)
}
})
}
})
//关闭当前
$('#mm-tabclose').click(function () {
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close', currtab_title);
})
//全部关闭
$('#mm-tabcloseall').click(function () {
$('.tabs-inner span').each(function (i, n) {
var t = $(n).text();
if (t != 'Home') {
$('#tabs').tabs('close', t);
}
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function () {
var prevall = $('.tabs-selected').prevAll();
var nextall = $('.tabs-selected').nextAll();
if (prevall.length > 0) {
prevall.each(function (i, n) {
var t = $('a:eq(0) span', $(n)).text();
if (t != 'Home') {
$('#tabs').tabs('close', t);
}
});
}
if (nextall.length > 0) {
nextall.each(function (i, n) {
var t = $('a:eq(0) span', $(n)).text();
if (t != 'Home') {
$('#tabs').tabs('close', t);
}
});
}
return false;
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function () {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == 0) {
//msgShow('系统提示','后边没有啦~~','error');
alert('后边没有啦~~');
return false;
}
nextall.each(function (i, n) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function () {
var prevall = $('.tabs-selected').prevAll();
if (prevall.length == 0) {
alert('到头了，前边没有啦~~');
return false;
}
prevall.each(function (i, n) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
});
return false;
});

//退出
$("#mm-exit").click(function () {
$('#mm').menu('hide');
})
}

$(function () {
tabCloseEven();
$('.cs-navi-tab').click(function () {
var $this = $(this);
var href = $this.attr('src');
var title = $this.text();
addTab(title, href);
});
});

模板页创建好以后，就可以直接套用模板页，创建我们的第一个页面了！

那么，我把第一个页面代码也贴出来！

<%@ Page Title="" Language="C#" MasterPageFile="~/Manger/easyUI.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="szjt_police.Manger.index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<div title="百度一下你就知道">
<div class="cs-home-remark">
<h1>
百度一下你就知道</h1>
<br/>
制作：陈卧龙 QQ:1429677330
<br/>
博客：<a href="http://www.baidu.com" target="_blank">百度一下你就知道</a><br/>
说明：百度一下你就知道
</div>
</div>
</asp:Content>

该吃饭了，不写了！总之一句话：

授人以鱼不如授人以渔，大家可尽情参考：http://www.jeasyui.com/  有demo 也有API文档，还有教程。

浅谈EasyUI---C#三层架构---的更多相关文章

  1. 【转】浅谈MVC与三层架构

    首先给大家引入下MVC的概念: MVC(Model View Controller)模型.视图以及控制器,它是一种较为广泛应用的结构设计模式. 模型:就是在MVC设计模式中需要被显示的数据.在通常情况 ...

  2. 浅谈.NET,C#三层架构

     三层架构 常见架构: 三层(经典) MVC MVVM MVP   开发中常见的23种设计模式: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种: ...

  3. 浅谈.NET,C#三层架构（自己总结）

     三层架构 常见架构: 三层(经典) MVC MVVM MVP   开发中常见的23种设计模式: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种: ...

  4. 浅谈Java开发三层架构

    三层架构,一般来说就是将整个业务应用划分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL).区分层次的目的即为了“高内聚,低耦合”的思想. 概念简介 1.表现层(UI):简单来说,就是展现 ...

  5. 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  6. 浅谈大型web系统架构

    动态应用,是相对于网站静态内容而言,是指以c/c++.php.Java.perl..net等服务器端语言开发的网络应用软件,比如论坛.网络相册.交友.BLOG等常见应用.动态应用系统通常与数据库系统. ...

  7. 转：浅谈大型web系统架构

    浅谈大型web系统架构 动态应用,是相对于网站静态内容而言,是指以c/c++.php.Java.perl..net等服务器端语言开发的网络应用软件,比如论坛.网络相册.交友.BLOG等常见应用.动态应 ...

  8. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  9. 【ZZ】浅谈大型web系统架构 | 菜鸟教程

    浅谈大型web系统架构 http://www.runoob.com/w3cnote/large-scale-web-system-architecture.html

  10. 五分钟DBA：浅谈伪分布式数据库架构

    [IT168 技术]12月25日消息,2010互联网行业技术研讨峰会今日在上海华东理工大学召开.本次峰会以“互联网行业应用最佳实践”为主题,定位于互联网架构设计.应用开发.应用运维管理,同时,峰会邀请 ...

随机推荐

  1. laravel url() 和 asset() 的区别

    asset()方法用于引入 CSS/JavaScript/images 等文件,文件必须存放在public文件目录下.url()方法生成一个完整的网址.

  2. eclipse常用窗口和功能总结

    1.左上角File按钮功能:最重要的导入import第三方项目,maven,git,general等. File->import File->properties按钮,显示项目的存储位置, ...

  3. ECSHOP二次开发指南

    ECSHOP二次开发指南 发布时间:2013-05-28 12:47:00   来源:   评论:0 点击: 次 [字号:大 中 小] QQ空间新浪微博腾讯微博人人网豆瓣网百度空间百度搜藏开心网复制更 ...

  4. caca393刷PTP教程

        http://www.chickenclix.com/ 让大家等急了,最近真是很忙,对不住了:)好了闲话少说开始讲正题,再说可能有人要拍砖了............我们就以http://www ...

  5. Error:(12) No resource identifier found for attribute 'titles' in package 'com.itheima52.mobilesafe5

    http://stackoverflow.com/questions/5819369/error-no-resource-identifier-found-for-attribute-adsize-i ...

  6. php-- memcache 与 memcached支架的区别与共同点 个人整理

    首先声明:memcache 与 memcached 之间没有关系 1.概念相似 MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载. m ...

  7. 关于PushKit的使用总结

    1.PushKit的认识 (1)概念 ios8苹果新引入了名为pushkit的框架和一种新的push通知类型,被称作voip push.该push方式旨在提供区别于普通apns push的能力,通过这 ...

  8. pch找不到pod里头文件

    1. 问题描述 将文件用pod管理起来后,pod install成功,而且这些文件也可以搜索得到,但是pch文件里import的头文件找不到,而这些头文件又确确实实在你的pod项目下. 2. 解决办法 ...

  9. [LeetCode] Simplify Path（可以不用看）

    Given an absolute path for a file (Unix-style), simplify it. For example, path = "/home/", ...

  10. [LeetCode]题解（python）：041-First Missing Positive

    题目来源 https://leetcode.com/problems/first-missing-positive/ Given an unsorted integer array, find the ...