php 单击表头排序,点击表头对该列进行排序

需求：点击表头内容实现根据该列进行排序

如图为表格中得某一列

实现方法1：只需引入js文件，哪个需要排序加个类名即可。

#MyHeadTab thead tr{

cursor: pointer;

}

.MyHeadTab{

cursor:pointer;

}

#MyHeadTab .arrow,.MyHeadTab .arrow{

font-family: webdings;

color: #ccc;

padding: 0;

font-size: 10px;

height: 11px;

width: 10px;

overflow: hidden;

margin-bottom: 5;

margin-top: -3;

padding: 0;

padding-top: 0;

padding-bottom: 2;

}

3.在需要排序得列加类名

实现方法2：自定义排序方法

//propertyName为该列得属性名，order为正序或倒序

compare(propertyName,order) {

return function (object1, object2) {

var value1 = object1[propertyName];

var value2 = object2[propertyName];

if(order){

if (value2 < value1) {

return -1;

}

else if (value2 > value1) {

return 1;

}

else {

return 0;

}

}if(!order){

if (value2 > value1) {

return -1;

}

else if (value2 < value1) {

return 1;

}

else {

return 0;

}

}

}

}

使用时：

js方法：

compareFunc:function(propertyName,order){

let me=this;

me.list.sort(me.compare(propertyName,order));

if(propertyName=="type"){

//因一个表格可能有多个列需要排列，设置一个标志位判断当前位升序还是倒序

me.ordertype=!me.ordertype;

}

}

html中：

资产类型

5

6

样式同方式1。

效果图：

将不断完善更新，期待您的批评指正！