使用 EasyUI 写一些后台常用的界面

程序员文章站 2022-06-15 14:15:36

...

一、前言

EasyUI是比较早接触的 UI 框架，使用的时间也较长，主要是用来做后台管理界面的，减少开发成本、时间、难度，但是界面也是相当简陋的。下面列举一些常用的界面，如主页、CRUD、登录界面等

二、代码与效果

1、主页：

① 代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"></meta>
        <title>larger5</title>
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css" />
        <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
        <!--中文化-->
        <script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript">
            function openTab(text, url, iconCls) {
                if($("#tabs").tabs("exists", text)) {
                    //如果已经存在，则使之处于选中的状态
                    $("#tabs").tabs("select", text);
                } else {
                    //如果不存在则新增加一个
                    var content = "<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='" + url + "'></iframe>";
                    $("#tabs").tabs("add", {
                        title: text, //标题
                        iconCls: iconCls, //图标
                        closable: true, //可以关闭
                        content: content //内容，内嵌一个 iframe！
                    });
                }
            }
        </script>
    </head>

    <body class="easyui-layout">

        <div region="north" style="height: 107px;background-color: #F0F0F0">
            <table style="padding: 5px" width="100%">
                <tr>
                    <td width="50%">
                        <img alt="logo" src="images/logo.png" />
                    </td>
                    <td valign="bottom" align="right" width="50%">
                        <font size="3">&nbsp;&nbsp;<strong>欢迎：</strong><span>xx</span></font>
                    </td>
                </tr>
            </table>
        </div>

        <div region="center">
            <div class="easyui-tabs" fit="true" border="false" id="tabs">
                <div title="首页" data-options="iconCls:'icon-help'">
                    <div align="center" style="padding-top: 100px"> 
                        <font color="green" size="10">欢迎使用</font>
                    </div>
                </div>
            </div>
        </div>

        <div region="west" style="width: 200px" title="导航菜单" split="true">
            <div style="padding-top: 10px;padding-left: 10px;">
                <a href="javascript:openTab('添加','https://www.baidu.com','icon-add')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" style="width: 150px;">添加</a>
                <a href="javascript:openTab('修改','https://www.360.cn','icon-edit')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" style="width: 150px;">修改</a>
                <a href="javascript:openTab('删除','https://www.csdn.net','icon-remove')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" style="width: 150px;">删除</a>
                <a href="javascript:openTab('保存','http://edu.51cto.com','icon-ok')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-ok'" style="width: 150px;">保存</a>
                <a href="javascript:openTab('导出','http://www.people.com.cn/','icon-save')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" style="width: 150px;">导出</a>
                <a href="javascript:logout()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-no'" style="width: 150px;">退出</a>
            </div>
        </div>

        <div region="south" style="height: 30px;padding: 5px" align="center">
            Copyright © 2016-2018 larger5
        </div>

    </body>

</html>

②效果

使用 EasyUI 写一些后台常用的界面

2、CRUD

① 代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8"></meta>
        <title>CRUD</title>
        <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css" />
        <script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
        <script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
        <!-- 中文化 -->
        <script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    </head>
    <table id="dg" title="用户 CRUD 管理" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" url="/user/list" fit="true" toolbar="#tb">
        <thead>
            <tr>
                <th field="cb" checkbox="true" align="center"></th>
                <th field="id" width="100" align="center">编号</th>
                <th field="name" width="200" align="center">用户名</th>
                <th field="word" width="200" align="center">密码</th>
            </tr>
        </thead>
    </table>

    <!-- CRUD 菜单栏 -->
    <div id="tb">
        <!--plain="true"去掉边框-->
        <a href="javascript:openLinkAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:openLinkModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="javascript:deleteLink()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>

    <!-- 修改框内容 -->
    <div id="dlg" class="easyui-dialog" style="width: 500px;height: 200px;padding: 10px 20px" closed="true" buttons="#dlg-buttons">
        <form id="fm" method="post">
            <table cellspacing="8px">
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text" id="name" name="name" class="easyui-validatebox" required="true" />
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="text" id="word" name="word" class="easyui-validatebox" required="true" />
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <!-- 修改对话框的 save、close 按钮 -->
    <div id="dlg-buttons">
        <a href="javascript:saveLink()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
        <a href="javascript:closeLinkDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
    </div>

    <body>
    </body>

</html>

② 效果

使用 EasyUI 写一些后台常用的界面

其他的再慢慢更新…

三、小结

1、EasyUI 中文参考文档，相当不错

使用 EasyUI 写一些后台常用的界面

一、前言

二、代码与效果

1、主页：

① 代码

②效果

2、CRUD

① 代码

② 效果

三、小结

使用jquery-easyui的布局layout写后台管理页面的代码详解

使用 EasyUI 写一些后台常用的界面

使用jquery-easyui的布局layout写后台管理页面的代码详解