angular实现表格的全选、单选、部分删除以及全部删除
2024-09-29 22:25:27
昨天自己写了一小段js，在全选的时候有点儿小坑，然后，整理了一下。今天把它贴出来，希望以后还记得。
大家也可以去github上查看或下载：https://github.com/dreamITGirl/projectStudy/tree/master/html
我在用angular实现表格的全选时，是给了一个标记--就是一个空数组，每次有个别项选中，我都会push一个数字，当有选项从选中状态到未选中变化时，我就让该数组弹出一个数字。这样就可以实现了。我实现的个别删除和全部删除是从页面删除的，并没有操作json对象，因此，在真正项目中使用的话，还需要加上ajax请求，同时删除服务器上的数据。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的全选，删除</title>
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<style type="text/css">
table th {
text-align: center;
} input[type="checkbox"] {
width: 20px;
height: 20px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table border="" cellspacing="" cellpadding="" class="table" style="text-align: center;">
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"/></th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>民族</th>
<th ng-click="delAll($event)" style="cursor:pointer">全部删除</th>
</tr>
<tr ng-repeat="item in items">
<td><input type="checkbox" ng-model="item.states" ng-change="selectOne(item.states)"/></td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.national}}</td>
<td ng-click="del($event)" style="cursor: pointer">删除</td>
</tr>
</table>
<script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
//设置默认为表格非全选
$scope.selectedAll = false;
$scope.state = [];
$http({
method: "GET",
url: "http://localhost:63342/projectStudy/json/selected.json"
}).then(function successCallback(response) {
console.log(response);
$scope.items = response.data.dataList;
}, function errorCallback(response) {
console.log(response)
});
//全选
$scope.selectAll = function () {
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.selectedAll) {
$scope.items[i].states = true;
$scope.state = [1, 1, 1, 1, 1]; } else {
$scope.state = [];
$scope.items[i].states = false;
}
console.log($scope.state)
}
};
//单选
$scope.selectOne = function (m) { if (m == true) {
$scope.state.push(1);
console.log($scope.state.length);
if ($scope.state.length == $scope.items.length) {
$scope.selectedAll = true
} else {
$scope.selectedAll = false;
}
console.log($scope.state);
} else {
console.log(m);
$scope.state.pop(1);
$scope.changed(m);
}
};
$scope.changed = function (a) {
if (a == true) {
$scope.state.push(1); console.log($scope.state.length);
if ($scope.state.length == $scope.items.length) {
$scope.selectedAll = true
} else {
$scope.selectedAll = false;
}
} else {
console.log(a);
$scope.selectedAll = false;
}
}
//删除单个选项
$scope.del = function (event) {
//样式的删除
console.log($(event.target).parent().html());
$(event.target).parent().remove();
}
//删除全部选项
$scope.delAll = function (event) {
if ($scope.selectedAll == true) {
// console.log( $(event.target).siblings().html())
$(event.target).parent().siblings().remove();
$scope.selectedAll = false;
} else {
alert('尚未选择要删除的项')
}
} })
</script>
</body>
</html>
最新文章
- C#_技巧：.net下C++调用C#的dll
- [转]oracle 实施方法论学习心得
- 帝国cms一些常用的修改路径
- soap和http的区别
- document.referrer 特性
- Qt Style Sheet实践（四）：行文本编辑框QLineEdit及自动补全
- 导入安卓项目的时候，发生错误：Cause: peer not authenticated
- 1097. Deduplication on a Linked List (25)
- jira 无法停止启动解决方案
- Windows服务器Pyton辅助运维--01.自动Copy文件（文件夹）到远程服务器所在目录
- BZOJ 1726: [Usaco2006 Nov]Roadblocks第二短路
- vue2.0组件通信小总结
- 网页三剑客之CSS
- svn hotcopy backup
- Windows Server 2016-管理Active Directory复制任务
- Day3--Python--字符串,for循环,迭代
- cookie mapping 原理理解
- SSDT Hook实现内核级的进程保护
- 分布式为什么使用Redis
- 转：CentOS 6.x 挂载读写NTFS分区(fuse-ntfs-3g)