handsontable下拉数字递增效果vue

实现的效果如下图所示：拖动表格下拉后，数字逐个递增（默认是复制填充）

1.html部分代码

2.表格的配置信息

data(){return {hotSettings: {rowHeaders: true, //左边数字colHeaders: ["<span class='must'>*</span>箱 号","<span class='must'>*</span>实重 kg","长 cm","宽 cm","高 cm","材积重 kg","立方 m³","<span style='font-weight:bold'>计费重 kg</span>","操 作"], //表头信息licenseKey: "non-commercial-and-evaluation", //注册码colWidths: 76, //宽height: "auto", //高copyable: true, // 允许键盘复制columns: [], //固定表格列对应的字段// contextMenu: {//右击菜单// items: {//   row_above: {//     name: "向上插入一行",//   },//   row_below: {//     name: "向下插入一行",//   },//   remove_row: {//     name: "删除行",//   },// },// },minSpareRows:6,//默认加6个空行data: [],afterChange: this.afterChange,beforeAutofillInsidePopulate:this.beforeAutofillInsidePopulate,afterSelectionByProp :this.afterSelectionByProp ,afterSelectionEndByProp:this.afterSelectionEndByProp},direction_s:'',//记录拖动方向num_p:'',  //获取的初始状态，只得到一次second: 0,  //循环递增的数num_st : 0,num_end : 0,  //记录数字的位置getNum : 0,  //截取的数字字符num_new:'',num_zhi : 0,  //统计循环次数num_f:'',  //选中单元格的个数 }
}

3.js中需要用到三个钩子函数beforeAutofillInsidePopulate，afterSelectionByProp，afterSelectionEndByProp，afterChange

1.beforeAutofillInsidePopulate获取操作方向记录下来

beforeAutofillInsidePopulate(index,direction,data,baseRange){//此钩子函数为了获取拖动放下记录下来this.direction_s = direction;//获取操作方向},

2.afterSelectionByProp数字递增逻辑写在这个里面（注：deepClone为深拷贝，可自行安装插件或者用其他的深拷贝方法）

afterSelectionByProp(r,p,r2,p2){//r1 r2为选中的起始和结束的纵坐标，p为起始和结束的属性let hot=this.$refs.hotTableComponentif(p!=p2||p!='boxNo'){//横向拖动表格不做任何效果，且只有箱号需要递增效果return}if(r==r2){//如果只点击一个格子，不做任何操作this.num_p=''return}else{this.num_p =deepClone(hot.hotInstance.getSourceData())//获取表格当前的数据}var m = this.hotSettings.data[r].boxNo;  //当前单元格中的箱号值for(let j=r;j<r2;j++){//循环已选中的表格m=hot.hotInstance.getSourceData()[j].boxNo?hot.hotInstance.getSourceData()[j].boxNo:mlet get_end=''if(r2 != r){  //方法只执行一次this.num_f = r2 - r;}if(this.second == 0){for(var i = m.length-1; i >= 0; i--) {if(!isNaN(m.charAt(i))){//判断当前是否是数字this.num_st = i;if(this.num_end == 0){this.num_end = i;}}else{if(this.num_st == 0){continue;}else{break;}}}if(this.num_st == this.num_end){this.getNum = m.substring(this.num_st);  //数字段get_end = "";}else{this.getNum = m.substring(this.num_st,this.num_end+1);  //数字段if((this.num_end+1)==m.length){get_end = m.substring(m.length);}else{get_end = m.substring(this.num_end+1,m.length);}}}if(r2 != r){  //选中多个的时候执行let list_new=''let endNum = String(this.getNum).charAt(this.getNum.length-1)let startStr = String(this.getNum).substring(0,this.getNum.length-1)if(endNum!=9){this.getNum =startStr+ (endNum*1 + 1);}else{console.log(this.getNum*1)let numLength=String(this.getNum*1).lengthlet zeroLength=this.getNum.length-numLength// console.log(zeroLength+'零长度')// console.log(numLength+'数字长度')// console.log(this.getNum.length+'所有数字长度')// console.log(this.getNum.substring(0,zeroLength))let differenceLength=String(this.getNum*1 + 1).length-numLengththis.getNum =this.getNum.substring(0,zeroLength-differenceLength  )+(this.getNum*1 + 1);}// console.log(this.getNum)switch(this.direction_s){case "down":list_new = m.substring(0,this.num_st)+this.getNum+get_end;this.$set(this.num_p[j*1+1],'boxNo',list_new)break;// case "up"://   list_new = m.substring(0,this.num_st)+this.getNum+get_end;//   this.num_p[j*1-1].boxNo = list_new;//     break;default:console.log("添加错误")}}this.second ++;}},

3.afterSelectionEndByProp中重置初始化的变量

afterSelectionEndByProp(){//重置初始化的变量this.second = 0;this.num_st = 0;this.num_end = 0;this.getNum = 0;},

4.afterChange中将改变后的值重新渲染表格

afterChange(changeData, source) {if(source=='Autofill.fill'&&this.num_p!=''){let hot=this.$refs.hotTableComponentthis.hotSettings.data=deepClone(this.num_p)hot.hotInstance.loadData(this.num_p)}},

handsontable下拉数字递增效果vue相关推荐

新版excel下拉数字递增
第一种方法: 前两个单元格输入数字(可以连续,也可跳数),然后选中两个单元格往下拉,就出现你需要的递增数据.如图: 第二种方法: 1.打开excel,在任意单元格输入1. 2.点击单元格右下+号,按住 ...
speedoffice（Excel）表格下拉数字怎样实现递增
表格数据怎么实现递增呢?下面小编就用极速办公speedoffice产品演示下. 首先,打开speedoffice软件,新建一个Excel表格,如下图在空白单元格中输入一个数字,并在下面邻近的单元格输 ...
excel表格往下拉数字不变该怎么解决？
excel是办公软件中唯一一个表格专业户文件,它的功能最常用的就是统计数据,通过它的函数功能.求和功能等进行统计数据会变得非常简单粗暴.那么它还有一个功能在统计数据的时候也会用到,就是递增.excel ...
仿基金查询输入框下拉筛选值效果(JavaScript)
http://www.weste.net/2007/11-24/19463143437.html 仿基金查询输入框下拉筛选值效果(JavaScript)
jQuery模拟原生态App上拉刷新下拉加载效果代码
以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. 原文:http://www.sucaij ...
php下拉框选中效果,jquery模拟select下拉框效果
最近开发一网站的过程中碰到个需求,没有使用传统的select下拉框,而是使用了现代比较美观的一些元素设计了一个下拉框.对于这种东东,第一反应就是使用jquery来模拟了,还好,网上找了下,很快就找到了 ...
不使用输入框如何实现下拉_使用INFINITE AJAX SCROLL实现下拉加载效果
现在很多网页都有个体验不错的效果:浏览到页面底部的时候,自动加载下一页内容,也就是下拉加载效果,这种效果可以让用户不用点击"下一页"按钮,也可以实现翻页,无论在PC还是手机上,体验 ...
【SwiftUI模块】0012、SwiftUI-搭建一个类似微博、网易云、抖音个人页面的头部下拉放大图片效果
SwiftUI模块系列 - 已更新11篇 SwiftUI项目 - 已更新1个项目往期Demo源码下载技术:SwiftUI.SwiftUI3.0.下拉放大.tableview粘性头部.头部下拉放大图 ...
Android模仿QQ的左右滑动切换界面和下拉更新的效果
转自http://www.linuxidc.com/Linux/2012-08/67207.htm 主布局main.xml <?xml version="1.0" encod ...

handsontable下拉数字递增效果vue

handsontable下拉数字递增效果vue相关推荐

最新文章

热门文章