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 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
js 省地市级联选择
2010/02/07 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python提取log文件内容并画出图表
2019/07/08 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
一套Java笔试题
2016/08/20 面试题
园林施工员岗位职责
2013/12/11 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
计算机专业自荐信
2015/03/05 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL