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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
Vuex 入门教程
Jan 10 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
pytorch中图像的数据格式实例
2020/02/11 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
VC++笔试题
2014/10/13 面试题
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
销售演讲稿范文
2014/01/08 职场文书
人事部专员岗位职责
2014/03/04 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
毕业生评语大全
2015/01/04 职场文书
《大禹治水》教学反思
2016/02/22 职场文书