网络请求增批删改模糊查

最新推荐文章于 2023-06-13 20:01:09 发布

wanglinuo521

最新推荐文章于 2023-06-13 20:01:09 发布

阅读量187

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wanglinuo521/article/details/79100590

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.input{
border-radius: 20px;
border: 1 solid black;
height: 30px;
}
#remove1{
border-radius:10px;
width: 100px;
height: 40px;
background-color: white;
}

#tab1{
margin-top: 50px;
}

#tab2{
margin-top: 10px;
}

#tab2 tr:nth-child(even){
background-color: #EEEEEE;
}

#but{
border-radius: 10px;
border-color: black;
}
</style>
<script src="../libs/angular.min.js"></script>
<script src="../libs/angular-route.min.js"></script>
<script>
var app = angular.module("MyApp",[]);
app.controller("Mycon",function($scope,$http){
$http({
method:"GET",
url:"http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
}).success(function(data){
//执行请求成功的代码
$scope.datas = data;
console.log(data);
}).error(function(){
//执行请求失败的代码
})
$scope.date1 = new Date().getTime();
$scope.ff = true;
$scope.gg = false;
//全选/反选多选框的点击事件
$scope.cb = function(){

if($scope.ck){//判断当点击全选框时
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].state){//当其他复选框为选中状态时
$scope.datas[i].state = false;//改为不选中状态
}else{//当其他复选框为不选中状态时
$scope.datas[i].state = true;//改为选中状态
}
}

}else{//判断当不点击全选框时
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].state){//当其他复选框为选中状态时
$scope.datas[i].state = false;//改为不选中状态
}else{//当其他复选框为不选中状态时
$scope.datas[i].state = true;//改为选中状态
}
}
}

}

//批量删除的点击事件
$scope.Pxremove = function(){
$scope.arr = [];

for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].state){
$scope.arr.push($scope.datas[i].name);
}
}
if($scope.arr.length<=0){
alert("请选择一条数据哦");
}else{
for(var j=0 ;j<$scope.arr.length;j++){
for(var i=0;i<$scope.datas.length;i++){
if($scope.arr[j]==$scope.datas[i].name){
$scope.datas.splice(i,1);
if($scope.datas.length<=0){//判断当数据为0时
$scope.ff = false;//把菜单功能框隐藏
$scope.gg = true;//把无数据操作提示展示
}
}
}
}
}
}

//点击删除的事件
$scope.remove = function(index){
if(confirm("是否要删除数据")){//提示弹出框提示，点击确认删除，点击取消不删除
$scope.datas.splice(index,1);

if($scope.datas.length<=0){//判断当数据为0时
$scope.ff = false;//把菜单功能框隐藏
$scope.gg = true;//把无数据操作提示展示
}
alert("删除成功");//提示
}

}
//排序
$scope.op = "根据出生日期排序";
$scope.sel = function(){
if($scope.op=="根据出生日期排序"){//判断下拉框选中根据出生日期排序
$scope.datas.sort(function(a,b){
return a.birthday-b.birthday;
});
}
if($scope.op=="根据薪资排序"){//判断下拉框选中根据薪资排序
$scope.datas.sort(function(a,b){
return a.salary-b.salary;
});
}
}
});
</script>

</head>
<body ng-controller="Mycon">

<center ng-show="gg" style="margin-top: 200px;">
<h1>无数据操作</h1>
</center>

<center ng-show="ff">
<table id="tab1" border="0" cellpadding="6" cellspacing="1">
<tr>
<td><input class="input" id="input1" type="text" placeholder="根据姓名模糊查询..." ng-model="name"/></td>
<td><input class="input" id="input2" type="text" placeholder="根据部门模糊查询..." ng-model="department"/></td>
<td>
<select style="height: 30px;" ng-change="sel()" ng-model="op">
<option>根据出生日期排序</option>
<option>根据薪资排序</option>
</select>
</td>
<td><button id="remove1" ng-click="Pxremove()">批量删除</button></td>
</tr>
</table>
<table id="tab2" border="1" cellpadding="6" cellspacing="0">
<tr style="background-color: #999999;">
<td><input type="checkbox" ng-click="cb()" ng-model="ck" /></td>
<td>员工姓名</td>
<td>员工年龄</td>
<td>员工性别</td>
<td>员工薪资</td>
<td>出生日期</td>
<td>部门名称</td>
<td>删除</td>
</tr>
<tr ng-repeat="x in datas | filter : {name:name} | filter : department">
<td><input type="checkbox" ng-model="x.state" /></td>
<td>{{x.name}}</td>
<td>{{(date1 | date:'yyyy')-(x.birthday | date:'yyyy')}}</td>
<td>{{x.gender}}</td>
<td>{{x.salary | currency:'￥'}}</td>
<td>{{x.birthday | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>{{x.department.name}}</td>
<td><button id="but" ng-click="remove($index)">删除</button></td>
</tr>
</table>
</center>
</body>

</html>

wanglinuo521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网络请求增批删改模糊查

.input{ border-radius: 20px; border: 1 solid black; height: 30px; } #remove1{ border-radius:10px; width: 100px; height: 40px; background-color: white; } #tab1{ margi
复制链接

扫一扫