user.jsp 13 KB

Raw Blame History Permalink

<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
    <script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>/js/bootstrap.min.js"></script>
    <script src="<%=basePath %>/js/unicorn.js"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jstree/jstree.min.js"></script>
    <script src="<%=basePath %>js/jquery.toaster.js"></script>
    <script>
        var contextPath = '<%=basePath %>';
    </script>
    <title>YOHO!运维</title>
</head>
<body>

<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content">
    <div id="breadcrumb">
        <a href="#" title="Go to Home" class="tip-bottom"><i
                class="icon-home"></i> Home</a> <a href="#" class="current">管理员</a>
    </div>

    <div class="container-fluid">
        <div class="widget-box">
            <div class="widget-title">
                <h5>用户操作</h5>
            </div>
            <div class="widget-content nopadding">
                <div class="widget-title" style="height: 53px;">
                    <div class="form-inline">
                        <a href="#" id="toAddUser" class="btn btn-success"
                           style="margin-top: 12px;margin-left: 0px;" onclick="editUser(0,0,0,0,0)">添加用户</a>
                    </div>
                    </div>
            </div>
            <div id="userTable">

            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                <form id="hostGroupForm" class="form-horizontal">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> <span style="color:red">*</span>用户名：</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="name" name="name"
                                   placeholder="用户名" maxlength="30" size="40"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> <span style="color:red">*</span>等级：</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="level" name="level"
                                   placeholder="等级" maxlength="30" size="40"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> <span style="color:red">*</span>邮箱：</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="email" name="email"
                                   placeholder="邮箱" maxlength="30" size="40"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> <span style="color:red">*</span>手机号：</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="mobile" name="mobile"
                                   placeholder="手机号" maxlength="30" size="40"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> </label>

                        <div class="col-sm-8" id="messageAlert"></div>
                    </div>
                    <input type="hidden" name="editGroupId"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success" value="Validate" onclick="saveuser()">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
    $("#li_manager").addClass("active open");
    $("#li_user").addClass("active");
</script>
<script type="text/javascript">
    $(function () {
        //加载表格
        $("#userTable").table({
            columnAutoWidth: false,
            url: contextPath + "/manage/getUsers",
            striped: true,
            title: "用户信息列表",
            pagination: true,
            pageSize: 10,
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            columns: [{
                title: "用户名",
                field: "name",
                width: "15%"
            }, {
                title: "等级",
                field: "level",
                width: "15%"
            },{
                title: "邮箱",
                field: "email",
                width: "15%"
            },{
                title: "手机号",
                field: "mobile",
                width: "15%"
            },{
                title: "操作",
                formatter: function (value, rowData, rowIndex) {
                    var div = $("<div>");
                    $("<button onclick=\"editUser(\'" + rowData.id + "\',\'" + rowData.name + "\',\'" + rowData.level + "\',\'" + rowData.email + "\',\'" + rowData.mobile + "\')\">").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
                    div.append("&nbsp;");
                    $("<button onclick=\"deleteUser(\'" + rowData.name + "\')\">").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
                    return div;
                }
            }]
        });
    });

    //打开新增或修改页面
    function editUser(id, name,level,email,maobile) {
        $("#hostGroupForm #messageAlert").hide();
        if (id == 0) {//新增页面
            $("input[name='id']").val(0);
            $("input[name='name']").val("");
            $("input[name='level']").val("");
            $("input[name='email']").val("");
            $("input[name='mobile']").val("");
            $("input[name='name']").removeAttr("readonly");
            $("#myModalLabel").text("新增用户信息");
        } else {
            $("#myModalLabel").text("修改用户信息");
            $("input[name='id']").val(id);
            $("input[name='name']").val(name);
            $("input[name='name']").attr("readonly","readonly");
            $("input[name='level']").val(level);
            $("input[name='email']").val(email);
            $("input[name='mobile']").val(maobile);

        }
        $("#myModal").modal('show');
    }


    //打开新增或修改页面
    function deleteUser(name) {
        var dialog = $("<div>").appendTo($("body"));
        dialog.dialog({
            title: "你确定删除吗",
            backdrop: "static",
            content: "你确定要删除该用户信息吗？",
            buttons: [{
                text: "否",
                className: "btn-danger",
                onclick: function () {
                    $(dialog).dialog("hide");
                }
            }, {
                text: "是",
                className: "btn-success",
                onclick: function () {
                    $(dialog).dialog("hide");
                    $.ajax({
                        url: contextPath + "/manage/deleteUser",
                        type: 'post',
                        async: false,
                        data: {
                            name: name
                        },
                        dataType: "json",
                        success: function (data) {
                            if (!data || data.code != 200) {
                                localAlert('删除失败', data.message);
                            }
                            $("#userTable").table("load");
                        }
                    });
                }
            }]
        });
    }

    function saveuser() {
        var id = $("input[name='id']").val();
        var name = $("input[name='name']").val();
        var level = $("input[name='level']").val();
        var email = $("input[name='email']").val();
        var mobile = $("input[name='mobile']").val();
        if (name == null || name == "") {
            $("#hostGroupForm #messageAlert").alerts({
                content: "请输入用户名",
                type: "danger"
            });
            return;
        }
        if (level == null || level == "") {
            $("#hostGroupForm #messageAlert").alerts({
                content: "请输入等级",
                type: "danger"
            });
            return;
        }
        var param = {
            id:id,
            name: name,
            level: level,
            email: email,
            mobile: mobile,
        }
        $.ajax({
            url: contextPath + 'manage/saveUser',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(param),
            success: function (data) {
                if (!data || data.code != 200) {
                    $("#hostGroupForm #messageAlert").alerts({
                        content: data.message,
                        type: "danger"
                    });
                    return;
                }else{
                    $("#myModal").modal('hide');
                    $("#userTable").table("load");
                }
            },
            error: function (data) {
                localAlert('系统异常',data.message);
            }
        });
    }
</script>
</body>
</html>