zoukankan      html  css  js  c++  java
  • js 实现单行数据上下移动

    部分代码是react.js的写法,但是js部分大部分都是通用的
    HTML部分

    <Button type="primary" onClick={this.moveData.bind(this,'up')} >上移</Button>

    <Button type="primary" onClick={this.moveData.bind(this,'down')}>下移</Button>

    js 部分
    单行数据上移下移功能,多行的话这个方法也许不管用了。

    moveData=(status)=>{
    let { WaListData, detailsId } = this.state;   // WaListData是数组,detailsId是单行数据id(唯一的)
    for(let i=0 , a = WaListData.length; i < a;i++){
    let arr = WaListData[i];
    let det = [];
    det.push(detailsId);
    if(det.some(v => v === arr.stkLocID)){    //stkLocID是数组里面的识别id
    if(status === 'up'){
    if(i === 0){
    message.error('到顶了');
    }else {
    WaListData[i] = WaListData.splice(i-1, 1, WaListData[i])[0]      //这里做了三个事情下面①分析:
    }
    this.setState({WaListData})
    }else if (status === 'down'){
    if(i === WaListData.length - 1){
    message.error('到底了');
    }else {
    WaListData[i] = WaListData.splice(i+1, 1, WaListData[i])[0]
    }
    this.setState({WaListData});
    i += 1;
    }
    }
    }
    }



    ①对上面splice分析解释:

    第一件:WaListData.splice(i-1, 1)删除下个索引的数据

    第二件:WaListData.splice(i-1, 1, WaListData[i])用当前索引数据(WaListData[i])替换下个索引的数据

    第三件:WaListData[i]= WaListData.splice(i-1, 1, WaListData[i])[0]当WaListData.splice()方法执行后会返回删除的数据,并将删除的数据赋值给当前索引

  • 相关阅读:
    setInterval和setTimeOut方法—— 定时刷新
    json
    开发者必备的火狐插件
    C#泛型类和集合类的方法
    jQuery几种常用方法
    SQL语句优化技术分析
    索引的优点和缺点
    Repeater使用技巧
    jQuery 表格插件
    利用WebRequest来实现模拟浏览器通过Post方式向服务器提交数据
  • 原文地址:https://www.cnblogs.com/zxm1993/p/11118638.html
Copyright © 2011-2022 走看看