AngularJs的表格

来源：互联网发布：淘宝平面模特怎么找编辑：程序博客网时间：2024/05/20 19:33
好吧,只是纯代码而已!
可以简单的实现对表格的增删改查
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">            * {                margin: 0px auto;                padding: 0px;            }            table{                width: 700px;                height: auto;                text-align: center;                line-height: 28px;            }            #tab1 input{                cursor: pointer;            }            table tr:nth-child(2n){                background: grey;            }        </style>        <script src="js/angular.min.js" src="js/jquery-3.2.1.min.js" type="text/javascript"></script>        <title>周考模拟</title>    </head>    <center>        <body ng-app="myapp" ng-controller="mycontroller">            <br />            姓名查询条件:<input type="text" ng-model="checkname" />            <select ng-change="change()" ng-model="checkage" ng-init="checkage=ages[0]" >                <option ng-repeat="age in ages">{{age}}</option>            </select><br /><br />            <table border="1px" cellspacing="0px" cellpadding="0px" id="tab1">                <tr style="background: darkgray;">                    <th>姓名</th>                    <th>年龄</th>                    <th>拼音</th>                    <th>职位</th>                    <th>操作</th>                </tr>                <tr ng-repeat="user in users">                    <td>{{user.name}}</td>                    <td>{{user.age}}</td>                    <td>{{user.py}}</td>                    <td>{{user.position}}</td>                    <td><input type="button" value="删除" ng-click="delete($index)" /></td>                </tr>            </table><br />            <div style="width: 400px;">            <input type="button" value="查询" style="float: left;" ng-click="checkuser()" />            <input type="button" class="add" value="添加用户" style="float: right;" ng-click="showaddtable()"/>            </div><br /><br />            <table border="1px" cellspacing="0px" cellpadding="0px" ng-show="show">                <tr>                    <th>姓名</th>                    <th><input type="text" ng-model="addname" class="name"/></th>                </tr>                <tr>                    <th>年龄</th>                    <th><input type="text" ng-model="addage" class="age"/></th>                </tr>                <tr>                    <th>拼音</th>                    <th><input type="text" ng-model="addpy" class="py"/></th>                </tr>                <tr>                    <th>职位</th>                    <th><input type="text" ng-model="addposition" class="position"/></th>                </tr>                <tr>                    <th colspan="2"><input type="button" value="保存" ng-click="save()" /></th>                </tr>            </table>    </center>    </body>    <script type="text/javascript">        //创建模块        var myapp = angular.module("myapp",[]);        //创建控制器        myapp.controller("mycontroller",function($scope){            //添加排序数组            $scope.ages=["按年龄正序排序", "按年龄倒序排列"];            //添加临时数据            var users_temp=[            {"name":"张三","age":"45","py":"zhangsan","position":"总经理"},            {"name":"李四","age":"43","py":"lisi","position":"设计师"},            {"name":"王五","age":"40","py":"wangwu","position":"工程师"},            {"name":"赵六","age":"33","py":"zhaoliu","position":"人事经理"},            {"name":"周七","age":"30  ","py":"zhouqi","position":"保安部"},];            //初始化数据            $scope.users=users_temp;            //删除数据            $scope.delete=function($index){                //弹框提示                var flag = window.confirm("确认删除吗?");                if(flag==true){                    //从临时数组中删除数据                    users_temp.splice($index,1);                    //重新给$scope.uses赋值                    $scope.users=users_temp;                }            };            //查询用户            $scope.checkuser=function(){                //定义新的临时数组                var newusers= [];                //获取输入框的内容                var checkname = $scope.checkname;                //判断内容为空                if (checkname==""||checkname==null) {                    alert("请输入姓名");                    return;                }                //根据得到的内容遍历数组中的数据                for (var i = 0; i < users_temp.length; i++) {                    var username = users_temp[i].name;                    if (username.indexOf(checkname)!=-1) {                        newusers.push(users_temp[i]);                    }                }                //判断是否为空                if (newusers.length==0) {                    alert("未查找到内容");                    return;                }                   //重新赋值                $scope.users=newusers;            }            //添加用户,让添加的表格显示出来            $scope.showaddtable=function(){                $scope.show=true;            }            //添加新的用户            $scope.save=function(){                var addname = $scope.addname;                var addage = $scope.addage;                var addpy = $scope.addpy;                var addposition = $scope.addposition;                var num = isNaN(parseInt(addage));                if (addname==null||addname=="") {                    alert("用户名不能为空");                    return;                }                if (num) {                    alert("年龄格式不对");                    return;                }                if (addpy==null||addage=="") {                    alert("拼音不能为空");                    return;                }                if (addposition==null||addposition=="") {                    alert("职位不能为空");                    return;                }                var newuser={                    "name":$scope.addname,                    "age":$scope.addage,                    "py":$scope.addpy,                    "position":$scope.addposition,                };                //添加到数组                users_temp.push(newuser);                $scope.users=users_temp;                //表格不显示                $scope.show=false;            }            //排序            $scope.change=function(){                //获取下拉列表的选项                var age = $scope.checkage;                //判断排序                if (age==$scope.ages[0]) {                    users_temp.sort(function(x,y){                        return x.age - y.age;                    })                }else{                    users_temp.sort(function(x,y){                        return y.age -  x.age;                    })                }                //重新把排序后的数组赋值显示                $scope.users=users_temp;            }        });    </script></html>
阅读全文
1 0