Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 10.查看账户

原文地址：http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-show.html
更多教程：光束云 - 免费课程

序号	文内章节	视频
1	概述	-
2	提取showAlert方法	-
3	为查看按钮增加事件	-
4	实现事件函数	-
5	实例源码	-

请参照如上章节导航进行阅读

1.概述

接下来实现 账户列表 页面的 查看账户 功能，预期实现的画面效果如下：

Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 10.查看账户

实现要点：

抽象出一个通用 showAlert 脚本函数
点击查看按钮时调用该函数

2.提取showAlert方法

修改 modal-dialog-utils.js 通用工具包

实现 handleShowAlert

/**
 * 弹出提示框
 * @param modalId
 * @param title
 * @param message
 */
let handleShowAlert = function(modalId, title, message) {
    let modal = $('<div ></div>');

    let modalDialog = $('<div></div>');
    let modalContent = $('<div></div>');
    let modalHeader = $('<div></div>');
    let modalBody = $('<div></div>');
    let modalFooter = $('<div></div>');

    let html;

    // modal-header html
    modalHeader.attr('class', 'modal-header');
    html = '';
    html = html + '<h4 class="modal-title">' + title + '</h4>';
    html = html + '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
    html = html + '  <span aria-hidden="true">&times;</span>';
    html = html + '</button>';
    modalHeader.html(html)

    // modal-body html
    modalBody.attr('class', 'modal-body');
    html = '';
    html = html + '<div>' + message + '</div>';
    modalBody.html(html);

    // modal-footer html
    let btnCancel = $('<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>');

    modalFooter.attr('class', 'modal-footer');
    modalFooter.append(btnCancel);

    // modal-content
    modalContent.attr('class', 'modal-content');
    modalContent.append(modalHeader);
    modalContent.append(modalBody);
    modalContent.append(modalFooter);

    // modal-dialog
    modalDialog.attr('class', 'modal-dialog');
    modalDialog.append(modalContent);

    modal.attr('class', 'modal fade');
    modal.append(modalDialog);
    modal.modal('show');

    $(modal).on('hidden.bs.modal', function(e) {
        modal.remove();
    })

    $("body").append(modal);
}

对外暴露 showAlert

return {
    showAlert: function(modalId, title, message) {
        handleShowAlert(modalId, title, message);
    }
}

3.为查看按钮增加事件

修改 manager_list.jsp 视图文件，为 查看 按钮增加响应事件，代码如下：

{
    'data': function(row, type, val, meta) {
        return '<div class="btn-group">' +
            '   <a href="#" type="button" class="btn btn-default btn-sm" onclick="showDetail(\'' + row.userName + '\',\'' + row.roles + '\',' + row.superuser + ',' + row.status + ',' + row.created + ',' + row.updated + ');"><i class="fas fa-eye"></i></a>' +
            '   <a href="/auth/manager/edit/' + row.userKey + '" type="button" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>' +
            '   <button type="button" class="btn btn-danger btn-sm" onclick="singleDelete(\'' + row.userKey + '\');"><i class="fas fa-trash"></i></button>' +
            '</div>';
    }
}

4.实现事件函数

接下来实现查看按钮的事件响应函数，代码如下：

function showDetail(userName, roles, superuser, status, created, updated) {
    superuser = superuser ? '是' : '否';
    switch (status) {
        case 0:
            status = '<label class="text-muted">未激活</label>';
            break;
        case 1:
            status = '<label class="text-success">已激活</label>';
            break;
        case 2:
            status = '<label class="text-warning">锁定</label>';
            break;
        case 3:
            status = '<label class="text-danger">被删除</label>';
            break;
        default:
            status = '';
            break;
    }
    let html = '';
    html = html + '<div class="row" style="padding: 4px;">';
    html = html + '  <div class="col-md-3" style="font-weight: bold;">用户名</div>';
    html = html + '  <div class="col-md-9">' + userName + '</div>';
    html = html + '</div>';
    html = html + '<div class="row" style="padding: 4px;">';
    html = html + '  <div class="col-md-3" style="font-weight: bold;">角色</div>';
    html = html + '  <div class="col-md-9">' + roles + '</div>';
    html = html + '</div>';
    html = html + '<div class="row" style="padding: 4px;">';
    html = html + '  <div class="col-md-3" style="font-weight: bold;">超级用户</div>';
    html = html + '  <div class="col-md-9">' + superuser + '</div>';
    html = html + '</div>';
    html = html + '<div class="row" style="padding: 4px;">';
    html = html + '  <div class="col-md-3" style="font-weight: bold;">状态</div>';
    html = html + '  <div class="col-md-9">' + status + '</div>';
    html = html + '</div>';
    html = html + '<div class="row" style="padding: 4px;">';
    html = html + '  <div class="col-md-3" style="font-weight: bold;">创建时间</div>';
    html = html + '  <div class="col-md-9">' + DateUtils.formatDate(new Date(created), "yyyy-MM-dd HH:mm:ss") + '</div>';
    html = html + '</div>';
    html = html + '<div class="row" style="padding: 4px;">';
    html = html + '  <div class="col-md-3" style="font-weight: bold;">更新时间</div>';
    html = html + '  <div class="col-md-9">' + DateUtils.formatDate(new Date(updated), "yyyy-MM-dd HH:mm:ss") + '</div>';
    html = html + '</div>';
    ModalDialog.showAlert('show-detail', '查看用户', html);
}

5.实例源码

实例源码已经托管到如下地址：

上一篇：分页功能

下一篇：菜单优化

如果对课程内容感兴趣，可以扫码关注我们的 公众号 或 QQ群，及时关注我们的课程更新