表格简单的查找+删除

最新推荐文章于 2021-05-01 14:13:50 发布
yu_10_9
最新推荐文章于 2021-05-01 14:13:50 发布
阅读量398
点赞数
本文链接：https://blog.csdn.net/yu_10_9/article/details/78337079
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td, th {
            width: 200px;
            border: 1px solid gainsboro;
            text-align: center;
            padding: 20px;
        }

        button {
            width: 100px;
            height: 40px;
            background: orange;
            color: white;
            border: 0px;
            border-radius: 5px;
        }

        .search {
            background: ghostwhite;
            border: 1px solid gainsboro;
            border-radius: 5px;
            width: 1450px;
            height: 50px;
            line-height: 50px;
            margin-bottom: 10px;
        }

        .search input {
            width: 200px;
            height: 30px;
            color: #999;
            border-radius: 5px;
            margin-left: 20px;
            border: 1px solid gainsboro;
        }

        .search button {
            float: right;
            margin-top: 5px;
            margin-right: 10px;
            background: red;
        }

        .active {
            color: red;
        }
    </style>
    <script src="angular-1.3.0.js"></script>
    <script>
        var data =
                [{"id": 1234, "name": 'ipad', "price": 3400, "count": 10},
                    {"id": 1244, "name": 'aphone', "price": 6400, "count": 100},
                    {"id": 1334, "name": 'mypad', "price": 4400, "count": 20},
                    {"id": 8234, "name": 'zpad', "price": 8400, "count": 130},
                ];
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope) {
            $scope.data = data;
            //设置页面默认显示
            $scope.show = true;
            //设置checkbox默认不选中
            $scope.chk = false;
            $scope.xuanz = false;
            $scope.check = function (val) {
                /*判断是否选中，然后控制下方的是否选中*/
                if (val) {
                    $scope.xuanz = true;
                } else {
                    $scope.xuanz = false;
                }
            }
            $scope.search;
            /*删除按钮*/
            $scope.remove = function (index) {
                /*判断是否确认删除*/
                var b = confirm("确认删除");
                if (b) {
                    $scope.data.splice(index, 1);
                }
            }
            $scope.del = function () {
                /*判断是否确认删除*/
                if ($scope.xuanz || $scope.checkD) {
                    var b = confirm("确认删除");
                    if (b) {
                        //删除所有商品信息
                        if ($scope.chk) {
                            $scope.data.splice(0, $scope.data.length);
                            //让商品信息管理页面为空白界面
                            $scope.show = false;
                        } else {
                            for (var i = $scope.xuan1.length - 1; i >= 0; i--) {
                                console.log($scope.xuan1[i]);
                                for (var j = 0; j < $scope.data.length; j++) {
                                    console.log($scope.data[j].id == $scope.xuan1[i]);
                                    if ($scope.data[j].id == $scope.xuan1[i]) {
                                        $scope.data.splice(j, 1);
                                    }
                                }
                            }
                        }
                    }
                } else {
                    alert("先进行选中要删除的商品信息");
                }
            }
            $scope.checkD = false;
            $scope.xuan1 = [];
            $scope.xuan = function (xuanl, id) {
                console.log(id);
                $scope.checkD = xuanl;
                if (xuanl) {
                    $scope.xuan1.push(id);
                }
            }


        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="search">
    <input type="text" placeholder="输入关键字…" ng-model="search">
    <button ng-click="del()">批量删除</button>
</div>
<table ng-show="show">
    <thead>
    <th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th>
    <th ng-click="sort1('id')" ng-class="{active:active=='id'}">商品编号</th>
    <th ng-click="sort1('name')" ng-class="{active:active=='name'}">商品名称</th>
    <th ng-click="sort1('price')" ng-class="{active:active=='price'}">商品价格</th>
    <th ng-click="sort1('count')" ng-class="{active:active=='count'}">商品库存</th>
    <th>数据操作</th>
    </thead>
    <tbody>
    <tr ng-repeat="item in data| filter:search">
        <td><input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)"></td>
        <td>{{item.id}}</td>
        <td> {{item.name}}</td>
        <td>{{item.price | currency:"￥"}}</td>
        <td>{{item.count}}</td>
        <td>
            <button ng-click="remove($index)">删除</button>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>