淺談EasyUI---C#三層架構---

每次寫部落格，第一句話都是這樣的：程式員很苦逼，除了會寫程式，還得會寫部落格！當然，希望将來的一天，某位老闆看到此部落格，給你的程式員職工加點薪資吧！因為程式員的世界除了苦逼就是沉默。我眼中的程式員大多都不愛說話，默默承受着程式設計的巨大壓力，除了技術上的交流外，他們不願意也不擅長和别人交流，更不樂意任何人走進他們的内心，他們常常一個人宅在家中！有上進心的，查查資料，學習新的知識，沒上進心的，在家一日重複一日的打遊戲！當然，題外話說多了，咱進入正題！

今天，公司沒有給我具體的開發任務，受朋友邀請，我閑來無事，寫篇部落格獻給在千裡之外家鄉的‘女性’朋友，也是奉獻給大家閱讀！

首先說說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>

<title>e賠償公衆平台管理系統</title>

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>

.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>

上邊部分

</div>

左側導航部分

<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">

</asp:ContentPlaceHolder>

下面部分

</div>

重新整理</div>

關閉</div>

關閉其他</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

$('#mm').data("currtab", subtitle);

$('#tabs').tabs('select', subtitle);

return false;

});

//綁定右鍵菜單事件

function tabCloseEven() {

//重新整理

$('#mm-tabupdate').click(function () {

//關閉目前

$('#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) {

//關閉目前右側的TAB

$('#mm-tabcloseright').click(function () {

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);

//關閉目前左側的TAB

$('#mm-tabcloseleft').click(function () {

if (prevall.length == 0) {

alert('到頭了，前邊沒有啦~~');

prevall.each(function (i, n) {

//退出

$("#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">

<h1>

百度一下你就知道</h1>

<br/>

制作：陳卧龍 QQ:1429677330

部落格：<a href="http://www.baidu.com" target="_blank">百度一下你就知道</a><br/>

說明：百度一下你就知道

該吃飯了，不寫了！總之一句話：

授人以魚不如授人以漁，大家可盡情參考：http://www.jeasyui.com/ 有demo 也有API文檔，還有教程。

付婷，你還那麼胖嗎？如果胖，就減肥肥吧。

淺談EasyUI---C#三層架構---

繼續閱讀

Ace Admin背景管理系統模闆、使用者權限管理設計、按鈕級别一、前言二、使用三、使用者權限管理系統界面結語

easyui源碼分析（parser.js）（3）

EasyUI基礎入門之Resiable(可縮放)

Easyui筆記之動态添加元件

jQuery Easy UI Droppable(放置)元件

JQuery Easy UI 使用

jQuery Easy UI Tooptip(提示框)元件

jQuery Easy UI整理筆記目錄jQuery Easy UI整理筆記目錄

Jquery Easy UI學習(一)datagrid的使用

EasyUI DataGrid 動态隐藏/顯示列支援拖拽改變顯示順序或拖拽隐藏/顯示需求一、toolbar中添加彈窗按鈕二、增加彈窗統一處理邏輯整體效果

JQuery easyui DataGrid隐藏某一列的功能

jQuery EasyUI1.3.2 comobotree 元件彈出後自動滾動到選擇的節點

js擷取浏覽器視窗寬高

學生資訊管理系統jdbc+servlet+jsp+easyui

springMvc如何和前端頁面互動，傳輸json資料springMvc和前端傳輸資料

jquery_126_demo