Angular实现的table表格排序功能完整示例


Posted in Javascript onDecember 22, 2017

本文实例讲述了Angular实现的table表格排序功能。分享给大家供大家参考,具体如下:

先来看看效果图:

Angular实现的table表格排序功能完整示例

完整代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3water.com Angular表格排序</title>
    <style>
      table{
        border: 1px solid;
        text-align: center;
        width: 40%;
        height: 400px;
      }
      tr,td{
        border: 1px solid;
      }
      tr:nth-child(2n){
        background: gainsboro;
      }
    </style>
    <script type="text/javascript" src="js/angular.min.js" ></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
    <script>
      var app=angular.module("MyApp",[]);
      app.controller("demoC",["$scope",function($scope){
        $scope.shop=[{ state1:false,id:9001,name:"iphoneX",username:"张三",tel:13525565588,price:8699,city:"北京",time:new Date('11-23 10:00:00'),state:"已发货"},
        {state1:false,id:3007,name:"iphone6",username:"王红",tel:18524565588,price:5635,city:"郑州",time:new Date('11-23 11:38:20'),state:"已发货"},
        {state1:false,id:5312,name:"iphone7",username:"赵小龙",tel:17545585598,price:6180,city:"北京",time:new Date('11-23 9:17:00'),state:"未发货"},
        {state1:false,id:2132,name:"iphone8",username:"赵强",tel:17625565618,price:7190,city:"上海",time:new Date('11-23 10:40:00'),state:"未发货"}
        ];
        $scope.ckAll=function(){
          for(var i in $scope.shop){
            $scope.shop[i].state1=$scope.ckall;
          }
        }
        $scope.del=function(){
            for(var i=0; i<$scope.shop.length; i++){
              if($scope.shop[i].state=="已发货"&&$scope.shop[i].state){
                $scope.shop.splice(i,1);
                i--;
                }
                }
        }
        $scope.add=function(){
          var sname=$scope.sname;
          var susername=$scope.susername;
          var stel=$scope.stel;
          var sprice=$scope.sprice;
          var scity=$scope.scity;
          if(sname==undefined || sname==""){
            alert("用户名不能为空");
            $("#s").css("border-color","red");
          }else if(susername==undefined || susername==""){
            alert("商品名不能为空");
            $("#y").css("border-color","red");
          }else if(stel==undefined || stel==""){
            alert("手机号不能为空");
            $("#t").css("border-color","red");
          }else if(sprice==undefined || sprice==""){
            alert("价格不能为空");
            $("#p").css("border-color","red");
          }else if(scity==undefined || scity==""){
            alert("城市必须选择");
          }
          else{
            $scope.shop.push({name:sname,username:susername,tel:stel,price:sprice,city:scity})
            $scope.toto=false;
          }
        }
      }])
    </script>
  </head>
  <body ng-app="MyApp" ng-controller="demoC">
    <button ng-click="toto=true" style="background-color: greenyellow;">新增订单</button>
    <button ng-click="del()" style="background-color: greenyellow;">批量删除</button>
    <input type="text" placeholder="按商品名称查询" ng-model="selname" />
    <input type="text" placeholder="按手机号查询" ng-model="seltel"/>
    <select ng-model="selstate">
      <option value="">按状态查询</option>
      <option value="已发货">已发货</option>
      <option value="未发货">未发货</option>
    </select>
    <table cellpadding="0px" cellspacing="0px">
      <tr style="background-color: gray;">
        <td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></td>
        <td>id<button ng-click="px='id';flag=!flag" style="background-color: greenyellow;">排序</button></td>
        <td>商品名</td>
        <td>用户名</td>
        <td>手机号</td>
        <td>价格<button ng-click="px='price';flag=!flag" style="background-color: greenyellow;">排序</button></td>
        <td>城市</td>
        <td>下单时间<button ng-click="px='time';flag=!flag" style="background-color: greenyellow;">排序</button></td>
        <td>状态</td>
      </tr>
      <tr ng-repeat="s in shop | filter:{name:selname} | filter:{tel:seltel} | filter:{state:selstate} | orderBy:px:flag ">
        <td><input type="checkbox" ng-model="s.state1"></td>
        <td>{{s.id}}</td>
        <td>{{s.name}}</td>
        <td>{{s.username}}</td>
        <td>{{s.tel}}</td>
        <td>{{s.price | currency:"¥"}}</td>
        <td>{{s.city}}</td>
        <td>{{s.time | date : 'MM-HH hh:dd:ss'}}</td>
        <td><span ng-show="s.state=='已发货'" style="color: greenyellow;">{{s.state}}</span>
              <span ng-show="s.state=='未发货'" style="color: yellow;"><a href="#" rel="external nofollow" ng-click="s.state='已发货'">{{s.state}}</a></span></td>
      </tr>
    </table>
    <div style="margin-top: 50px; margin-left: 100px;">
      <form ng-show="toto">
        商品名:<input type="text" / ng-model="sname" id="s"><br /><br />
      用户名:<input type="text" ng-model="susername"id="y"/><br /><br />
      手机号:<input type="text" ng-model="stel" id="t"/><br /><br />
      价格为:<input type="text" ng-model="sprice" id="p"/><br /><br />
      城市:<select ng-model="scity">
        <option value="">--选择城市--</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="郑州">郑州</option>
      </select><br /><br />
      <button ng-click="add()">保存</button>
      </form>
    </div>
  </body>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 #Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 #Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 #Javascript
js读取本地文件的实例
Dec 22 #Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 #Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 #Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 #Javascript
You might like
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
vue实现评价星星功能
2020/06/30 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python查找第k小元素代码分享
2013/12/18 Python
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
如何唤起类中的一个方法
2013/11/29 面试题
旅游业大学生创业计划书
2014/01/31 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL