EasyUI 开发笔记(一)

由于某些原因，在公司做的后台需要改成类似于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=" 200px;"></div>
            </div>
        </div> 
        <!-- 右侧3秒收起面板 -->
        <div data-options="region:'east',iconCls:'icon-reload',split:true,title:'提醒内容'" style=" 180px;">
                <div id="divMainLeft"></div> 
        </div> 
        <!-- 左侧导航菜单 -->
        <div data-options="region:'west',split:true" title="导航菜单" style=" 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;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 == 0 && m.IsNavigation == 1);//获得所有一级菜单  
             

            // 主要功能树
            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 == 1); //获得某个一级菜单下的所有二级菜单
        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的增删改查功能。