过滤器（排序）+添加+查询+修改+批量删除

最新推荐文章于 2023-02-02 09:26:47 发布

Ason_haiyu

最新推荐文章于 2023-02-02 09:26:47 发布

阅读量478

点赞数

本文链接：https://blog.csdn.net/Ason_haiyu/article/details/79027515

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style>
			table {
				width: 600px;
			}
		</style>
		<script type="text/javascript" src="js/angular.min.js"></script>
		
		<script>
			var app = angular.module("gaomx", []);
			app.controller("democ", function($scope) {
				$scope.px = '-level';
				$scope.sj = true;
				$scope.stus = [{
						ck: false,
						name: '曹操',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					}, {
						ck: false,
						name: '刘备',
						pwd: '123456',
						level: 5,
						time: new Date(),
						update: '修改密码'
					}, {
						ck: false,
						name: '司马懿',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					},
					{
						ck: false,
						name: '孙权',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					}, {
						ck: false,
						name: '关羽',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					}, {
						ck: false,
						name: '司马懿张飞',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					},
					{
						ck: false,
						name: '周瑜',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					}, {
						ck: false,
						name: '鲁肃',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					}, {
						ck: false,
						name: '黄盖',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					},
					{
						ck: false,
						name: '张辽',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					}, {
						ck: false,
						name: '赵云',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					}, {
						ck: false,
						name: '孙尚香',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					},
					{
						ck: false,
						name: '大乔',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					}, {
						ck: false,
						name: '小乔 ',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					}
				];
				$scope.add = function() {
					$scope.stus.push({
						name: '洛河之女',
						pwd: '123456',
						level: 1,
						time: new Date(),
						update: '修改密码'
					});
				}

				$scope.delAll = function() {
					for(var i = 0; i < $scope.stus.length; i++) {
						if($scope.stus[i].ck == true) {
							$scope.stus.splice(i, 1);
							i--;
						}
					}
				}

				$scope.ckall = function() {
					for(var i = 0; i < $scope.stus.length; i++) {
						$scope.stus[i].ck = $scope.flag;
					}
				}

			});
		</script>
	</head>

	<body ng-app="gaomx" ng-controller="democ">
		<input type="text" value="用户名搜索" ng-model="cname" />用户名搜索
		<select ng-model="clevel">
			<option>选择级别</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
		</select>
		<select ng-model="px">
			<option>排序</option>
			<option value="-level">级别从高到低</option>
			<option value="+level">级别从低到高</option>
		</select>

		<br />
		<button style="background: green;color: #fff;" ng-click="add()">新增用户</button>
		<button style="background: orangered;color: #fff;" ng-click="delAll()">批量删除</button><span>敏感词：抢劫、小偷</span>
		<table border="1" cellspacing="0">
			<tr>
				<td><input type="checkbox" ng-click="ckall()" ng-model="flag" /></td>
				<td>ID</td>
				<td>用户名</td>
				<td>密码</td>
				<td ng-click="px='level';sj=!sj">级别</td>
				<td>创建时间</td>
				<td>操作</td>
			</tr>
			<tr ng-repeat="s in stus|orderBy:px|filter:{name:cname,level:clevel}">
				<td><input type="checkbox" ng-model="s.ck" /></td>
				<td>{{$index}}</td>
				<td>
					<span ng-click="f=true">{{s.name}}</span>
					<span ng-show="f">
					{{s.name}}<input ng-model="s.name"/><button ng-click="f=false">保存</button>
					</span>
				</td>
				<td>
					<span>{{s.pwd}}</span>
					<span ng-show="f">
					{{s.pwd}}<input ng-model="s.pwd"/><button ng-click="f=false">保存</button>
					</span>
				</td>
				<td>{{s.level}}</td>
				<td>{{s.time|date:"yyyy-MM-dd hh:mm:ss"}}</td>
				<td><button ng-click="f=true">{{s.update}}</button></td>
			</tr>
		</table>

	</body>

</html>

Ason_haiyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过滤器（排序）+添加+查询+修改+批量删除

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> table { width: 600px; } var app = angular.module("gaomx", []); app.
复制链接

扫一扫