关键词： react antdesign table数据上移和下移 jquery table上移下移
html
由于vue+Element项目中的table，没有开放的上移下移的api,但是能对数据操作，故思路为数组中的一条数据，再重新添加一条数据，办法有点笨，但是好歹也是实现了，望有好的办法的，请留言
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
:formatter="formatter">
</el-table-column>
<el-table-column label="操作" >
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUp(scope.$index, scope.row)"
>上移</el-button>
<el-button
size="mini"
type="danger"
@click="handleDown(scope.$index, scope.row)">下移</el-button>
<el-button
size="mini"
type="danger"
@click="deleteDown(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
js
data () {
return {
‘tableData‘: [{
date: ‘2016-05-02‘,
name: ‘王小虎‘,
address: ‘上海市普陀区金沙江路 1 弄‘,
id:‘1‘
}, {
date: ‘2016-05-04‘,
name: ‘王小虎‘,
address: ‘上海市普陀区金沙江路 2 弄‘,
id:‘2‘
}, {
date: ‘2016-05-01‘,
name: ‘王小虎‘,
address: ‘上海市普陀区金沙江路 3 弄‘,
id:‘3‘
}, {
date: ‘2016-05-03‘,
name: ‘王小虎‘,
address: ‘上海市普陀区金沙江路 4 弄‘,
id:‘4‘
}],
‘obj‘:{
‘x‘:1,
‘y‘:2
}
}
},
methods:{
formatter(row, column) {
//console.log(‘地址格式化‘,row,column);
return row.address;
},
handleUp(index,row) {
console.log(‘上移‘,index,row);
console.log(this.tableData[index]);
if (index > 0) {
let upDate = this.tableData[index - 1]
this.tableData.splice(index - 1, 1);
this.tableData.splice(index,0, upDate);
} else {
alert(‘已经是第一条，不可上移‘);
}
},
deleteDown(index,row){
console.log(‘删除‘,index,row);
this.tableData.splice(index, 1);
},
handleDown(index,row){
console.log(‘下移‘,index,row);
if ((index + 1) === this.tableData.length){
alert(‘已经是最后一条，不可下移‘);
} else {
console.log(index);
let downDate = this.tableData[index + 1]
this.tableData.splice(index + 1, 1);
this.tableData.splice(index,0, downDate);
}
}
}
angularjs实现数据列表的增加删除和上移下移等功能实例
...51.net/article/91991.htm这篇文章给大家分享了AngularJS循环实现数据列表的增加、删除和上移下移等基础功能，对大家学习AngularJS具有一定的参考借鉴价值，有需要的朋友可以看看。 效果图实例代码<!DOCTYPEhtml><htmllang="en"ng-ap... 查看详情
上移下移扩展版总结(代码片段)
需求上移下移 需求： 1）点击上移就将当前的按钮的父级上移一位 2）当点击第一个时候将当前按钮的父级移动到最后一位 3）当点击最后一个时候将当前按钮的父级移动到首位4）带过渡动画 需求分析：下移：剪切所点... 查看详情
jqgrid上移下移单元格(代码片段)
在表格中常常需要调整表格中数据的显示顺序，我用的是jqgrid,实现原理就是将表中的行数保存到数据库中，取数据时按行进行排序1、上移，下移按钮<ahref="javascript:void(0)"onclick="operateWithOneRowById(up)"class="linkButton">上移</a>... 查看详情
js实现数组内数据的上移和下移
varswapItems=function(arr,index1,index2){ arr[index1]=arr.splice(index2,1,arr[index1])[0] returnarr}vararr=[1,2,3]varnewArr=[]upData(arr,index){ if(this.arr.length>1&&index!==0){ newA 查看详情
vue做一个上移和下移，删除的li功能(代码片段)
效果图：思路就是冒泡原理，把数据放到一个空数组，对其进行排序,单选框用到的是iview。具体实现代码：<divv-for="iteminsingledLists":key="item.index">//数组singledLists<Checkbox@on-change="checkSingle":disabled="isDisabled"v-model="item.isRight 查看详情
lind.ddd.domain.isortbehavor～上移与下移
...移”操作，这个一般在内存里完成，然后统一提交到数据库中，对于上移与下移的设计，大叔在LIND.DDD.DOMAIN里有一个ISortBehavor接口，主要是说，如果实体对象支持排序功能，可以实现这个接口，而在扩展库中，将有为本地结... 查看详情
jquery实现table动态添加行删除行以及行的上移和下移
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title></title><scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script>... 查看详情
元素的上移下移等排序操作
...项目中，我经常遇到对元素进行排序操作的需求，包括：上移、下移、置顶、置底。那么这些操作如何实现呢？ 上移，简言之就是将需要上移的元素和它前面元素交换位置，使用insertBefore(),大致思路为：vardom=需要上移的元... 查看详情
cdatagridview中怎样把多行数据同时上移或下移
...对DataGridView本身的操作。2和DataGridView稀有据源这时操作数据源然后刷新DataGridView就可以了。---------------你可以换一种思路将多行移动改变为一行的移除与插入。假如还有不清楚把你的需求说更清楚些明天有时光发个例子给你。... 查看详情
wpflistbox选中项上移下移
原文:wpflistbox选中项上移下移 privatevoidMoveUp_Click(objectsender,RoutedEventArgse)????????????DataRowViewrowView=this.listScrip.SelectedItemasDataRowView;???????if(rowView==null)?????????????? 查看详情
vue中实现table的首行首列固定
参考技术A移动端需要表格展示数据时，需要滑动表格实现展示更多数据的目的，固定表格的首行和首列可在查看数据时更加直观。首先将表格分成左右两部分，左边第一列在上下滑动是header部分需要固定；右边第一行在左右滑... 查看详情
请教jquery对表格的行操作的。对页面表格进行上下移动位置，删除记录的操作。谢谢。如下补充
型号厂商数量封装批号供应商单价操作asdf原装asdf0123上移下移删除model004原装asdasda011上移下移删除model001信息技术原装dasdas025上移下移删除model002信息技术原装dasdas026上移下移删除model003信息技术原装dasdas011上移下移删除asdasd原装... 查看详情
请问如何在css中实现和<tablealign=center></table>一样的效果?
活动作品如何在一个网页实现登录_注册表单切换？14分钟带你使用CSS+JS实现炫酷滑动切换效果您的浏览器不支持HTML5视频zymedia(\'video\')参考技术Atabletext-align:center;追问我试过不行。追答你是要把table居中对吧？我刚刚以为你要把... 查看详情
思想上移，行动下移
...导致对于问卷的相关内容，不敢苟同，做以深思。借思想上移。行动下移，八字总结，以表不忘初心之念。首先。我想说的是：也许。我没有不论什么资格写这篇总结，由于我也是来工作的。更何况，还仅仅是个初入社会的... 查看详情
如何在hibernate中实现对两个表的查询数据？
】如何在hibernate中实现对两个表的查询数据？【英文标题】：howtoimplementquerydataontwotablesinhibernate?【发布时间】：2012-06-1502:48:24【问题描述】：如何在hibernate中实现这个查询？selecttab1.namefromtable1tab1,table2tab2wheretable1.id=table2.id【问... 查看详情
phpmysql排序上移下移
后台点击上移新闻向上移动一行并且前台的显示顺序也改变哪里有教程啊提示：web后台的话用的是js。mysql排序的话一般按id，，，默认是后入先出，，，新闻排序，你可以见一个排序字段，比如MyOrder，数字类型，，然后MyOrder默... 查看详情
使用jquery实现option的上移和下移
基本思路： 上移：（1）获取当前选中的元素的索引值 （2）判断当前元素是否为第一个元素 （3）如果是，则不执行上移操作，如果不是，则则调用insertBefore方法插入... 查看详情
键盘出现时uitextfield上移【swift】
...以传值决定是否有动画以及移动高度。如果想在Objective-C中实现这个效果，可以看这篇文章UITextField被选中时移动UIView上去。试试吧，工作起来很好，我测试过了。 查看详情