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()方法执行后会返回删除的数据,并将删除的数据赋值给当前索引

上一篇:数组Array,构建/遍历/添加元素/删除元素/concat/splice/slice/等等


下一篇:split、splice、slice 的区别