文章標題 表格的批量刪除
阿新 • • 發佈：2018-12-30
<!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.js"></script> <script> var data = [{"id": 1234, "name": '小明', "price": 20, "count": '男'}, {"id": 1244, "name": '小花', "price": 21, "count": '女'}, {"id": 1334, "name": '小三', "price": 22, "count": '女'}, {"id": 8234, "name": '小五', "price": 23, "count": '男'}, ]; 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); } } //判斷的功能,預設是名字排序 $scope.sort = "name"; $scope.active = name; $scope.rese = false; $scope.sort1 = function (sort) { $scope.active = sort; console.log(sort); if ($scope.sort == sort) { $scope.rese = !$scope.rese; } else { $scope.rese = false; } $scope.sort = sort; } }) </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'}">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 | orderBy:sort:rese "> <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}}</td> <td>{{item.count}}</td> <td> <button ng-click="remove($index)">刪除</button> </td> </tr> </tbody> </table> </body> </html>