元素的上移下移等排序操作

星星眨眼 星星眨眼     2022-08-10     118

关键词:

最近一些项目中,我经常遇到对元素进行排序操作的需求,包括:上移、下移、置顶、置底。那么这些操作如何实现呢?

 

上移,简言之就是将需要上移的元素和它前面元素交换位置,使用insertBefore(),大致思路为:

var dom=需要上移的元素;
var domPrev=dom.prev();
dom.insertBefore(domPrev);

下移,类似上移,将需要下移的元素和它后面的元素交换位置,使用insertAfter(),大致思路为:

var dom=需要下移的元素;
var domNext=dom.next();
dom.insertAfter(domNext);

置顶,将需要置顶的元素变成其父元素的第一个孩子,使用prependTo(),大致思路为:

var dom=需要置顶的元素;
var domParent=dom.parent();
dom.prependTo(domParent);

置底,类似置顶,将需要置底的元素变成其父元素的最后一个孩子,使用appendTo(),大致思路为:
var dom=需要置底的元素;
var domParent=dom.parent();
dom.appendTo(domParent);

通过insertBefore(),insertAfter(),prependTo(),appendTo()就能实现元素的这些简单排序操作。

lind.ddd.domain.isortbehavor~上移与下移

在进行列表排序时,有个“上移”和“下移”操作,这个一般在内存里完成,然后统一提交到数据库中,对于上移与下移的设计,大叔在LIND.DDD.DOMAIN里有一个ISortBehavor接口,主要是说,如果实体对象支持排序功能,... 查看详情

phpmysql排序上移下移

后台点击上移新闻向上移动一行并且前台的显示顺序也改变哪里有教程啊提示:web后台的话用的是js。mysql排序的话一般按id,,,默认是后入先出,,,新闻排序,你可以见一个排序字段,比如MyOrder,数字类型,,然后MyOrder默... 查看详情

请教jquery对表格的行操作的。对页面表格进行上下移动位置,删除记录的操作。谢谢。如下补充

型号厂商数量封装批号供应商单价操作asdf原装asdf0123上移下移删除model004原装asdasda011上移下移删除model001信息技术原装dasdas025上移下移删除model002信息技术原装dasdas026上移下移删除model003信息技术原装dasdas011上移下移删除asdasd原装... 查看详情

angularjs实现数据列表的增加删除和上移下移等功能实例

...章给大家分享了AngularJS循环实现数据列表的增加、删除和上移下移等基础功能,对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友可以看看。 效果图实例代码<!DOCTYPEhtml><htmllang="en"ng-app="myapp"ng-c 查看详情

cdatagridview中怎样把多行数据同时上移或下移

这个分两种情况:1和DataGridView没稀有据源这时就是对DataGridView本身的操作。2和DataGridView稀有据源这时操作数据源然后刷新DataGridView就可以了。---------------你可以换一种思路将多行移动改变为一行的移除与插入。假如还有不清楚... 查看详情

js数组移动上移下移置顶置底,vue实现表格上下移动置底置顶

...顺序方法/*参数说明arr是要操作的数组index1是准备移动的元素index2是准备移动到的位置往下移就是index2=index+1往上移动就是index2=index+1;这个也可以在页面试试那个方法就指导了,但是置顶和置底还有点差别*/varswapItems=function(arr,in... 查看详情

jqgrid上移下移单元格(代码片段)

...表中的行数保存到数据库中,取数据时按行进行排序1、上移,下移按钮<ahref="javascript:void(0)"onclick="operateWithOneRowById(up)"class="linkButton">上移</a><ahref="javascript:void(0)" 查看详情

div鼠标悬停,子元素上移,鼠标移出,子元素下移动画。

HTML:              <divclass="edt_title"><divid="edt_title"><pclass="edt_title_top">e定投</p><divclass="product_line"></div><pclass="edt_title_c">多种期限<br/> 查看详情

table中实现数据上移下移效果

html由于vue+Element项目中的table,没有开放的上移下移的api,但是能对数据操作,故思路为数组中的一条数据,再重新添加一条数据,办法有点笨,但是好歹也是实现了,望有好的办法的,请留言<el-table:data="tableData"style="width:100%"&... 查看详情

db2数据库某一个表增加新列后,如何改变该列在表中的排序?表右方的“上移”和“下移”好像都用不了。

...候会漏了需要的字段,重建表太麻烦。为什么DB2表中有“上移”和“下移”,就是不给用?追答哈哈,感觉是强迫症哇。。。上移,下移不太清楚 查看详情

上移下移扩展版总结(代码片段)

需求上移下移 需求: 1)点击上移就将当前的按钮的父级上移一位 2)当点击第一个时候将当前按钮的父级移动到最后一位 3)当点击最后一个时候将当前按钮的父级移动到首位4)带过渡动画 需求分析:下移:剪切所点... 查看详情

vue做一个上移和下移,删除的li功能(代码片段)

效果图:思路就是冒泡原理,把数据放到一个空数组,对其进行排序,单选框用到的是iview。具体实现代码:<divv-for="iteminsingledLists":key="item.index">//数组singledLists<Checkbox@on-change="checkSingle":disabled="isDisabled"v-model="item.isRight 查看详情

思想上移,行动下移

...导致对于问卷的相关内容,不敢苟同,做以深思。借思想上移。行动下移,八字总结,以表不忘初心之念。首先。我想说的是:也许。我没有不论什么资格写这篇总结,由于我也是来工作的。更何况,还仅仅是个初入社会的... 查看详情

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 查看详情

wpflistbox选中项上移下移

原文:wpflistbox选中项上移下移 privatevoidMoveUp_Click(objectsender,RoutedEventArgse)????????????DataRowViewrowView=this.listScrip.SelectedItemasDataRowView;???????if(rowView==null)?????????????? 查看详情

TableView - 单元格的上移和下移功能

】TableView-单元格的上移和下移功能【英文标题】:TableView-MoveupandMovedownfunctionalityofacell【发布时间】:2015-05-0509:18:07【问题描述】:我有一个TableView的情况。我正在尝试实现一个允许向上或向下移动单元格的功能。向上或向下移... 查看详情

表格操作

...降序排序   4.移入移出隔行变色   5.全选   6.上移下移   7.删除   8.批量删除HTML<divclass="box"> <p> <span>请输入名字:<inputtype="text"/></span> <span 查看详情

在有序数据表中实现多记录上移下移置顶置底算法思路

...选中的若干个节点进行上下移动,如图1中的2个示例:图1上移操作示例图左侧示例是对第5、6两个连续的记录上移,右侧示例是对第4和6个有间隔的记录上移。上移后,要移动的记录间的间隔保持不变。现实中,选中记录的位置... 查看详情