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 相关文章推荐
js 验证身份证信息有效性
Mar 28 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
php 中英文语言转换类
2011/09/07 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
three.js 入门案例详解
2018/01/23 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
python重试装饰器示例
2014/02/11 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Python shelve模块实现解析
2019/08/28 Python
python实现静态服务器
2019/09/05 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
8种常用的Python工具
2020/08/05 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
database面试题
2013/03/28 面试题
24岁生日感言
2014/01/13 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
党员承诺书格式范文
2015/04/28 职场文书