补充上一篇按钮排序

    Page({
      data: {
        objectArray: [
          { id: 3, unique: 'unique_5' },
          { id: 2, unique: 'unique_4' },
          { id: 4, unique: 'unique_3' },
          { id: 1, unique: 'unique_2' },
          { id: 5, unique: 'unique_1' },
          { id: 0, unique: 'unique_0' },
        ],
        numberArray: [1, 2, 3, 4]
      },
      switch: function (e) {
        const length = this.data.objectArray.length
        for (let i = 0; i < length; ++i) {
          // const x = Math.floor(Math.random() * length)     //杂序代码
          // const y = Math.floor(Math.random() * length)
          // const temp = this.data.objectArray[x]
          // this.data.objectArray[x] = this.data.objectArray[y]
          // this.data.objectArray[y] = temp
          
          for(let j = 0;j < length - 1 - i; j++){                               //顺序代码,使用冒泡排序方法,判定数据的大小来排序,但是需要注意,x和y的取值,在这里this指代的是语句,而不是单纯的数据,所以我们要使用其中的ID数据来判断大小,之后冒泡排序就可以实现数据的排序
            var x = this.data.objectArray[j].id
            var y = this.data.objectArray[j + 1].id 
            console.log(x)
            console.log(y)
            if (x > y){
              let y = this.data.objectArray[j]
              this.data.objectArray[j] = this.data.objectArray[j + 1]
              this.data.objectArray[j + 1] = y
            } else {
    }
          }
        }
        this.setData({
          objectArray: this.data.objectArray
        })
      },
      addToFront: function (e) {
        const length = this.data.objectArray.length
        this.data.objectArray = [{ id: length, unique: 'unique_' + length }].concat(this.data.objectArray)
        this.setData({
          objectArray: this.data.objectArray
        })
      },
      addNumberToFront: function (e) {
        this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)
        this.setData({
          numberArray: this.data.numberArray
        })
      }
    })

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现点击按钮来实现上下tr排序,可以按照以下步骤进行: 1. 给上下排序按钮添加点击事件,获取当前点击的按钮类型(上/下)。 2. 获取当前选中的行,并根据按钮类型进行排序。 3. 根据排序结果,重新渲染表格。 下面是一个示例代码: HTML: ``` <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>男</td> </tr> <tr> <td>王五</td> <td>20</td> <td>女</td> </tr> </tbody> </table> <button id="upBtn">上移</button> <button id="downBtn">下移</button> ``` jQuery: ``` $(function() { // 给上下排序按钮添加点击事件 $('#upBtn, #downBtn').click(function() { var type = $(this).attr('id') == 'upBtn' ? 'up' : 'down'; // 获取当前点击的按钮类型 var selected = $('#myTable tbody tr.selected'); // 获取当前选中的行 if (selected.length) { if (type == 'up') { selected.prev().before(selected); // 上移 } else { selected.next().after(selected); // 下移 } } // 重新渲染表格 $('#myTable tbody tr').removeClass('selected'); $('#myTable tbody tr:odd').addClass('odd'); $('#myTable tbody tr:even').addClass('even'); }); // 给表格内容添加点击事件 $('#myTable tbody tr').click(function() { $(this).addClass('selected').siblings().removeClass('selected'); }); }); ``` 该代码实现了点击按钮来实现上下tr排序的功能,并且支持对选中的行进行上下移动。需要注意的是,该代码只支持对相邻的行进行移动,对于非相邻的行需要进行相应的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值