EasyUI 开发笔记(一)

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

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

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

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

1. 页面整体框架搭建。

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

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

界面截图:

EasyUI 开发笔记(一)

不多说了，直接上代码：

<!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的增删改查功能。

秒客网

EasyUI 开发笔记(一)

相关文章