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 相关文章推荐
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
javascript canvas时钟模拟器
Jul 13 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程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
js实现列表按字母排序
2020/08/11 Javascript
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
Java程序员面试题
2013/07/15 面试题
总裁岗位职责
2013/12/04 职场文书
退休感言
2014/01/28 职场文书
学生个人自我鉴定
2014/03/26 职场文书
施工质量承诺书范文
2014/05/30 职场文书
委托书格式
2014/08/01 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
群众路线调研报告范文
2014/11/03 职场文书
团代会邀请函
2015/02/02 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
企业法律事务工作总结
2015/08/11 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
mysql配置SSL证书登录的实现
2021/09/04 MySQL