angular表格排序(查询)
来源:互联网 发布:自动编程 编辑:程序博客网 时间:2024/06/05 16:04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
}
td{
padding: 10px;
border: 1px solid #000;
}
.top{
display: inline-block;
width: 0;
height: 0;
border: 10px solid transparent;
border-top:10px solid red;
}
.bot{
display: inline-block;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom:10px solid red;
}
</style>
<script src="../angularJs/angular-1.5.5/angular.min.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myCtrl",function($scope){
var userInfo=[
{name:"marry",salary:12345,sex:"girl",birthday:1505111954735},
{name:"Lily",salary:12425,sex:"girl",birthday:1505711954735},
{name:"Jeny",salary:87145,sex:"girl",birthday:1505811954735},
{name:"Rose",salary:23845,sex:"girl",birthday:1905111954735},
{name:"Tom",salary:86565,sex:"boy",birthday:1575111994735}
];
$scope.arr=userInfo;
/*自定义的模糊查询*/
$scope.search="";
$scope.searchFun=function(obj){
if($scope.search!=""){
if(obj.name.toLowerCase().indexOf($scope.search.toLowerCase())!=-1){
return true;
}else{
return false;
}
}else{
return true;
}
};
/*排序功能的实现*/
$scope.sort="name";
$scope.revers=false;
$scope.sortFun=function(column){
if($scope.sort==column){
$scope.revers=!$scope.revers;
}else{
$scope.revers=false;
}
$scope.sort=column;
};
/*获取类的方法*/
$scope.getClass=function(column){
if($scope.sort==column){
if($scope.revers==false){
return "top"
}else{
return "bot"
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="search">
<table>
<thead>
<th>编号</th>
<th ng-click="sortFun('name')">姓名<span ng-class="getClass('name')"></span></th>
<th ng-click="sortFun('salary')">薪资<span ng-class="getClass('salary')"></span></th>
<th ng-click="sortFun('sex')">性别<span ng-class="getClass('sex')"></span></th>
<th ng-click="sortFun('birthday')">生日<span ng-class="getClass('birthday')"></span></th>
</thead>
<tbody>
<tr ng-repeat="item in arr|filter:searchFun:value|orderBy:sort:revers">
<td>{{$index}}</td>
<td>{{item.name|uppercase}}</td>
<td>{{item.salary|currency:'$'}}</td>
<td>{{item.sex}}</td>
<td>{{item.birthday|date:"yyyy-MM-dd"}}</td>
</tr>
</tbody>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
}
td{
padding: 10px;
border: 1px solid #000;
}
.top{
display: inline-block;
width: 0;
height: 0;
border: 10px solid transparent;
border-top:10px solid red;
}
.bot{
display: inline-block;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom:10px solid red;
}
</style>
<script src="../angularJs/angular-1.5.5/angular.min.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myCtrl",function($scope){
var userInfo=[
{name:"marry",salary:12345,sex:"girl",birthday:1505111954735},
{name:"Lily",salary:12425,sex:"girl",birthday:1505711954735},
{name:"Jeny",salary:87145,sex:"girl",birthday:1505811954735},
{name:"Rose",salary:23845,sex:"girl",birthday:1905111954735},
{name:"Tom",salary:86565,sex:"boy",birthday:1575111994735}
];
$scope.arr=userInfo;
/*自定义的模糊查询*/
$scope.search="";
$scope.searchFun=function(obj){
if($scope.search!=""){
if(obj.name.toLowerCase().indexOf($scope.search.toLowerCase())!=-1){
return true;
}else{
return false;
}
}else{
return true;
}
};
/*排序功能的实现*/
$scope.sort="name";
$scope.revers=false;
$scope.sortFun=function(column){
if($scope.sort==column){
$scope.revers=!$scope.revers;
}else{
$scope.revers=false;
}
$scope.sort=column;
};
/*获取类的方法*/
$scope.getClass=function(column){
if($scope.sort==column){
if($scope.revers==false){
return "top"
}else{
return "bot"
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="search">
<table>
<thead>
<th>编号</th>
<th ng-click="sortFun('name')">姓名<span ng-class="getClass('name')"></span></th>
<th ng-click="sortFun('salary')">薪资<span ng-class="getClass('salary')"></span></th>
<th ng-click="sortFun('sex')">性别<span ng-class="getClass('sex')"></span></th>
<th ng-click="sortFun('birthday')">生日<span ng-class="getClass('birthday')"></span></th>
</thead>
<tbody>
<tr ng-repeat="item in arr|filter:searchFun:value|orderBy:sort:revers">
<td>{{$index}}</td>
<td>{{item.name|uppercase}}</td>
<td>{{item.salary|currency:'$'}}</td>
<td>{{item.sex}}</td>
<td>{{item.birthday|date:"yyyy-MM-dd"}}</td>
</tr>
</tbody>
</table>
</body>
</html>
阅读全文
0 0
- angular表格排序(查询)
- angular表格的查询添加和排序
- angular过滤器表格排序
- angular(查询、删除、添加、排序)案例
- angular jQuery css html混合table表格查询 排序 添加 删除 隔行换色
- angular表格单个字段查询,修改,添加
- angular js 添加 排序 查询
- angular的查询添加排序
- angular实现排序,添加,查询
- Angular,添加,删除,查询,排序
- angular表格生成,顺逆排序,搜索
- angular js 查询 按钮排序 状态查询
- angular(过滤查询)
- angular查询(回车)
- Angular内置过滤器+orderBy排序+模糊查询
- angular+自定义模糊查询+排序+三角
- Angular模糊查询和排序已经添加
- angular删除数据+模糊查询,排序
- http协议,请求报文,响应报文格式思维导图
- python-
- 面试题39(2). 判断是否为平衡二叉树
- (CSU
- 异步任务利器Celery(一)介绍
- angular表格排序(查询)
- 动态内存管理和智能指针 2.0 -- shared_ptr
- 什么时候用相对定位或绝对定位
- 设计模式之策略模式-Strategy Pattern
- 【2017 ACM/ICPC Asia Regional Shenyang Online 1004】hdu 6197 array array array
- C#day2
- Python continue 语句
- Linux文件权限
- maven-小白入门学习笔记2