用户管理系统

最新推荐文章于 2024-03-04 23:00:46 发布
最新推荐文章于 2024-03-04 23:00:46 发布
阅读量1.2k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhang937008487/article/details/78320707
版权 
<!DOCTYPE html>
<html ng-app="UMApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>用户管理</title>
    <script type="text/javascript">
        var example_data = [
            {
                id: 1,
                name: "曹操",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 2,
                name: "张辽",
                password: "123456",
                age: 34,
                sex: "男"
            },
            {
                id: 3,
                name: "司马懿",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 4,
                name: "夏侯淳",
                password: "123456",
                age: 40,
                sex: "男"
            },
            {
                id: 5,
                name: "蔡文姬",
                password: "123456",
                age: 18,
                sex: "女"
            },
            {
                id: 6,
                name: "刘备",
                password: "123456",
                age: 50,
                sex: "男"
            },
            {
                id: 7,
                name: "关羽",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 8,
                name: "张飞",
                password: "123456",
                age: 46,
                sex: "男"
            },
            {
                id: 9,
                name: "赵云",
                password: "123456",
                age: 35,
                sex: "男"
            },
            {
                id: 10,
                name: "孙尚香",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 11,
                name: "孙权",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 12,
                name: "周瑜",
                password: "123456",
                age: 32,
                sex: "男"
            },
            {
                id: 13,
                name: "鲁肃",
                password: "123456",
                age: 33,
                sex: "男"
            },
            {
                id: 14,
                name: "黄盖",
                password: "123456",
                age: 55,
                sex: "男"
            },
            {
                id: 15,
                name: "小乔",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 16,
                name: "小乔",
                password: "123456",
                age: 26,
                sex: "女"
            }
        ];
    </script>
    <script type="text/javascript">
        // 全选/全不选
        $(function () {
            $("input[name='check_all']").click(function () {
                var checked = this.checked; // 获取 <input type="checkbox" name="check_all"/> 中checked属性的值
                $("input[name='user_id[]']").each(function () {
                    this.checked = checked; // 依次设置每一个 <input type="checkbox" name="user_id[]"/> 中checked属性的值
                });
            });
        });

        var app = angular.module("UMApp", []);


        app.controller("UMCtrl", function ($scope) {
            // 查询的年龄区间
            $scope.age_sections = [
                {
                    txt: "10~20",
                    min: 10,
                    max: 20
                },
                {
                    txt: "20~30",
                    min: 20,
                    max: 30
                },
                {
                    txt: "30~40",
                    min: 30,
                    max: 40
                },
                {
                    txt: "40~50",
                    min: 40,
                    max: 50
                },
                {
                    txt: "50~60",
                    min: 50,
                    max: 60
                },
                {
                    txt: "60~70",
                    min: 60,
                    max: 70
                },
                {
                    txt: "70~80",
                    min: 70,
                    max: 80
                }
            ];

            $scope.data = example_data;
            var id = 17;
            var dataIsChange = false; // 数据是否有改变，用于查询时，判断是否需要备份数据

            // 显示添加用户表单
            $scope.showAddUserBox = function () {
                $scope.add_user_box_is_show = true;
            };

            // 提交添加用户表单
            $scope.addUser = function () {
                if ($scope.add_user_name == undefined || $scope.add_user_name == "") {
                    alert("请输入用户名！");
                    return;
                }

                if ($scope.add_user_password == undefined || $scope.add_user_password == "") {
                    alert("请输入密码！");
                    return;
                }

                if ($scope.add_user_repassword == undefined || $scope.add_user_repassword == "") {
                    alert("请再次确认密码！");
                    return;
                }

                if ($scope.add_user_password != $scope.add_user_repassword) {
                    alert("两次密码不一致！");
                    return;
                }

                if ($scope.add_user_age == undefined || $scope.add_user_age == "") {
                    alert("请输入年龄！");
                    return;
                }

                if ($scope.add_user_sex == undefined || $scope.add_user_sex == "") {
                    alert("请输入性别！");
                    return;
                }

                if (!/^\d+$/.test($scope.add_user_age)) {
                    alert("年龄必须整数！");
                    return;
                }

                var age = parseInt($scope.add_user_age);
                if (age < 10 || age > 60) {
                    alert("年龄必须在10~60之间！");
                    return;
                }

                $scope.data.push({
                    id: id++,
                    name: $scope.add_user_name,
                    password: $scope.add_user_password,
                    age: $scope.add_user_age,
                    sex: $scope.add_user_sex
                });

                $scope.add_user_name = "";
                $scope.add_user_password = "";
                $scope.add_user_repassword = "";
                $scope.add_user_age = "";
                $scope.add_user_sex = "";
                $scope.add_user_box_is_show = false;
            };

            // 显示修改密码表单
            $scope.showEditPwdBox = function ($index) {
                $scope.epwd_name = $scope.data[$index].name;
                $scope.epwd_index = $index;
                $scope.edit_pwd_box_is_show = true;
            };

            // 提交修改密码表单
            $scope.editPwd = function () {
                var user = $scope.data[$scope.epwd_index];

                if ($scope.epwd_old_password == undefined || $scope.epwd_old_password == "") {
                    alert("请输入旧密码！");
                    return;
                }

                if ($scope.epwd_password == undefined || $scope.epwd_password == "") {
                    alert("请输入新密码！");
                    return;
                }

                if ($scope.epwd_repassword == undefined || $scope.epwd_repassword == "") {
                    alert("请再次确认密码！");
                    return;
                }

                if ($scope.epwd_old_password != user.password) {
                    alert("旧密码不正确！");
                    return;
                }

                if ($scope.epwd_password != $scope.epwd_repassword) {
                    alert("两次密码不一致！");
                    return;
                }

                $scope.data[$scope.epwd_index].password = $scope.epwd_password; // 修改密码
                $scope.edit_pwd_box_is_show = false;
            };

            // 清空列表
            $scope.removeAll = function () {
                $scope.data = [];
            };

            // 删除选中项
            $scope.removeChecked = function () {
                var remove_idx_arr = []; // 待删除的所有索引

                // 获取所有user_id[]并且被选择的Checkbox
                $("input[name='user_id[]']:checked").each(function () {
                    var index = this.value; // <input type="checkbox" name="user_id[]" value="{{ $index }}"/>，value中保存了数组的索引
                    remove_idx_arr.push(index);
                });

                var data = $scope.data; // 备份当前列表
                $scope.data = []; // 清空当前列表
                for (var idx in data) {
                    // 索引不在待删除的所有索引中，添加到新列表中
                    if (remove_idx_arr.indexOf(idx) == -1) {
                        $scope.data.push(data[idx]);
                    }
                }
            };

            $scope.search = function () {
                var name = "";
                var age = {}; // json对象，如：{ txt: "70~80", min: 70, max: 80 }
                var sex = "";

                if ($scope.search_name_value != undefined && $scope.search_name_value != null) {
                    name = $scope.search_name_value.trim();
                }

                // 未选中时值：undefined，选中“请选择”按钮时值：null
                if ($scope.search_age_value != undefined && $scope.search_age_value != null && $scope.search_age_value != "") {
                    age = $scope.search_age_value; // age = json对象，如：{txt: "70~80", min: 70, max: 80 }
                }

                if ($scope.search_sex_value != undefined && $scope.search_sex_value != null) {
                    sex = $scope.search_sex_value;
                }

                // 没有可查询的项
                if (name == "" && age == {} && sex == "") {
                    return;
                }

                console.log("需要查找的name: " + name + ", 需要查找的age区间: [" + age.min + "~" + age.max + "],  需要查找的sex: " + sex);

                // 从全部数据中查找name、age、sex，找到后添加到列表中
                for (var i in $scope.data) {
                    var item = $scope.data[i];

                    var index = parseInt(i) + 1; // 第一个tr是表头，所以用i + 1

                    // name相等，显示
                    if (item.name == name) {
                        $("tr:eq(" + index + ")").show();
                        continue;
                    }

                    // 性别满足，显示
                    if (item.sex == sex) {
                        $("tr:eq(" + index + ")").show();
                        continue;
                    }

                    if (age != {} && item.age >= age.min && item.age <= age.max) {
                        $("tr:eq(" + index + ")").show();
                        continue;
                    }

                    // 3个条件都不符合，隐藏
                    $("tr:eq(" + index + ")").hide();
                }
            };
        });
    </script>
</head>
<body ng-controller="UMCtrl">
<div>
    <input type="text" ng-model="search_name_value" ng-change="search()" placeholder="用户名查询"/>
    &nbsp;&nbsp;
    年龄：
    <select ng-model="search_age_value" ng-options="section.txt for section in age_sections"
            ng-change="search()">
        <option value="">请选择</option>
    </select>
    &nbsp;&nbsp;
    性别：
    <select ng-model="search_sex_value" ng-change="search()">
        <option value="">请选择</option>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <button ng-click="removeAll()">全部删除</button>
    <button ng-click="removeChecked()">批量删除</button>
</div>

<table border="1">
    <tr>
        <th>
            <input type="checkbox" name="check_all"/>
        </th>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="user in data">
        <td>
            <input type="checkbox" name="user_id[]" value="{{ $index }}"/>
        </td>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
        <td>
            <button ng-click="showEditPwdBox($index)">修改密码</button>
        </td>
    </tr>
</table>

<div>
    <button ng-click="showAddUserBox()">添加用户</button>
</div>

<div ng-show="add_user_box_is_show">
    <table border="1">
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" ng-model="add_user_name"/>
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="text" ng-model="add_user_password"/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
            </td>
            <td>
                <input type="text" ng-model="add_user_repassword"/>
            </td>
        </tr>
        <tr>
            <td>
                年龄：
            </td>
            <td>
                <input type="text" ng-model="add_user_age"/>
            </td>
        </tr>
        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="text" ng-model="add_user_sex"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button ng-click="addUser()">提交</button>
            </td>
        </tr>
    </table>
    </table>
</div>

<div ng-show="edit_pwd_box_is_show">
    <table border="1">
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" ng-model="epwd_name" disabled/>
            </td>
        </tr>
        <tr>
            <td>
                旧密码：
            </td>
            <td>
                <input type="text" ng-model="epwd_old_password"/>
            </td>
        </tr>
        <tr>
            <td>
                新密码：
            </td>
            <td>
                <input type="text" ng-model="epwd_password"/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
            </td>
            <td>
                <input type="text" ng-model="epwd_repassword"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="hidden" ng-model="epwd_index"/>
                <button ng-click="editPwd()">提交</button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app="UMApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>用户管理 - 添加用户</title>

    <script type="text/javascript">
        var app = angular.module("UMApp", []);

        app.controller("UMCtrl", function ($scope) {
            $scope.data = [];
            var id = 1;

            // 显示添加用户表单
            $scope.showAddUserBox = function () {
                $scope.add_user_box_is_show = true;
            };

            // 提交添加用户表单
            $scope.addUser = function () {
                if ($scope.add_user_name == undefined || $scope.add_user_name == "") {
                    alert("请输入用户名！");
                    return;
                }

                if ($scope.add_user_password == undefined || $scope.add_user_password == "") {
                    alert("请输入密码！");
                    return;
                }

                if ($scope.add_user_repassword == undefined || $scope.add_user_repassword == "") {
                    alert("请再次确认密码！");
                    return;
                }

                if ($scope.add_user_password != $scope.add_user_repassword) {
                    alert("两次密码不一致！");
                    return;
                }

                if ($scope.add_user_age == undefined || $scope.add_user_age == "") {
                    alert("请输入年龄！");
                    return;
                }

                if ($scope.add_user_sex == undefined || $scope.add_user_sex == "") {
                    alert("请输入性别！");
                    return;
                }

                if (!/^\d+$/.test($scope.add_user_age)) {
                    alert("年龄必须整数！");
                    return;
                }

                var age = parseInt($scope.add_user_age);
                if (age < 10 || age > 60) {
                    alert("年龄必须在10~60之间！");
                    return;
                }

                $scope.data.push({
                    id: id++,
                    name: $scope.add_user_name,
                    password: $scope.add_user_password,
                    age: $scope.add_user_age,
                    sex: $scope.add_user_sex
                });

                $scope.add_user_name = "";
                $scope.add_user_password = "";
                $scope.add_user_repassword = "";
                $scope.add_user_age = "";
                $scope.add_user_sex = "";
                $scope.add_user_box_is_show = false;
            };
        });
    </script>
</head>
<body ng-controller="UMCtrl">
<table border="1">
    <tr>
        <th>
            <input type="checkbox" name="check_all"/>
        </th>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="user in data">
        <td>
            <input type="checkbox" name="user_id[]"/>
        </td>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
        <td>
            <button>修改密码</button>
        </td>
    </tr>
</table>

<div>
    <button ng-click="showAddUserBox()">添加用户</button>
</div>

<div ng-show="add_user_box_is_show">
    <table border="1">
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" ng-model="add_user_name"/>
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="text" ng-model="add_user_password"/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
            </td>
            <td>
                <input type="text" ng-model="add_user_repassword"/>
            </td>
        </tr>
        <tr>
            <td>
                年龄：
            </td>
            <td>
                <input type="text" ng-model="add_user_age"/>
            </td>
        </tr>
        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="text" ng-model="add_user_sex"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button ng-click="addUser()">提交</button>
            </td>
        </tr>
    </table>
    </table>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app="UMApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>用户管理 - 删除</title>
    <script type="text/javascript">
        var example_data = [
            {
                id: 1,
                name: "曹操",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 2,
                name: "张辽",
                password: "123456",
                age: 34,
                sex: "男"
            },
            {
                id: 3,
                name: "司马懿",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 4,
                name: "夏侯淳",
                password: "123456",
                age: 40,
                sex: "男"
            },
            {
                id: 5,
                name: "蔡文姬",
                password: "123456",
                age: 18,
                sex: "女"
            },
            {
                id: 6,
                name: "刘备",
                password: "123456",
                age: 50,
                sex: "男"
            },
            {
                id: 7,
                name: "关羽",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 8,
                name: "张飞",
                password: "123456",
                age: 46,
                sex: "男"
            },
            {
                id: 9,
                name: "赵云",
                password: "123456",
                age: 35,
                sex: "男"
            },
            {
                id: 10,
                name: "孙尚香",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 11,
                name: "孙权",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 12,
                name: "周瑜",
                password: "123456",
                age: 32,
                sex: "男"
            },
            {
                id: 13,
                name: "鲁肃",
                password: "123456",
                age: 33,
                sex: "男"
            },
            {
                id: 14,
                name: "黄盖",
                password: "123456",
                age: 55,
                sex: "男"
            },
            {
                id: 15,
                name: "小乔",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 16,
                name: "小乔",
                password: "123456",
                age: 26,
                sex: "女"
            }
        ];
    </script>

    <script type="text/javascript">
        // 全选/全不选
        $(function () {
            $("input[name='check_all']").click(function () {
                var checked = this.checked; // 获取 <input type="checkbox" name="check_all"/> 中checked属性的值
                $("input[name='user_id[]']").each(function () {
                    this.checked = checked; // 依次设置每一个 <input type="checkbox" name="user_id[]"/> 中checked属性的值
                });
            });
        });

        var app = angular.module("UMApp", []);

        app.controller("UMCtrl", function ($scope) {
            $scope.data = example_data;

            $scope.removeAll = function () {
                $scope.data = [];
            };

            $scope.removeChecked = function () {
                var remove_idx_arr = []; // 待删除的所有索引

                // 获取所有user_id[]并且被选择的Checkbox
                $("input[name='user_id[]']:checked").each(function () {
                    var index = this.value; // <input type="checkbox" name="user_id[]" value="{{ $index }}"/>，value中保存了数组的索引
                    remove_idx_arr.push(index);
                });

                var data = $scope.data; // 备份当前列表
                $scope.data = []; // 清空当前列表
                for (var idx in data) {
                    // 索引不在待删除的所有索引中，添加到新列表中
                    if (remove_idx_arr.indexOf(idx) == -1) {
                        $scope.data.push(data[idx]);
                    }
                }
            };
        });
    </script>
</head>
<body ng-controller="UMCtrl">
<div>
    <button ng-click="removeAll()">全部删除</button>
    <button ng-click="removeChecked()">批量删除</button>
</div>

<table border="1">
    <tr>
        <th>
            <input type="checkbox" name="check_all"/>
        </th>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="user in data">
        <td>
            <input type="checkbox" name="user_id[]" value="{{ $index }}"/>
        </td>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
        <td>
            <button>修改密码</button>
        </td>
    </tr>
</table>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app="UMApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>用户管理 - 修改密码</title>
    <script type="text/javascript">
        var example_data = [
            {
                id: 1,
                name: "曹操",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 2,
                name: "张辽",
                password: "123456",
                age: 34,
                sex: "男"
            },
            {
                id: 3,
                name: "司马懿",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 4,
                name: "夏侯淳",
                password: "123456",
                age: 40,
                sex: "男"
            },
            {
                id: 5,
                name: "蔡文姬",
                password: "123456",
                age: 18,
                sex: "女"
            },
            {
                id: 6,
                name: "刘备",
                password: "123456",
                age: 50,
                sex: "男"
            },
            {
                id: 7,
                name: "关羽",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 8,
                name: "张飞",
                password: "123456",
                age: 46,
                sex: "男"
            },
            {
                id: 9,
                name: "赵云",
                password: "123456",
                age: 35,
                sex: "男"
            },
            {
                id: 10,
                name: "孙尚香",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 11,
                name: "孙权",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 12,
                name: "周瑜",
                password: "123456",
                age: 32,
                sex: "男"
            },
            {
                id: 13,
                name: "鲁肃",
                password: "123456",
                age: 33,
                sex: "男"
            },
            {
                id: 14,
                name: "黄盖",
                password: "123456",
                age: 55,
                sex: "男"
            },
            {
                id: 15,
                name: "小乔",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 16,
                name: "小乔",
                password: "123456",
                age: 26,
                sex: "女"
            }
        ];
    </script>

    <script type="text/javascript">
        var app = angular.module("UMApp", []);

        app.controller("UMCtrl", function ($scope) {
            $scope.data = example_data;

            // 显示修改密码表单
            $scope.showEditPwdBox = function ($index) {
                $scope.epwd_name = $scope.data[$index].name;
                $scope.epwd_index = $index;
                $scope.edit_pwd_box_is_show = true;
            };

            // 提交修改密码表单
            $scope.editPwd = function () {
                var user = $scope.data[$scope.epwd_index];

                if ($scope.epwd_old_password == undefined || $scope.epwd_old_password == "") {
                    alert("请输入旧密码！");
                    return;
                }

                if ($scope.epwd_password == undefined || $scope.epwd_password == "") {
                    alert("请输入新密码！");
                    return;
                }

                if ($scope.epwd_repassword == undefined || $scope.epwd_repassword == "") {
                    alert("请再次确认密码！");
                    return;
                }

                if ($scope.epwd_old_password != user.password) {
                    alert("旧密码不正确！");
                    return;
                }

                if ($scope.epwd_password != $scope.epwd_repassword) {
                    alert("两次密码不一致！");
                    return;
                }

                $scope.data[$scope.epwd_index].password = $scope.epwd_password; // 修改密码
                $scope.edit_pwd_box_is_show = false;
            };
        });
    </script>
</head>
<body ng-controller="UMCtrl">
<table border="1">
    <tr>
        <th>
            <input type="checkbox" name="check_all"/>
        </th>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="user in data">
        <td>
            <input type="checkbox" name="user_id[]"/>
        </td>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
        <td>
            <button ng-click="showEditPwdBox($index)">修改密码</button>
        </td>
    </tr>
</table>

<div ng-show="edit_pwd_box_is_show">
    <table border="1">
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" ng-model="epwd_name" disabled/>
            </td>
        </tr>
        <tr>
            <td>
                旧密码：
            </td>
            <td>
                <input type="text" ng-model="epwd_old_password"/>
            </td>
        </tr>
        <tr>
            <td>
                新密码：
            </td>
            <td>
                <input type="text" ng-model="epwd_password"/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
            </td>
            <td>
                <input type="text" ng-model="epwd_repassword"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="hidden" ng-model="epwd_index"/>
                <button ng-click="editPwd()">提交</button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app="UMApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>用户管理 - 查询</title>
    <script type="text/javascript">
        var example_data = [
            {
                id: 1,
                name: "曹操",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 2,
                name: "张辽",
                password: "123456",
                age: 34,
                sex: "男"
            },
            {
                id: 3,
                name: "司马懿",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 4,
                name: "夏侯淳",
                password: "123456",
                age: 40,
                sex: "男"
            },
            {
                id: 5,
                name: "蔡文姬",
                password: "123456",
                age: 18,
                sex: "女"
            },
            {
                id: 6,
                name: "刘备",
                password: "123456",
                age: 50,
                sex: "男"
            },
            {
                id: 7,
                name: "关羽",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 8,
                name: "张飞",
                password: "123456",
                age: 46,
                sex: "男"
            },
            {
                id: 9,
                name: "赵云",
                password: "123456",
                age: 35,
                sex: "男"
            },
            {
                id: 10,
                name: "孙尚香",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 11,
                name: "孙权",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 12,
                name: "周瑜",
                password: "123456",
                age: 32,
                sex: "男"
            },
            {
                id: 13,
                name: "鲁肃",
                password: "123456",
                age: 33,
                sex: "男"
            },
            {
                id: 14,
                name: "黄盖",
                password: "123456",
                age: 55,
                sex: "男"
            },
            {
                id: 15,
                name: "小乔",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 16,
                name: "小乔",
                password: "123456",
                age: 26,
                sex: "女"
            }
        ];
    </script>

    <script type="text/javascript">
        var app = angular.module("UMApp", []);

        app.controller("UMCtrl", function ($scope) {
            $scope.data = example_data;

            // 查询的年龄区间
            $scope.age_sections = [
                {
                    txt: "10~20",
                    min: 10,
                    max: 20
                },
                {
                    txt: "20~30",
                    min: 20,
                    max: 30
                },
                {
                    txt: "30~40",
                    min: 30,
                    max: 40
                },
                {
                    txt: "40~50",
                    min: 40,
                    max: 50
                },
                {
                    txt: "50~60",
                    min: 50,
                    max: 60
                },
                {
                    txt: "60~70",
                    min: 60,
                    max: 70
                },
                {
                    txt: "70~80",
                    min: 70,
                    max: 80
                }
            ];

            $scope.search = function () {
                var name = "";
                var age = {}; // json对象，如：{ txt: "70~80", min: 70, max: 80 }
                var sex = "";

                if ($scope.search_name_value != undefined && $scope.search_name_value != null) {
                    name = $scope.search_name_value.trim();
                }

                // 未选中时值：undefined，选中“请选择”按钮时值：null
                if ($scope.search_age_value != undefined && $scope.search_age_value != null && $scope.search_age_value != "") {
                    age = $scope.search_age_value; // age = json对象，如：{txt: "70~80", min: 70, max: 80 }
                }

                if ($scope.search_sex_value != undefined && $scope.search_sex_value != null) {
                    sex = $scope.search_sex_value;
                }

                // 没有可查询的项
                if (name == "" && age == {} && sex == "") {
                    return;
                }

                console.log("需要查找的name: " + name + ", 需要查找的age区间: [" + age.min + "~" + age.max + "],  需要查找的sex: " + sex);

                // 从全部数据中查找name、age、sex，找到后添加到列表中
                for (var i in $scope.data) {
                    var item = $scope.data[i];

                    var index = parseInt(i) + 1; // 第一个tr是表头，所以用i + 1

                    // name相等，显示
                    if (item.name == name) {
                        $("tr:eq(" + index + ")").show();
                        continue;
                    }

                    // 性别满足，显示
                    if (item.sex == sex) {
                        $("tr:eq(" + index + ")").show();
                        continue;
                    }

                    if (age != {} && item.age >= age.min && item.age <= age.max) {
                        $("tr:eq(" + index + ")").show();
                        continue;
                    }

                    // 3个条件都不符合，隐藏
                    $("tr:eq(" + index + ")").hide();
                }
            };
        });
    </script>
</head>
<body ng-controller="UMCtrl">
<div>
    <input type="text" ng-model="search_name_value" ng-change="search()" placeholder="用户名查询"/>
    &nbsp;&nbsp;
    年龄：
    <select ng-model="search_age_value" ng-options="section.txt for section in age_sections"
            ng-change="search()">
        <option value="">请选择</option>
    </select>
    &nbsp;&nbsp;
    性别：
    <select ng-model="search_sex_value" ng-change="search()">
        <option value="">请选择</option>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
</div>

<table border="1">
    <tr>
        <th>
            <input type="checkbox" name="check_all"/>
        </th>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="user in data">
        <td>
            <input type="checkbox" name="user_id[]"/>
        </td>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
        <td>
            <button>修改密码</button>
        </td>
    </tr>
</table>
</body>
</html>
zhang937008487
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C#的管理系统 用户权限菜单管理（1）
weixin_38682447的博客
06-12 7354
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;    &lt;meta name="viewport" content="width
【项目】用户管理系统
m0_50987960的博客
03-04 2658
用户管理系统的设计与实现
admin:用户管理系统
03-31
行政 用户管理系统
用户管理系统(1)
weixin_61518137的博客
11-15 8281
用户管理系统
管理系统
一个人的博客C
02-24 1753
今天，为大家介绍一个开源管理后台系统，包含了用户管理、组织机构管理、角色管理、功能点管理、菜单管理、权限分配、数据权限分配、代码生成等功能，相比其他开源的后台开发平台脚手架。本系统采用的框架是SpringBoot2，我知道的部分毕业生也是用这个系统的源码进行一个修改，然后就成了自己的系统，不得不说这学生是真的会利用资源，曾听到学生也说过这是一个万能的系统，更是一个值得学习的好系统。所以我们也...
WPF实现的用户管理系统
02-11
用WPF实现的用户管理系统，主要实现用户的增删查改操作，数据库使用的是MYSQL数据库，资源中有数据库的建表语句，在数据库中建表后，在App.Config文件中修改数据库连接就可以跑起来，仅供WPF的学习。
用户管理系统javaWeb版
09-06
用户管理系统在IT行业中是常见的应用，特别是在企业信息化建设中占据重要地位。本项目"用户管理系统javaWeb版"是一个基于Java Web技术实现的简单用户管理平台，它利用了JDBC（Java Database Connectivity）来处理...
基于SpringMVC+Spring+Mybatis 用户管理系统案例源码
04-25
【SpringMVC+Spring+Mybatis用户管理系统案例详解】 在现代Web开发中，SpringMVC、Spring和Mybatis是常见的三大技术栈，它们构成了所谓的"SSM"框架集成。这个基于SSM的用户管理系统源码提供了全面的学习和实践机会...
java+MySQL用户管理系统
04-25
此代码主要是用JDBC和MySQL数据库完成一个简单的用户管理系统，系统的设计模式采用工场模 式和代 理模式，此代码很适合初学Java者。 运行方法： 1.运行需要启动MySQL数据库 2.创建数据库名为zhaochao和表名为...
教务管理系统javaweb项目
03-24
教务管理系统javaweb项目 运行环境：window系统，Apache Tomcat v7.0.84、JDK1.8 开发环境：J2EE eclipse、navicat for mysql 运用的技术：MVC设计模式、DAO模式、Servlet、JSP、Filter、MySQL数据库 该项目主要分为...
学生管理系统（总结）
weixin_61196797的博客
05-19 2108
文章目录前言一、学生界面1.需要实现的功能2.相应菜单如下二、老师界面1.需要实现的功能2.相应菜单如下三、管理员界面2.相应菜单如下总结 前言 介绍我在编写学生管理系统时遇到的问题 一、学生界面 1.需要实现的功能 对于学生界面的编写还是比较简单的，模块1、2、3、4都可以在学生登录学生管理系统后系统根据学生登录时输入的账号来自行匹配学生的学号。 1，成绩查询。 在相应的班级里查找学生的学号，在输出此学号所对应的成绩。 2，本班成绩输出 读取存储相应班级信息的文件，依次遍历输出 3，成绩分析 可以对
【python】python用户管理系统[简易版]（源码+报告）【独一无二】
测试开发自动化
03-04 6755
新增用户：用户可以输入姓名、性别、手机号、QQ号码和邮箱等信息，系统会进行校验后添加用户信息，同时分配唯一的用户ID。显示用户全部信息：用户可以查看系统中所有用户的信息，包括用户ID、姓名、性别、手机号、QQ号码和邮箱。显示某位用户信息：用户可以通过输入用户ID，查看特定用户的详细信息。更新某位用户手机号信息：用户可以根据用户ID更新特定用户的手机号信息。退出系统：用户可以随时退出系统。👇👇👇 关注公众号，回复 “用户管理系统” 获取源码👇👇👇。
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
最新发布
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
统一用户管理系统二期需求规格说明书
"统一用户管理系统_需求规格说明书.doc" 是一份详细描述了统一用户管理系统功能和非功能需求的文档，适用于系统开发的全过程中。该文档由特定公司所有，并受到版权保护。 1. **概述** - **编写目的**：这份文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值