由于某些原因，在公司做的后台需要改成类似于Ext.js 形式的后台，主要看好其中的 框架布局，以及tab开页面和弹出式内部窗体。

后来看看，改成EasyUI，较Ext.js 库小很多，也便于公司的初级程序员能尽快上手，只需要jquery与js的部分开发知识即可。

目前，这块的后台已经开发进行一段时间了，现整理下，做个开发笔记。

笔记就分3部分，如果看懂的话，做一般的XX管理系统，都无问题了。

1. 页面整体框架搭建。

2. 某一个功能页面的增删改查。

3. 一些遇到的问题解决办法。

界面截图:

不多说了，直接上代码：

<!DOCTYPE html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>统一管理后台 v2.0</title>

    <link rel="stylesheet" type="text/css" href="/css/easyui_themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="/css/easyui_themes/icon.css">

    <link href="/css/main.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="/js/jquery-1.7.min.js"></script>

    <script type="text/javascript" src="/js/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="/js/common.js"></script>

    <script src="/js/My97DatePicker/WdatePicker.js" type="text/javascript"> </script>

    <link href="/js/easyrt/easyrt.css" rel="stylesheet" />

    <script src="/js/easyrt/easyui.js"></script>

    <script src="/js/easyrt/easyrt.js"></script>

</head>

<body id="bd" class="easyui-layout">

    <form id="form1" runat="server">

        <!-- 头部标题面板 -->

        <div data-options="region:'north',split:true" title="统一管理后台v2.0.0 beta version" style="height: 90px; overflow: hidden; padding: 0px;">

            <span style="float: right; padding-right: 20px;" class="head">欢迎  XXX<a href="javascript:void(0);" id="editpass" onclick="AddTab('/admin/system/UpdatePwd.aspx','icon-z_eva','修改密码')">修改密码</a> <a href="javascript:void(0);" id="loginOut">安全退出</a></span>

            <p></p>

        </div>

         <!-- 底部收起的面板 -->

        <div data-options="region:'south',split:true" title="South Title" style="height: 90px; padding: 0px; background: #efefef;">

            <div class="easyui-layout" data-options="fit:true" style="background: #ccc;">

                <div data-options="region:'center'"></div>

                <div data-options="region:'east',split:true" style="width: 200px;"></div>

            </div>

        </div>

        <!-- 右侧3秒收起面板 -->

        <div data-options="region:'east',iconCls:'icon-reload',split:true,title:'提醒内容'" style="width: 180px;">

                <div id="divMainLeft"></div>

        </div>

        <!-- 左侧导航菜单 -->

        <div data-options="region:'west',split:true" title="导航菜单" style="width: 200px; padding: 1px; overflow: hidden;">

            <div class="easyui-accordion" data-options="fit:true,border:false">

               <!-- 主分类 -->

              <%=MenuStr %>

            </div>

        </div>

        <!-- 居中tab页面 -->

        <div id="divCenter" data-options="region:'center'" style="overflow: hidden;">

            <div id="tabList" class="easyui-tabs" data-options="fit:true,border:false,tools:'#tab-tools'">

                <div title="首页" style="padding: 20px; overflow: hidden;" data-options="closable:true" >

                    <div style="margin-top: 20px;">

                        <h3>tab首页</h3>

                        <ul>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

         <div id="tab-tools">

            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'"

                onclick="TabReload()"></a>

        </div>

    </form>

</body>

<script src="js/easyrt/urchin.js"></script>

<script>

    $(function () {

        // 底部收起 暂不用

        setTimeout(function () {

            $('body').layout('collapse', 'south');

        }, 0);

        // 右侧收起

        setTimeout(function () {

            $('body').layout('collapse', 'east');

            // 右侧标题文字

            $($(".layout-expand > .panel-body")[1])

                .html("<span id='leftTipTitle' style='display:block;width:16px;padding-left:7px;'></span>");

        }, 2 * 1000);

        // 退出

        $('#loginOut').click(function () {

            $.messager.confirm('系统提示', '您确定要退出本次登录吗?', function (r) {

                if (r) {

                    location.href = '/Login.aspx';

                }

            });

        });

    });

    //$('body').layout('expand','east'); 展开右侧

</script>

前台UI框架代码

这块就是左侧导航，最简单的方法就是，直接用后台代码输出到这里。<%= %>展示即可。当然也可以看easyui帮助文档，json数据绑定。

 protected string CreateMenu(string roleId)

    {

        UserMenuMgr bll = new UserMenuMgr();

        List<UserMenu> allList = bll.GetRoleMenuList(roleId);//先获取该角色拥有的所有菜单

        StringBuilder sb = new StringBuilder();

        if (allList != null)

        {

            List<UserMenu> _sysMenu = allList.FindAll(m => m.ParentId ==  && m.IsNavigation == );//获得所有一级菜单  

            // 主要功能树

            sb.Append("<div title=\"主要功能\"  data-options=\"\"  style=\"overflow: auto; padding: 10px\"> <ul class=\"easyui-tree\">");

            foreach (var entity in _mainMenu)

            {

                ForBody(sb, entity, allList);

            }

            sb.Append(" </ul></div>");

        }

        MenuStr = sb.ToString();

        return sb.ToString();

    }

    private static void ForBody(StringBuilder sb, UserMenu entity, List<UserMenu> allList)

    {

        if (!string.IsNullOrWhiteSpace(entity.EasyUIIcon))  //有图标

        {

            sb.Append("<li data-options=\"state:'closed', iconCls:'" + entity.EasyUIIcon + "'\"> ");

        }

        else

        {

            sb.Append("<li data-options=\"state:'closed'\"> ");

        }

        sb.Append(string.Format("<span>{0}</span>", entity.MenuName));

        sb.Append("<ul>");

        List<UserMenu> childList = allList.FindAll(

            m => m.ParentId == entity.MenuId && m.IsNavigation == ); //获得某个一级菜单下的所有二级菜单

        foreach (var subEntity in childList)

        {

            if (!string.IsNullOrWhiteSpace(subEntity.EasyUIIcon))  //有图标

            {

                sb.Append("<li data-options=\"iconCls:'" + subEntity.EasyUIIcon + "'\"> ");

            }

            else

            {

                sb.Append("<li data-options=\"\"> ");

            }

            sb.Append(

                string.Format(

                    "<span><a style='text-decoration: none;color:#000' href=\"javascript:void(0);\" onclick=\"AddTab('{0}', '{2}', '{1}')\">{1}</a></span>",

                //iconCls:'icon-v_SysModule'

                    subEntity.MenuAddress, subEntity.MenuName, subEntity.EasyUIIcon));

            sb.Append("</li>");

        }

        sb.Append("</li></ul>");

    }

后台输出左侧导航菜单

通用js

function AddTab(url, icon, title) {

    if ($('#tabList').tabs('exists', title)) {

        $('#tabList').tabs('select', title);

        TabReload();

    } else {

        $('#tabList').tabs('add', {

            title: title,

            href: url,

            iconCls: icon,

            closable: true

        });

    }

}

function TabReload() {

    $('#tabList').tabs('getSelected').panel('refresh');

}

function ExitTab(title) {

    $('#tabList').tabs('close', title);

}

function getUrlParam(div, paras) {

    var url = $('#' + div).panel("options").href;

    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");

    var paraObj = {}

    for (i = 0; j = paraString[i]; i++) {

        paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);

    }

    var returnValue = paraObj[paras.toLowerCase()];

    if (typeof (returnValue) == "undefined") {

        return "";

    } else {

        return returnValue;

    }

}

function showException(msg) {

    $.messager.show({

        title: '消息提示',

        msg: msg,

        showType: 'slide',

        timeout: 1000,

        style: {

            //right: '',

            //top: document.body.scrollTop + document.documentElement.scrollTop,

            //bottom: ''

            right: '',

            bottom: ''

        }

    });

}

Common.js

大体就这些吧。一个框架代码就搞定了。

这里要注意一点，每个从左侧菜单点击后的，在tab展示，都不是以iframe 形式去来展示新开的页面的。而是加载形式，统一加载到这个页面中。

例如，如果你要获取a页面的div，你在新开的b页面也可以获取到。所以，问题来了，所以div input等html标签的id都不能重名，如果你要用id获取对象进行操作的话。

此块用到的主要easyui，就是:

1. 用class 定义easyui类型

2. region: xxxx 页面布局

3. class: easyui-tree 的树来展示菜单导航

4. 以及部分js，如何展开 收起region、弹出tab页、再次点击切换到当前页以及刷新当前页等。

下一节，主要做一个其中的页面，实现easyui的增删改查功能。

【版权声明】转载请注明出处： http://www.cnblogs.com/yiayi/p/3485258.html

EasyUI 开发笔记(一)的更多相关文章

  1. EasyUI 开发笔记(二)

    接上篇 :EasyUI 开发笔记(一)  (http://www.cnblogs.com/yiayi/p/3485258.html) 这期就简单介绍下, easyui 的 list 展示, 在easy ...

  2. [开发笔记]-未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出【转载自：酷小孩】

    原文地址:http://www.cnblogs.com/babycool/p/3199158.html 今天打算用VisualStudio2012做一个js效果页面测试的时候,打开VS2012新建项目 ...

  3. [Openwrt 项目开发笔记]：Openwrt平台搭建（一）

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 最近开始着手进行Openwrt平台的物联网网关设 ...

  4. Android移动APP开发笔记——Cordova（PhoneGap）通过CordovaPlugin插件调用 Activity 实例

    引言 Cordova(PhoneGap)采用的是HTML5+JavaScript混合模式来开发移动手机APP,因此当页面需要获取手机内部某些信息时(例如:联系人信息,坐标定位,短信等),程序就需要调用 ...

  5. Android移动APP开发笔记——最新版Cordova 5.3.1（PhoneGap）搭建开发环境

    引言 简单介绍一下Cordova的来历,Cordova的前身叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova.它能让你使用HTML5轻松调用本地AP ...

  6. 开发笔记：基于EntityFramework.Extended用EF实现指定字段的更新

    今天在将一个项目中使用存储过程的遗留代码迁移至新的架构时,遇到了一个问题——如何用EF实现数据库中指定字段的更新(根据UserId更新Users表中的FaceUrl与AvatarUrl字段)? 原先调 ...

  7. Lucene/Solr搜索引擎开发笔记 - 第1章 Solr安装与部署（Jetty篇）

    一.为何开博客写<Lucene/Solr搜索引擎开发笔记> 本人毕业于2011年,2011-2014的三年时间里,在深圳前50强企业工作,从事工业控制领域的机器视觉方向,主要使用语言为C/ ...

  8. [openwrt 项目开发笔记]： 传送门

    “Openwrt 项目开发笔记”系列传送门: [Openwrt 项目开发笔记]:Openwrt平台搭建(一) (2014-07-11 00:11) [Openwrt 项目开发笔记]:Openwrt平台 ...

  9. 安卓开发笔记——深入Activity

    在上一篇文章<安卓开发笔记——重识Activity >中,我们了解了Activity生命周期的执行顺序和一些基本的数据保存操作,但如果只知道这些是对于我们的开发需求来说是远远不够的,今天我 ...

随机推荐

  1. python【1】-基础知识

    1.简介 python是一种解释性的.面向对象的.带有动态语义的高级程序设计语言. 廖雪峰网站:http://www.liaoxuefeng.com/wiki/001374738125095c955c ...

  2. AJAX（一、基本知识）

    AJAX:Asynchronous ([ə'sɪŋkrənəs; eɪ-])Javascript (['dʒɑ:və,skrɪpt])and XML 异步的Javascript和XMLAJAX不是新的 ...

  3. Singleton Pattern单例模式

    单例模式是一种对象创建模式,它用于产生一个对象的具体实例,它可以确保系统中一个类只产生一个实例.Java里面实现的单例是一个虚拟机的范围,因为装载类的功能是虚拟机的,所以一个虚拟机在通过自己的 Cla ...

  4. layout内容整理

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. Android apk集成

    刚开始学习Android,对很多东西都不懂,所以以下是我做的第一件事,记录一下,也就是apk的集成: 我们集成的apk是已经签过名的第三方apk,并且需要集成到system/priv-app目录下,过 ...

  6. C#获取一个目录下的所有文件名

    今天在做图像训练的时候发现需要把一大堆图片进行处理再读进分类器,本来是用C++写的,结果发现并不会,于是就用回了我最爱的C#,结果棒棒哒. 代码如下,简单粗暴,比网上C++的语法好看多了 using ...

  7. 适合PHP学习者的学习路线 10个PHP优化技巧

    适合PHP学习者的学习路线: (1) 熟悉HTML/CSS/JS..网页基本元素,完成阶段可自行制作简单的网页,对元素属性相对熟悉 (2) 理解动态语言的概念和运做机制,熟悉基本的PHP语法 (3) ...

  8. Three.js入门

    一.前段时候花了些功夫研究了下WebGL,了解了基本实体的实现原理和实现方法,现在回忆就只记得如果要我画个圆形,怀疑都要了我的命(那得画多少个三角形...).功夫不负有心人,今天学习Three.js得 ...

  9. Fiddler-3 配置Fiddler监听iphone的http/https请求

    电脑端可以通过Fiddler监听手机端的http请求.需要两个步骤:首先配置Fiddler,再配置手机端. 1 配置 Fiddler 允许远程设备连接: 菜单Tools - Telerik Fiddl ...

  10. EL和JSTL专题

    EL简介 EL全名为Expression Language,它原本是JSTL 1.0为方便存取数据所自定义的语言.当时只能在JSTL标签中使用,如下: <c:out value="${ ...