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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 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
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
Vue实现todolist删除功能
2018/06/26 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
2014年村计划生育工作总结
2014/11/14 职场文书
卫生院义诊活动总结
2015/05/07 职场文书