后台管理项目页面搭建模板

BNTang

资料准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IT6666权限管理系统</title>
    <link rel="stylesheet" type="text/css" href="./uimaker/easyui.css">
    <link rel="stylesheet" type="text/css" href="./uimaker/icon.css">
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./easyui-lang-zh_CN.js"></script>
</head>
<body>

</body>
</html>

Layout布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IT6666权限管理系统</title>
    <link rel="stylesheet" type="text/css" href="./uimaker/easyui.css">
    <link rel="stylesheet" type="text/css" href="./uimaker/icon.css">
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./easyui-lang-zh_CN.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body class="easyui-layout">
<div data-options="region:\'north\'" style="height:100px;background: #ec4e00;padding: 20px 20px">
    <img src="main_logo.png"/>
</div>
<div data-options="region:\'south\'" style="height:50px;padding-top: 15px;border-bottom: 3px solid #ec4e00;">
    <p align="center" font-size="14px">Copyright (c) 2020-2030 IT6666.Co.Ltd. All Rights Reserved.</p>
</div>
<div data-options="region:\'west\',split:true" style="width:300px;">
    <div id="aa" class="easyui-accordion" data-options="fit:true">
        <div title="菜单" data-options="iconCls:\'icon-save\',selected:true" style="overflow:auto;padding:10px;">
            <ul id="tree"></ul>
        </div>
        <div title="Title2" data-options="iconCls:\'icon-reload\'" style="padding:10px;">
            content2
        </div>
        <div title="Title3">
            content3
        </div>
    </div>
</div>
<div data-options="region:\'center\'" style="padding:5px;background:#eee;">
    <div id="tabs">
    </div>
</div>

<script>
    $(function () {
        $(\'#tree\').tree({
            url: \'tree.json\',
            lines: true,
            onClick: function (node) {
                // 在添加标签之前，做判断，判断这个标签是否存在
                let exists = $(\'#tabs\').tabs(\'exists\', node.text);
                if (exists) {
                    // 存在就选中
                    $(\'#tabs\').tabs(\'select\', node.text);
                } else {
                    // 不存在就添加
                    $("#tabs").tabs("add", {
                        title: node.text,
                        closable: true,
                        content: `<iframe src=${node.attributes.url} width="100%" height="100%" frameborder="0"></iframe>`
                    });
                }
            }
        });
        $(\'#tabs\').tabs({
            fit: true
        });
    });
</script>
</body>
</html>

动态添加标签页

...

<div data-options="region:\'west\',split:true" style="width:300px;">
    <div id="aa" class="easyui-accordion" data-options="fit:true">
        <div title="菜单" data-options="iconCls:\'icon-save\',selected:true" style="overflow:auto;padding:10px;">
            <ul id="tree"></ul>
        </div>
        <div title="Title2" data-options="iconCls:\'icon-reload\'" style="padding:10px;">
            content2
        </div>
        <div title="Title3">
            content3
        </div>
    </div>
</div>
<div data-options="region:\'center\'" style="padding:5px;background:#eee;">
    <div id="tabs">
    </div>
</div>

<script>
    $(function () {
        $(\'#tree\').tree({
            url: \'tree.json\',
            lines: true,
            onClick: function (node) {
                // 在添加标签之前，做判断，判断这个标签是否存在
                let exists = $(\'#tabs\').tabs(\'exists\', node.text);
                if (exists) {
                    // 存在就选中
                    $(\'#tabs\').tabs(\'select\', node.text);
                } else {
                    // 不存在就添加
                    $("#tabs").tabs("add", {
                        title: node.text,
                        closable: true,
                        content: `<iframe src=${node.attributes.url} width="100%" height="100%" frameborder="0"></iframe>`
                    });
                }
            }
        });
        $(\'#tabs\').tabs({
            fit: true
        });
    });
</script>

...

Tabs页面引入

修改 index.html

...

<script>
    $(function () {
        $(\'#tree\').tree({
            url: \'tree.json\',
            lines: true,
            onClick: function (node) {
                // 在添加标签之前，做判断，判断这个标签是否存在
                let exists = $(\'#tabs\').tabs(\'exists\', node.text);
                if (exists) {
                    // 存在就选中
                    $(\'#tabs\').tabs(\'select\', node.text);
                } else {
                    // 不存在就添加
                    $("#tabs").tabs("add", {
                        title: node.text,
                        closable: true,
                        
                        // 重点是这里
                        content: `<iframe src=${node.attributes.url} width="100%" height="100%" frameborder="0"></iframe>`
                    });
                }
            }
        });
        $(\'#tabs\').tabs({
            fit: true
        });
    });
</script>

...

新建 department.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
部门
</body>
</html>

新建 employee.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
</head>
<body>
员工管理
</body>
</html>

修改员工页面 employee.html 添加数据表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link rel="stylesheet" type="text/css" href="./uimaker/easyui.css">
    <link rel="stylesheet" type="text/css" href="./uimaker/icon.css">
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./easyui-lang-zh_CN.js"></script>
</head>
<body>

<table id="dg"></table>

<script>
    $(function () {
        $(\'#dg\').datagrid({
            url: \'datagrid_data.json\',
            columns: [[
                {field: \'name\', title: \'姓名\', width: 80, align: \'center\'},
                {field: \'date\', title: \'入职日期\', width: 80, align: \'center\'},
                {field: \'email\', title: \'邮件\', width: 80, align: \'center\'},
                {
                    field: \'department\',
                    title: \'部门\',
                    width: 100,
                    align: \'center\',
                    formatter: function (value, row, index) {
                        if (row.department.name) {
                            return row.department.name;
                        }
                    }
                },
                {
                    field: \'state\', title: \'状态\', width: 100, align: \'center\', formatter: function (value, row, index) {
                        if (row.state) {
                            return \'在职\';
                        } else {
                            return `<font color="red">离职</font>`;
                        }
                    }
                }
            ]],
            fit: true,
            fitColumns: true,
            // 显示行号
            rownumbers: true,
        });
    });
</script>
</body>
</html>

添加表格工具栏，toolbar

...

<div id="tb">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-add\',plain:true">添加</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-edit\',plain:true">编辑</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-remove\',plain:true">删除</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-reload\',plain:true">刷新</a>
</div>

...

<script>
    $(function () {
        $(\'#dg\').datagrid({
            url: \'datagrid_data.json\',
            columns: [[
                {field: \'name\', title: \'姓名\', width: 80, align: \'center\'},
                {field: \'date\', title: \'入职日期\', width: 80, align: \'center\'},
                {field: \'email\', title: \'邮件\', width: 80, align: \'center\'},
                {
                    field: \'department\',
                    title: \'部门\',
                    width: 100,
                    align: \'center\',
                    formatter: function (value, row, index) {
                        if (row.department.name) {
                            return row.department.name;
                        }
                    }
                },
                {
                    field: \'state\', title: \'状态\', width: 100, align: \'center\', formatter: function (value, row, index) {
                        if (row.state) {
                            return \'在职\';
                        } else {
                            return `<font color="red">离职</font>`;
                        }
                    }
                }
            ]],
            fit: true,
            fitColumns: true,
            // 显示行号
            rownumbers: true,
            toolbar: \'#tb\'
        });
    });
</script>
</body>
</html>

点击添加按钮 弹出 Dialog

<div id="tb">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-add\',plain:true" id="add">添加</a>
</div>

<div id="dialog">
    <table align="center" style="margin-top: 10px;">
        <tr>
            <td>姓名：</td>
            <td><input type="text"/></td>
        </tr>
        <tr>
            <td>入职日期：</td>
            <td><input type="text"/></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text"/></td>
        </tr>
        <tr>
            <td>部门：</td>
            <td align="left"><select id="department"></select></td>
        </tr>
        <tr>
            <td>状态：</td>
            <td align="left"><select></select></td>
        </tr>
    </table>
</div>

<script>
    $(function () {
        $("#add").click(function () {
            $(\'#dialog\').dialog({
                width: 300,
                height: 250,
                buttons: [{
                    text: \'保存\',
                    iconCls: \'icon-save\',
                    handler: function () {
                        alert(\'保存\');
                    }
                }, {
                    text: \'关闭\',
                    iconCls: \'icon-cancel\',
                    handler: function () {
                        $(\'#dialog\').dialog(\'close\');
                    }
                }]
            });
        });
    });
</script>

加入表单校验

...

<tr>
    <td>姓名：</td>
    <td><input type="text" class="easyui-validatebox" data-options="required:true"/></td>
</tr>
<tr>
    <td>邮箱：</td>
    <td><input type="text" class="easyui-validatebox" data-options="required:true,validType:\'email\'"/></td>
</tr>

...

处理部门和状态的下拉框

...

<tr>
    <td>部门：</td>
    <td align="left"><select id="department"></select></td>
</tr>
<tr>
    <td>状态：</td>
    <td align="left"><select id="state"></select></td>
</tr>

$(\'#state\').combobox({
    width: 160,
    panelHeight: \'auto\',
    valueField: \'value\',
    textField: \'label\',
    data: [{
        label: \'在职\',
        value: \'true\',
    }, {
        label: \'离职\',
        value: \'false\',
    }]
});

$(\'#state\').combobox("select", "在职");

$(\'#department\').combobox({
    url: \'department.json\',
    valueField: \'id\',
    textField: \'name\',
    width: 160,
    panelHeight: \'auto\'
});

$(\'#department\').combobox("select", "财务部");

...

日期框的处理

...

<tr>
    <td>入职日期：</td>
    <td><input type="text" class="easyui-datebox" required="required"/></td>
</tr>

...

表单提交

...

<form id="myForm">
    <table align="center" style="margin-top: 10px;">
        <tr>
            <td>姓名：</td>
            <td><input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></td>
        </tr>
        <tr>
            <td>入职日期：</td>
            <td><input type="text" name="date" class="easyui-datebox" required="required"/></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text" name="email" class="easyui-validatebox"
                       data-options="required:true,validType:\'email\'"/></td>
        </tr>
        <tr>
            <td>部门：</td>
            <td align="left"><select name="department.id" id="department"></select></td>
        </tr>
        <tr>
            <td>状态：</td>
            <td align="left"><select name="state" id="state"></select></td>
        </tr>
    </table>
</form>

$("#add").click(function () {
    $(\'#dialog\').dialog({
        width: 300,
        height: 250,
        title: \'添加员工\',
        buttons: [{
            text: \'保存\',
            iconCls: \'icon-save\',
            handler: function () {
                // 提交表单
                $(\'#myForm\').form(\'submit\', {
                    url: \'save.json\',
                    success: function (data) {
                        data = $.parseJSON(data);
                        if (data.success) {
                            $.messager.alert(\'温馨提示\', data.msg);
                            // 表格重载
                            $(\'#dg\').datagrid(\'reload\');
                            // 关闭对话框
                            $(\'#dialog\').dialog(\'close\');
                            // 重置表单数据
                        } else {
                            $.messager.alert(\'温馨提示\', data.msg);
                        }
                    }
                });
            }
        }, {
            text: \'关闭\',
            iconCls: \'icon-cancel\',
            handler: function () {
                $(\'#dialog\').dialog(\'close\');
            }
        }]
    });
});

...

编辑员工处理，必须要选中一行数据进行修改，不允许多选，然后就是公用同一个Dialog

禁止表格数据多选

$(\'#dg\').datagrid({
    // 不允许多选
    singleSelect: true
});

编辑判断是否选中了数据

$(\'#edit\').click(function () {
    //判断是否选中了数据
    let rowData = $("#dg").datagrid("getSelected");
    if (!rowData) {
        $.messager.alert("温馨提示", "请选中一条数据进行编辑");
    }
});

把Dialog 抽取公用

$(\'#dialog\').dialog({
    width: 300,
    height: 250,
    title: \'添加员工\',
    buttons: [{
        text: \'保存\',
        iconCls: \'icon-save\',
        handler: function () {
            // 提交表单
            $(\'#myForm\').form(\'submit\', {
                url: \'save.json\',
                success: function (data) {
                    data = $.parseJSON(data);
                    if (data.success) {
                        $.messager.alert(\'温馨提示\', data.msg);
                        // 表格重载
                        $(\'#dg\').datagrid(\'reload\');
                        // 关闭对话框
                        $(\'#dialog\').dialog(\'close\');
                        // 重置表单数据
                    } else {
                        $.messager.alert(\'温馨提示\', data.msg);
                    }
                }
            });
        }
    }, {
        text: \'关闭\',
        iconCls: \'icon-cancel\',
        handler: function () {
            $(\'#dialog\').dialog(\'close\');
        }
    }],
    closed: true
});

去掉默认选择

$(\'#state\').combobox("select", "在职");
$(\'#department\').combobox("select", "财务部");

改造添加回调

$("#add").click(function () {
    $(\'#dialog\').dialog(\'open\');
});

我把改造了的地方贴出来，后面在解释

...

<div id="dialog">
    <form id="myForm">
        <input name="id" hidden="hidden"/>
    </form>
</div>

$(\'#dialog\').dialog({
    width: 300,
    height: 250,
    buttons: [{
        text: \'保存\',
        iconCls: \'icon-save\',
        handler: function () {
            // ID有值就是编辑没有就是添加
            let id = $("[name = \'id\']").val();
            let url;
            if (id) {
                url = "update.json";
            } else {
                url = "save.json";
            }

            // 提交表单
            $(\'#myForm\').form(\'submit\', {
                url: url,
                success: function (data) {
                    data = $.parseJSON(data);
                    if (data.success) {
                        $.messager.alert(\'温馨提示\', data.msg);
                        // 表格重载
                        $(\'#dg\').datagrid(\'reload\');
                        // 关闭对话框
                        $(\'#dialog\').dialog(\'close\');
                        // 重置表单数据
                    } else {
                        $.messager.alert(\'温馨提示\', data.msg);
                    }
                }
            });
        }
    }, {
        text: \'关闭\',
        iconCls: \'icon-cancel\',
        handler: function () {
            $(\'#dialog\').dialog(\'close\');
        }
    }],
    closed: true
});

$("#add").click(function () {
    // 清空表单
    $("#myForm").form("clear");
    $(\'#dialog\').dialog(\'setTitle\', \'添加员工\');
    $(\'#dialog\').dialog(\'open\');
});

$(\'#edit\').click(function () {
    //判断是否选中了数据
    let rowData = $("#dg").datagrid("getSelected");
    if (!rowData) {
        $.messager.alert("温馨提示", "请选中一条数据进行编辑");
        return;
    }

    // 清空表单
    $("#myForm").form("clear");
    $(\'#dialog\').dialog(\'setTitle\', \'添加员工\');
    // 弹出对话框
    $(\'#dialog\').dialog(\'open\');

    rowData["department.id"] = rowData["department"].id;
    rowData["state"] = rowData["state"] + "";

    // 数据回显，同名匹配
    $("#myForm").form("load", rowData);
});

...
  • 添加了一个隐藏域，用于区分添加还是编辑
  • 点击编辑数据回显，回显之前先清空表单数据
  • 点击添加按钮数据先清空

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode