每次寫博客，第一句話都是這樣的：程序員很苦逼，除了會寫程序，還得會寫博客！當然，希望將來的一天，某位老板看到此博客，給你的程序員職工加點薪資吧！因為程序員的世界除了苦逼就是沉默。我眼中的程序員大多都不愛說話，默默承受着編程的巨大壓力，除了技術上的交流外，他們不願意也不擅長和別人交流，更不樂意任何人走進他們的內心，他們常常一個人宅在家中！有上進心的，查查資料，學習新的知識，沒上進心的，在家一日重復一日的打游戲！當然，題外話說多了，咱進入正題！
今天，公司沒有給我具體的開發任務，受朋友邀請，我閑來無事，寫篇博客獻給在千里之外家鄉的‘女性’朋友，也是奉獻給大家閱讀！
首先說說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文檔，還有教程。