封裝通用的排序函數
代碼：
//根據排序關鍵字與是否為升序產生排序方法 var sortExp = function(key, isAsc) { return function(x, y) { if(isNaN(x[key])) { //如果當前排序的不是數字 if(x[key] > y[key]) return 1*(isAsc?1:-1); if(x[key] < y[key]) return -1*(isAsc?1:-1); return 0; }else{ return (x[key]-y[key])*(isAsc?1:-1); } } };
使用封裝后的通用的排序函數的兩個案例
一、普通用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>排序</title> </head> <body> <script> //對象數組 var pdts = [{ title: "z-paint pot", quantity: 9, price: 3.95 }, { title: "iPhone XS", quantity: 10, price: 8906.72 }, { title: "polka dots", quantity: 17, price: 12.3 }, { title: "pebbles", quantity: 5, price: 6.71 }, { title: "Mi Note5", quantity: 8, price: 2985.6 }]; //根據排序關鍵字與是否為升序產生排序方法 var sortExp = function(key, isAsc) { return function(x, y) { if(isNaN(x[key])) { //如果當前排序的不是數字 if(x[key] > y[key]) return 1*(isAsc?1:-1); if(x[key] < y[key]) return -1*(isAsc?1:-1); return 0; }else{ return (x[key]-y[key])*(isAsc?1:-1); } } }; //按價格升序 pdts.sort(sortExp("price",true)); document.write(JSON.stringify(pdts)); document.write("<br/>------------------------------<br/>"); pdts.sort(sortExp("price",false)); document.write(JSON.stringify(pdts)); document.write("<br/>------------------------------<br/>"); pdts.sort(sortExp("title",true)); document.write(JSON.stringify(pdts)); document.write("<br/>------------------------------<br/>"); pdts.sort(sortExp("title",false)); document.write(JSON.stringify(pdts)); </script> </body> </html>
二、結合vue2.js的購物車完整案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>購物車</title> <style> table{ border-collapse: collapse; } .bg{ background: paleturquoise; } table tr:hover{ background: pink; } tr:first-child:hover,tr:last-child:hover{ background: white; } </style> </head> <body> <h2 id="title">Shopping Cart</h2> <td id="table"> <table border="1" width="100%"> <tr>
<th>編號</th>
<th>名稱<button v-on:click="isAsc('name',true)">↑</button><button v-on:click="isAsc('name',false)">↓</button></th>
<th>數量<button v-on:click="isAsc('number',true)">↑</button><button v-on:click="isAsc('number',false)">↓</button></th>
<th>價格<button v-on:click="isAsc('price',true)">↑</button><button v-on:click="isAsc('price',false)">↓</button></th>
<th>小計</th>
<th>操作</th>
</tr> <tr v-for="(s,i) in shopping" v-bind:class="{bg:i%2==0}"> <td>{{i+1}}</td> <td>{{s.name}}</td> <td><button v-on:click="s.number+=1">+</button><input type="number" v-model="s.number" /><button v-if="s.number>0" v-on:click="s.number-=1">-</button></td> <td>${{s.price}}</td> <td>${{s.price*s.number}}</td> <td><button v-on:click="remove(i)">移除</button></td> </tr> <tr> <td style="text-align: right;" colspan=6>合計：${{s}}</td> </tr> </table> </td> <script type="text/javascript" src="js/vue.js" ></script> <script> var app2 = new Vue({ el:'table', data:{ shopping:[ {name:"iPhone X",number:3,price:8888}, {name:"aPhone 8",number:2,price:5888}, {name:"華為 mate10 pro",number:1,price:5888} ] }, computed:{ s:function(){ sum = 0; for(var i=0;i<this.shopping.length;i++){ sum = sum+this.shopping[i].price*this.shopping[i].number; } return sum; } }, methods:{ remove:function(i){ if(confirm("確實刪除嗎？")){ this.shopping.splice(i,1); } }, sortExp:function(key,isAsc){ return function(x,y){ if(isNaN(x[key])){ if(x[key]>y[key])return 1*(isAsc?1:-1); if(x[key]<y[key])return -1*(isAsc?1:-1); return 0; } else { return (x[key]-y[key]*(isAsc?1:-1)); } } }, isAsc:function(key,isAsc){ this.shopping.sort(this.sortExp(key,isAsc)); } } }); </script> </body> </html>
運行結果：
注：第一個案例完全復制與本人老師的代碼，如想深入了解可訪問博客：http://www.cnblogs.com/best/p/8109600.html#_lab2_1_2