userList.html 8.98 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户管理</title>
    <link href="../../css/frame.css" rel="stylesheet" />
    <link href="../../scripts/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="../../scripts/easyui/themes/icon.css" rel="stylesheet" />
    <style type="text/css">
        #userToolbar {
            padding:5px;
            height:25px;
            width:100%;
        }
        .l-btn-icon {
            display:inline-block;
            height:16px;
            width:16px;
            vertical-align:-2px;
            margin-left:5px;
        }

        #userManagerForm {
            width:100%;
            height:100%;
        }

        #userManagerForm table {
            height:100%;
            width:100%;
            border-collapse:collapse;
        }
        .tdTitle {
            width:60px;
        }
        .operateModify {
            color:blue;
        }
        .operateDelete {
            color:red;
        }
    </style>
</head>
<body>
    <div id="userList">
        
    </div>
    <div style="height:0;width:0;overflow:hidden;">
        <div id="userToolbar">
            <a href="#" class="easyui-linkbutton" onclick="showAddUserWindow()" data-options="iconCls:'icon-add'">添加用户</a>
        </div>
        <div id="userManagerDialog" class="easyui-dialog" data-options="closed:true,modal:true,buttons:'#userWindowBtns'"
              style="height:160px;width:500px;">
            <form id="userManagerForm">
                <table>
                    <tr>
                        <td class="tdTitle">用户名</td>
                        <td class="tdContent">
                            <input type="text" name="usr" id="usr"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdTitle">密码</td>
                        <td class="tdContent">
                            <input type="password" name="pwd" id="pwd" onfocus="removeValue()"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div id="userWindowBtns">
            <a href="#" class="easyui-linkbutton" onclick="btnUserManagerHandler()" data-options="iconCls:'icon-save'">保存</a>
            <a href="#" class="easyui-linkbutton" onclick="closeUserManagerWindow()" data-options="iconCls:'icon-cancel'">关闭</a>
        </div>
    </div>
    <script src="../../scripts/easyui/jquery.min.js"></script>
    <script src="../../scripts/easyui/jquery.easyui.min.js"></script>
    <script src="../../scripts/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../scripts/jquery.validate.min.js"></script>
    <script src="../../scripts/jquery.validate.extend.js"></script>
    <script src="../../scripts/utilities.js"></script>

    <script type="text/javascript">
        //操作类型
        var operateType = "";

        var userUrls = {
            list: function () {
                return "/do/trafficController/userManager?Command=1&t=" + new Date().getTime();
            },
            add: function () { return "/do/trafficController/userManager?Command=2&t=" + new Date().getTime(); },
            del: function () { return "/do/trafficController/userManager?Command=3&t=" + new Date().getTime(); },
            modify: function () { return "/do/trafficController/userManager?Command=4&t=" + new Date().getTime(); }
        };

        $().ready(function() {
            initUserList();

            var validateOptions = {
                rules: {
                    usr: {
                        required: true,
                        username:true
                    },
                    pwd: {
                        required: true,
                        rangelength:[3,16]
                    }
                }
            };
            $("#userManagerForm").validate(validateOptions);
        });

        //加载用户列表
        function initUserList() {
            var options = {
                url:userUrls.list(),
                fit: true,
                method:"get",
                striped: true,
                singleSelect:true,
                rownumbers: true,
                toolbar:"#userToolbar",
                columns: [[
                    { field: 'usr', title: '用户名', width: 200, align: 'right' },
                    { field: 'pwd', title: '密码', width: 80, align: 'right', hidden: true },
                    { field: 'none', title: '操作', width: 150, align: 'center', formatter:createOperateLink}
                ]],
                loadFilter: createJsonDataForDatagrid
            };

            $("#userList").datagrid(options);
        }

        //转换成datagrid组件需要的格式
        function createJsonDataForDatagrid(data) {
            var jsonObj = {
                total: 0,
                rows:[]
            };
            if (data.error) {
                var allUserString = data.feedback.Msg;
                var allUsers = allUserString.split(',');
                for (var i = 0; i < allUsers.length; i++) {
                    if (allUsers[i] != "admin") {
                        jsonObj.rows.push({
                            usr: allUsers[i],
                            pwd: ""
                        });
                    }
                }
                jsonObj.total = jsonObj.rows.length;
                
            }
            return jsonObj;
        }

        function createOperateLink(value,row,index) {
            return "<a href='#' class='operateModify' onclick='showModifyUserWindow(\""+row.usr+"\")'>修改</a> <a href='#' class='operateDelete' onclick='deleteUser(\""+row.usr+"\")'>删除</a>";
        }

        function showAddUserWindow() {
            operateType = "add";
            openUserManagerWindow({
                title:"添加用户"
            });
            $("#usr").removeAttr("disabled");
        }

        //修改用户
        function showModifyUserWindow(userName) {
            operateType = "modify";
            openUserManagerWindow({
                title:"修改用户"
            });
            //加载数据
            $("#usr").val(userName);
            $("#pwd").val("undefined");
            $("#userManagerForm").valid();
            $("#usr").attr("disabled","disabled");
        }

        //确定是添加用户,还是修改用户
        function btnUserManagerHandler() {
            //进行验证
            var formObj = $("#userManagerForm");
            if (!formObj.valid()) {
                $.messager.alert("提示", "参数验证有误,请修改后再提交!", "error");
                return;
            }
            
            if($("#pwd").val() == "undefined"){
            	closeUserManagerWindow();
            	return;
            }
            
            //判断是添加,还是修改
            var url = "";
            if (operateType == "add") {
                url = userUrls.add();
            } else {
                url = userUrls.modify();
            }
            $("#usr").removeAttr("disabled");
            var params = sy.serializeObject(formObj);

            $.get(url, params, function (data) {
                var msg = null;
                if (data.error) {
                    msg = operateType == "add" ? "添加成功!" : "修改成功!";
                    $.messager.alert("提示", msg, "info", function () {
                        closeUserManagerWindow();
                    });
                    reloadUserList();
                } else {
                    msg = operateType == "add" ? "添加用户失败!" : "修改用户失败!";
                    $.messager.alert("提示", msg + "错误:" + data.feedback.Msg, "error");
                }
            }, "json");
        }

        //关闭用户管理窗口
        function closeUserManagerWindow() {
            $("#userManagerDialog").dialog("close");
        }

        function openUserManagerWindow(options) {
            $("#userManagerDialog").dialog(options).dialog("open");
            $("#userManagerForm").form("clear");
        }

        //删除用户
        function deleteUser(userName) {
            var confirm = $.messager.confirm("提示", "确定要删除该用户吗?", function (isConfirm) {
                if (isConfirm) {
                    $.get(userUrls.del(), {
                        usr:userName
                    }, function (data) {
                        if (data.error) {
                            $.messager.alert("提示", "删除成功!", "info");
                            reloadUserList();
                        } else {
                            $.messager.alert("提示", "删除失败!", "info");
                        }
                    }, "json");
                }
            });
        }

        //重新加载用户
        function reloadUserList() {
            $("#userList").datagrid("reload");
        }
        
        function removeValue(){
        	$("#pwd").val("");
        }
    </script>
</body>
</html>