精华内容
下载资源
问答
  • 由于当前表格较为复杂,其中包含较多合并单元格,所以拖拽不大好处理,于是使用简单的上移下移按钮来替代。表格采用的是element-ui的el-table实现的。用于展示的数据是一个数组,经过合并单元格的方法处理,展现效果...

    由于当前表格较为复杂,其中包含较多合并单元格,所以拖拽不大好处理,于是使用简单的上移下移按钮来替代。表格采用的是element-ui的el-table实现的。用于展示的数据是一个数组,经过合并单元格的方法处理,展现效果为上图所示。而上移、下移是基于整体项目的上移下移。vue中无需操作dom节点仅修改数据就可以达到页面的处理效果,所以上移、下移只需要修改这个用于展示的数组的数据即可。

    大概思路:

    如果,直接基于数组中的数据进行处理,逻辑上会较为复杂,所以可以考虑将相同项目的数据作为一个整体,调整顺序后,重新转换为分散的数据。

    具体代码:

    /** * 根据项目id转换二维数组 * @param sourceArray 源数组 项目明细数组 * @param targetItemId 目标项目id */ convertItemArray(sourceArray, targetItemId) { // 目标数组 const targetArray = [] // 项目顺序数组 用于保存项目顺序 const itemOrder = [] // 项目map 用于数据分类 const itemMap = {} // 传入源数组有值 if (sourceArray && sourceArray.constructor === Array && sourceArray.length) { // 遍历原数组 sourceArray.forEach(item => { const itemId = item.itemId // 项目顺序数组中不存在该项目时 添加到数组中 if (itemOrder.indexOf(itemId) === -1) { itemOrder.push(itemId) } // 项目id匹配目标项目id if (targetItemId === itemId) { // 获取目标项目id对应的下标值 this.curItemIndex = itemOrder.length - 1 } // 临时项目数组 let tempItemArray = [] // 如果项目中存在数组 则为其赋值 if (itemMap[itemId]) { tempItemArray = itemMap[itemId] } // 将项目添加到数组中 tempItemArray.push(item) // 将数组添加到map中 itemMap[itemId] = tempItemArray }) } // 项目顺序数组有值 if (itemOrder && itemOrder.length) { // 遍历项目顺序 itemOrder.forEach(itemId => { // 根据项目id取出项目数组 const tempItemArray = itemMap[itemId] // 添加到目标数组中 targetArray.push(tempItemArray) }) } // 返回目标数组 return targetArray }, /** * 将二维数组转换为一维数组(项目数组转换为项目明细数组) */ convertItemDetailArray(sourceArray) { // 目标数组 const targetArray = [] // 判断不为空 if (sourceArray && sourceArray.constructor === Array && sourceArray.length) { for (let i = 0; i < sourceArray.length; i++) { const itemArray = sourceArray[i] // 判断当前元素是数组 if (itemArray && itemArray.constructor === Array) { // 当前是最后一项时 if (i === sourceArray.length - 1) { // 计算最后一项下标值 this.lastProjectIndex = targetArray.length } for (let j = 0; j < itemArray.length; j++) { const item = itemArray[j] // 重置排序号 item.itemOrder = i // 添加元素到目标数组中 targetArray.push(item) } } } } // 返回目标数组 return targetArray }, /** * 数组元素交换位置 * @param {array} arr 数组 * @param {number} index1 添加项目的位置 * @param {number} index2 删除项目的位置 * index1和index2分别是两个数组的索引值,即是两个要交换元素位置的索引值,如1,5就是数组中下标为1和5的两个元素交换位置 */ swapArray(arr, index1, index2) { arr[index1] = arr.splice(index2, 1, arr[index1])[0] return arr }, /*** 下移项目* @param {Object} index */ downProject(index) { // 获取项目id const itemId = this.itemDetailList[index].itemId // 先根据项目id转换二维数组 并给项目数组下标赋值 const itemArray = this.convertItemArray(this.itemDetailList, itemId) // 下标值大于等于0 if (this.curItemIndex >= 0) { // 下移 交换位置 this.swapArray(itemArray, this.curItemIndex, this.curItemIndex + 1) } // 转换回一维数组 this.itemDetailList = this.convertItemDetailArray(itemArray) // 项目合并单元格 this.merage() // 评价方法合并单元格 this.mergeIndexArr = this.getMergeArr(this.itemDetailList, 'checkMethod') }, /** * 上移项目 * @param {Object} index */ upProject(index) { // 获取项目id const itemId = this.itemDetailList[index].itemId // 先根据项目id转换二维数组 并给项目数组下标赋值 const itemArray = this.convertItemArray(this.itemDetailList, itemId) // 下标值-1 大于等于0 if (this.curItemIndex - 1 >= 0) { // 上移 交换位置 this.swapArray(itemArray, this.curItemIndex - 1, this.curItemIndex) } // 转换回一维数组 并且重置itemOrder 项目排序号 this.itemDetailList = this.convertItemDetailArray(itemArray) // 项目合并单元格 this.merage() // 评价方法合并单元格 this.mergeIndexArr = this.getMergeArr(this.itemDetailList, 'checkMethod') },

    展开全文
  • Box-center">Box-list">v-on:mouSEOver="moveBtn(item)" v-on:mouSEOut="leaveBtn...{{item.label}}上移下移删除t;/div>----Store.js----import Store from './store'export default {data: function() {...

    Box-center">

    Box-list">

    v-on:mouSEOver="moveBtn(item)" v-on:mouSEOut="leaveBtn(item)">

    {{item.label}}

    上移

    下移

    删除

    t;/div>

    ----Store.js----

    import Store from './store'

    export default {

    data: function() {

    return {

    title: 'A simple todo-list',items: Store.fetch(),newItem: '',msg:'点击按钮',isShow: false,isBlock: true,isBgyellow: false,leftPx:0,topPx:0

    }

    },watch: {

    items: {

    handler: function(items) {

    Store.save(items)

    },deep: true

    }

    },methods: {

    toggleFinished: function(item) {

    item.isfinished = !item.isfinished

    },show:function ($event) {

    $event.cancelBubble=true;

    this.isBlock = false;

    this.topPx = ($event.clientY);

    this.leftPx = ($event.clientX);

    },stop:function(event){

    this.isBlock = true;

    },moveBtn:function(item) {

    // console.log(item.label)

    item.isShow = true;

    },leaveBtn:function(item) {

    item.isShow = false;

    },addNew: function() {

    //非空才可以添加

    if(this.newItem!=''){

    this.items.push({

    label: this.newItem,isfinished: false

    })

    }

    this.newItem = '';

    },moveUp:function(index,item) {

    //在上一项插入该项

    this.items.splice(index-1,(this.items[index]));

    //删除后一项

    this.items.splice(index+1,1);

    item.isShow = false;

    if(index == 0) {

    alert("到顶啦!");

    }

    },moveDown:function(index,item) {

    //在下一项插入该项

    this.items.splice(index+2,(this.items[index]));

    // 删除前一项

    this.items.splice(index,1);

    item.isShow = false;

    if(index == this.items.length-1) {

    alert("已经是最后一项啦!");

    }

    },deleteBtn:function(index) {

    this.items.splice(index,1);

    }

    },}

    套路就是在html中插入方法或者class,methods中对数据进行操作~

    总结:

    这是本小白入门vue.js学习的第一个demo,有一些jQuery的观念不能很好的转变,总是习惯性的操作dom节点,殊不知vue可以有更好的方式去实现

    以上所述是小编给大家介绍的Vue.js实现一个todo-list的上移下移删除功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

    相关文章

    总结

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

    如您喜欢交流学习经验,点击链接加入交流1群:1065694478(已满)交流2群:163560250

    展开全文
  • 最近项目中遇到了上移下移操作的一个操作,以前也看到过,但一直没有去研究过,这次项目中遇到了,也就去研究了一把,其实实现原理也挺简单的,说白了就是要记录数据库里的要进行排序表的总记录数量,然后根据循环的...

    最近项目中遇到了上移下移操作的一个操作,以前也看到过,但一直没有去研究过,这次项目中遇到了,也就去研究了一把,其实实现原理也挺简单的,说白了就是

    要记录数据库里的要进行排序表的总记录数量,然后根据循环的次数,多写几个隐藏变量,进行上移下移操作的时候进行判断就可以了。

    现在一起来看看具体的代码实现吧,希望会对那些没有做过这些操作的朋友有所帮助。

    此版本为java版,上午已经写过了asp版本了,希望会对朋友们有所帮助。

    具体实现:

    DbConnection conn = new DbConnection();

    String sql = "";

    int totalNum = 0;

    ResultSet rs = null;

    String moveflag = "";

    %>

    moveflag = request.getParameter("moveflag");

    if(null!=moveflag && !"".equals(moveflag)){

    String movetype="";

    int premenuid=0;

    int premenuordernum=0,nextmenuid=0,nextmenuordernum=0,nowmenuid=0,nowmenuordernum=0;

    movetype = request.getParameter("movetype");

    nowmenuid = Integer.parseInt(request.getParameter("nowmenuid"));

    nowmenuordernum = Integer.parseInt(request.getParameter("nowmenuordernum"));

    if(movetype.equals("up")){

    premenuid = Integer.parseInt(request.getParameter("premenuid"));

    premenuordernum = Integer.parseInt(request.getParameter("premenuordernum"));

    sql = "update c_menu set ordernum="+ premenuordernum +" where menuid="+ nowmenuid;

    conn.executeUpdate(sql);

    sql = "update c_menu set ordernum="+ nowmenuordernum +" where menuid="+ premenuid;

    conn.executeUpdate(sql);

    }

    if(movetype.equals("down")){

    nextmenuid = Integer.parseInt(request.getParameter("nextmenuid"));

    nextmenuordernum = Integer.parseInt(request.getParamet

    展开全文
  • html table 上移下移

    2021-06-11 09:05:02
    147 }148 149 150 151 152 随机选择行 153 154 添加一行 155 156 删除选定行 157 158 上移选定行 159 160 下移选定行 161 162 按第一列排序 163 164 按数据和排序 165 166 167 168 169 170 171 172 173 174 175 176

    1

    2

    3

    4

    js操作表格操方法,增加,修改,删除,一行记录

    5

    6 varmytable= null;7 window.οnlοad= function() {8 mytable= newCTable("tbl",10);//随机创建10行表格

    9 }10 Array.prototype.each= function(f) {//数组的遍历

    11 for(vari= 0; i< this.length; i++) f(this[i], i,this)12 }13 function$A(arrayLike) {//数值的填充

    14 for(vari= 0, ret=[]; i

    18 var__method= this, args=$A(arguments), object=args.shift();19 return function() {20 return__method.apply(object, args.concat($A(arguments)));21 }22 }23 functionCTable(id, rows) {24 this.tbl= typeof(id)== "string" ?document.getElementById(id) : id;25 if(rows&& /^d+$/.test(rows))this.addrows(rows)//为表格添加行数

    26 }27 CTable.prototype={28 addrows:function(n) {//随机添加n行

    29 newArray(n).each(this.add.bind(this))30 },31 add:function() {//添加1行

    32 varself= this;33 vartr=self.tbl.insertRow(-1), td1=tr.insertCell(-1), td2=tr.insertCell(-1), td3=tr.insertCell(-1);34 varchkbox=document.createElement("INPUT")35 chkbox.type= "checkbox"

    36 chkbox.οnclick=self.highlight.bind(self)37 td1.appendChild(chkbox)//第一列添加复选框

    38 td1.setAttribute("width","35")39 td2.innerHTML=Math.ceil(Math.random()* 99)//第二列的随机填充值

    40 td3.innerHTML=Math.ceil(Math.random()* 99)//第三列的随机填充值

    41 },42 del:function() {//删除所选行

    43 varself= this

    44 $A(self.tbl.rows).each(function(tr) {if(self.getChkBox(tr).checked) tr.parentNode.removeChild(tr) })45 },46 up:function() {//上移所选行

    47 varself= this

    48 varupOne= function(tr) {//上移1行

    49 if(tr.rowIndex> 0) {50 self.swapTr(tr, self.tbl.rows[tr.rowIndex- 1])51 self.getChkBox(tr).checked= true

    52 }53 }54 vararr=$A(self.tbl.rows).reverse()//反选

    55 if(arr.length> 0 &&self.getChkBox(arr[arr.length- 1]).checked) {56 for(vari=arr.length- 1; i>= 0; i--) {57 if(self.getChkBox(arr[i]).checked) {58 arr.pop()59 }else{60 break

    61 }62 }63 }64 arr.reverse().each(function(tr) {if(self.getChkBox(tr).checked) upOne(tr) });65 },66 down:function() {//下移所选行

    67 varself= this

    68 vardownOne= function(tr) {69 if(tr.rowIndex 0 &&self.getChkBox(arr[arr.length- 1]).checked) {76 for(vari=arr.length- 1; i>= 0; i--) {77 if(self.getChkBox(arr[i]).checked) {78 arr.pop()79 }else{80 break

    81 }82 }83 }84 arr.reverse().each(function(tr) {if(self.getChkBox(tr).checked) downOne(tr) });85 },86 sort:function() {//排序

    87 varself= this, order=arguments[0];88 varsortBy= function(a, b) {89 if(typeof(order)== "number") {//数字,则按数字指示的列排序

    90 returnNumber(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)? 1:-1;//转化为数字类型比较大小

    91 }else if(typeof(order)== "function") {//返回结果排序

    92 returnorder(a, b);93 }else{94 return 1;95 }96 }97 $A(self.tbl.rows).sort(sortBy).each(function(x) {98 varcheckStatus=self.getChkBox(x).checked;99 self.tbl.firstChild.appendChild(x);100 if(checkStatus) self.getChkBox(x).checked=checkStatus;101 });102 },103 rnd:function() {//随即选择几行数据

    104 varself= this, selmax= 0, tbl=self.tbl;105 if(tbl.rows.length) {106 selmax=Math.max(Math.ceil(tbl.rows.length/ 4),1);//选择的行数不超过tr数的1/4

    107 $A(tbl.rows).each(function(x) {108 self.getChkBox(x).checked= false;109 self.restoreBgColor(x)110 })111 }else{112 returnalert("无数据可以选")113 }114 newArray(selmax).each(function() {115 vartr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)]116 self.getChkBox(tr).checked= true;117 self.highlight({ target: self.getChkBox(tr) })118 })119 },120 highlight:function() {//设置行的背景色

    121 varself= this;122 varevt=arguments[0]||window.event123 varchkbox=evt.srcElement||evt.target124 vartr=chkbox.parentNode.parentNode125 chkbox.checked?self.setBgColor(tr) : self.restoreBgColor(tr)126 },127 swapTr:function(tr1, tr2) {//交换tr1和tr2的位置

    128 vartarget=(tr1.rowIndex

    134 returntr.cells[0].firstChild135 },136 restoreBgColor:function(tr) {137 tr.style.backgroundColor= "#ffffff"

    138 },139 setBgColor:function(tr) {//设置背景色

    140 tr.style.backgroundColor= "#c0c0c0"

    141 }142 }143

    144 functionf(a, b) {145 varsumRow= function(row) {returnNumber(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML) };146 returnsumRow(a)>sumRow(b)? 1:-1;147 }148

    149

    150

    151

    152 随机选择行

    153

    154 添加一行

    155

    156 删除选定行

    157

    158 上移选定行

    159

    160 下移选定行

    161

    162 按第一列排序

    163

    164 按数据和排序

    165

    166

    167

    168

    169

    170

    171

    172

    173

    174

    175

    176

    展开全文
  • 建议在组件中 $emit 事件,然后在父组件中绑定事件题目(删除)(上移)(下移)Vue.component('article-list',{template:'\\{{item.title}}\删除\上移\下移\',props: ['item','index'],methods: {deleteList: function() ...
  • 最近项目中遇到了上移下移操作的一个操作,以前也看到过,但一直没有去研究过,这次项目中遇到了,也就去研究了一把,其实实现原理也挺简单的,说白了就是要记录数据库里的要进行排序表的总记录数量,然后根据循环的...
  • 当前位置:我的异常网» Java Web开发»急怎么实现内容的上移下移的排序功能急怎么实现内容的上移下移的排序功能www.myexceptions.net网友分享于:2013-01-04浏览:270次急!!如何实现内容的上移下移的排序功能这是...
  • 表格样式js代码// 上移function moveUp(obj) {var current = $(obj).parent().parent(); //获取当前var prev = current.prev(); //获取当前前一个元素if (current.index() > 0) {current.insertBefore(prev); //...
  • java实现列表上移下移的总结 思路: 1.在数据库中对要进行排序那张表新增一个sort字段用于排序。 2.每当新增一条记录时,sort的值都会在上一条的记录进行+1。即每次新增记录时,先查出已存在的sort值最大的那条...
  • 在表格中常常需要调整表格中数据的显示顺序,我用的是jqgrid,实现原理就是将表中的行数保存到数据库中,取数据时按行进行排序下面话不多说了,来一起看看详细的介绍吧jqgrid上移下移单元格1、移,下移按钮上移下移...
  • vue点击上移下移 动画

    2021-09-13 15:51:38
    如果是for循环内容需要用到 transition-group标签 vue的页面 {{item.menu_name}} 0"> 上移 下移 data里面 selectList: [ { menu_name: '文明' }, { menu_name: '和谐' } ] methods里面写方法 remove (item, ...
  • 列表上移下移

    2021-07-30 14:57:39
    // 上移下移 moveUp(index, row) { var that = this if (index > 0) { const upDate = that.tableData[index - 1] that.tableData.splice(index - 1, 1) that.tableData.splice(index, 0, upDate) } else ...
  • 编辑及可上移下移表格规则$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$...
  • 实现新闻的上移下移功能*{font-size:12px;}td{height:24px; line-height:24px; text-align:center}
  • 实现效果: 即需要实现当前元素与相邻元素交换位置, 当上移时,则是当前元素与一元素调换位置;当下时,则是当前元素与下一元素调换位置。 实现代码: var swapItems = function(arr, index1, index2){  arr...
  • 2018-05-17 回答_concat功能来行转列 create table idtable (id number,name varchar2(30)); insert into idtable values(10,'ab'); insert into idtable values(10,'bc'); insert into idtable values(10,'cd');...
  • //上移函数 upGo = (dataSource, index) => { if (index != 0) { dataSource[index] = dataSource.splice(index - 1, 1, dataSource[index])[0]; } else { dataSource.push(dataSource.shift()); } }; //下移函数...
  • 本文实例讲述了JS实现点击上移下移LI行数据的方法。分享给大家供大家参考。具体如下:这里演示JavaScript排序功能,点击按钮实现数据的移和下称,一共有两组测试效果,组采用箭头图标控制的方式,更美观,下组是...
  • 想实现的效果是,比如点击第二条评论的上移后,第二条评论就会运动到第一条评论的位置,同时第一条评论也会运动到第二条评论的位置。这个demo之前是用jquery写的,最近学完vue的动画,想用vue来实现一下。但发现vue...
  • 想要实现的效果和功能如下:首先用 CSS 禁用第一项的上移按钮、最后一项的下移按钮。.item:first-of-type .up { color:#ccc; cursor:not-allowed; }.item:last-of-type .down { color:#ccc; cursor:not-allowed; }...
  • /**$UpDown //移动方向,up或down$table //表名$id //当前移动的ID$id_col //ID字段的名称$oc_col //排序字段的名称$where //条件*/function MoveUpDown($UpDown,$table,$id,$id_col='id',$oc_col='OrderColumn',$...
  • JS移动li行数据,点击上移下移* {padding:0;margin:0;}.content {width:500px;margin:20px auto;}#pCon {width:500px;list-style:none;}#pCon li {height:20px;display:block;border-bottom:1px #ccc solid;}#pCon ...
  • // // 上移 moveUpItem(record){ // record 是移动的对象 const findParent = ((list ,callback) => { for (let index = 0; index < list.length; index++) { console.log(record.id,list[index].id); ...
  • -- //上移下移 (scope.$index)点击事件拿到当前下标--> <template slot-scope="scope"> (scope.$index)"> .png" alt /> </div> (scope.$index)"> 下.png" alt /> </div> </template> </el-table-column> 操作"> ...
  • 2.每当新增一条记录时,sort的值都会在上一条的记录进行+1。即每次新增记录时,先查出已存在的sort值最大的那条记录,然后新增记录的sort值为该记录的sort的值+1。3.列表向上移动的时候查询出当前数据的一条数据...
  • 效果图 实例代码 Title 新增 删除 上移 下移 联系人 商务电话 移动电话 QQ SKYPE 电子邮件 总结 以上就是这篇文章的全部内容,大家可以自己实践后看下效果,这样更利于大家的理解和学习,希望本文对大家学习或使用...
  • vxe-table 表格拖动上移下移

    千次阅读 2021-01-23 15:29:42
    看官方也可以,例子都差不多。主要注意的是 row-key ref="xTable1":data="tableData" npm isortablejs vue导包: import Sortable from 'sortablejs'; ...vxe-table border row-key ref="xTable1" class="sortable-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,537
精华内容 17,014
关键字:

上移下移