收藏
回答

可以排序的表格如何写?做小程序才没几天,求助

最多写出这样一个表格,排序是不会,求大佬解答

<view class="table">

<view class="tr bg-w">

<view class="th" bindtap="sortT">Time</view>

<view class="th">Status</view>

<view class="th ">Method</view>

</view>

<block wx:for="{{listData}}" wx:key="{{time}}">

<view class="tr bg-g" wx:if="{{index % 2 == 0}}">

<view class="td">{{item.time}}</view>

<view class="td">{{item.status}}</view>

<view class="td">{{item.method}}</view>

</view>

<view class="tr" wx:else>

<view class="td">{{item.time}}</view>

<view class="td">{{item.status}}</view>

<view class="td">{{item.method}}</view>

</view>

</block>

</view>


.table {

border: 0px solid darkgray;

padding: 20rpx 10rpx;

}

.tr {

display: flex;

width: 100%;

justify-content: center;

height: 3rem;

align-items: center;

}

.td {

width:50%;

justify-content: center;

text-align: center;

}

.bg-w{

background: #0089dd;

opacity: 0.6;

}

.bg-g{

background: #E6F3F9;

}

.th {

width: 50%;

justify-content: center;

background: #0089bb;

color: #fff;

display: flex;

height: 3rem;

align-items: center;

}


Page({

data:{

listData: [

{ "time": "time1", "status": "status1", "method": "method1" },

{ "time": "time2", "status": "status2", "method": "method2" },

{ "time": "time3", "status": "status3", "method": "method3" },

{ "time": "time4", "status": "status4", "method": "method4" },

{ "time": "time5", "status": "status5", "method": "method5" },

{ "time": "time6", "status": "status6", "method": "method6" }

]

},

onLoad: function () {

console.log('onLoad')

},

onShow(){

},

sortT:function (e) {

}

})


回答关注问题邀请回答
收藏

2 个回答

  • Code Weaver
    Code Weaver
    2020-03-05

    你说的排序是指?能否写个代码片段?

    2020-03-05
    有用 1
    回复 3
    • ooFFiioo
      ooFFiioo
      2020-03-05
      指点击time后就会倒序或者顺序,像下面这张图点击选项可以根据顺序倒序排序
      2020-03-05
      回复
    • Code Weaver
      Code Weaver
      2020-03-05回复ooFFiioo
      根据哪个字段进行排序呢? 比例么?
      2020-03-05
      回复
    • ooFFiioo
      ooFFiioo
      2020-03-05
      就像我这个表格里面点击option就可以根据字母或者数字排序,我照着下面一个大哥写的,还是有问题
      2020-03-05
      回复
  • 猿猿猿ಠ_ರೃ树林
    猿猿猿ಠ_ರೃ树林
    2020-03-05

    可以参考我这个试试

    this.data.listData.sort(this.compare('time'))
    

    compare: function (property) {

        return function (a, b) {

          var value1 = Date.parse(a[property]);

          var value2 = Date.parse(b[property]);

          return value2 - value1;

        }

      },


    2020-03-05
    有用
    回复 1
    • ooFFiioo
      ooFFiioo
      2020-03-05
      好的,谢谢
      2020-03-05
      回复
登录 后发表内容
问题标签