이 글에서는 주로 Angular에서 구현한 테이블 정렬 기능을 소개하고, AngularJS 테이블 정렬과 관련된 이벤트 응답, 요소 순회, 속성 수정 및 기타 관련 작업 기술을 완전한 예제 형식으로 분석합니다. 이 글에서는
Angular에서 구현한 테이블 정렬 기능에 대해 설명합니다. 참고를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
먼저 렌더링을 살펴보겠습니다.
전체 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net 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> <p 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> </p> </body> </html>
위는 제가 모두를 위해 편집한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
vue에서 일반적으로 사용되는 구성 요소 및 프레임워크 구조(자세한 튜토리얼)
fastclick 코드에서 "클릭 연결" 탭을 해결하는 방법
애니메이션에서 애니메이션 효과를 구현하는 방법. js Marquee
Parcel.js + Vue 2.x에서 매우 빠른 제로 구성 패키징을 달성하는 방법
Vue를 사용할 때 브라우저가 돌아갈 때 beforeRouteLeave가 트리거될 수 없는 문제
WeChat 미니 프로그램에서 녹음 및 재생 녹음 기능을 구현하는 방법
위 내용은 Angular에서 테이블 정렬을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!