浅谈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