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

资料准备

资料下载地址为：https://wws.lanzous.com/i9Q9Mgi22zi

创建一个普通的纯 HTML 项目引入 EasyUI 上面我给出了下载地址

<!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);
});

...

添加了一个隐藏域，用于区分添加还是编辑

点击编辑数据回显，回显之前先清空表单数据

点击添加按钮数据先清空

posted @ 2020-09-10 17:39 BNTang 阅读(230) 评论(4) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

BNTang

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

资料准备

Layout布局

Tabs页面引入

公告