java一键保存表格增删改,一个增删改功能的表格小demo
项目中遇到的一个小功能,原来的开发的写法可能有点冗余了,扩展性不高,又出了点小bug,特此回来自己写个类似的小demo,遇到的一些问题记录一下。
大概这样
一个操作保留在本地的一个小表格(简化样式了)
请求的数据是所有的 name 列的数据
name列是个select,option会随着表格数据的增加而改变,也就是option不会和列表数据重复
三个主要方法,add,delete,change。因为最近想学习下lodash,深拷贝用的 _.cloneDeep()
设计
开始前一定思考下这个怎么实现会比较好,项目用的vue,抛弃原本的jquery,基于vue的数据驱动去做,响应式这块vue帮我们做好了。
下面是html的写法,一个v-for去实现页面
add
name |
delete |
---|---|
{{text.name}} |
delete |
表格的数据是 dataList,数据结构这样
dataList:[
{
id:'a',//做提交时需要,当前行数据的id
list:[//name 列select的option数据
{
name:'a',
id:'a'
},
{
name:'b',
id:'b'
},
{
name:'c',
id:'c'
},
{
name:'d',
id:'d'
},
]
}
]
这里是最简单的结构了
然后一般我们在初始化的时候向后台请求到初始的数据,就是dataList中的list,我这里设定的假数据这样
resource:[
{
name:'a',
id:'a'
},
{
name:'b',
id:'b'
},
{
name:'c',
id:'c'
},
{
name:'d',
id:'d'
},
]
初始化
init(){
let resource=_.cloneDeep(this.resource)
let obj={
list:resource,
id:resource[0].id
};
this.dataList=[];
this.dataList.push(obj);
}
这里出现了深拷贝,因为我们的数据结构是引用类型嵌套引用类型,这里如果不深拷贝,那下面我对dataList中的项进行更改时,this.resource也会被更改。这个demo里,this.resource是不可以被污染更改的。这也是坑之一了
add
add(){
let that=this;
//新建条数限制
if(that.dataList.length>=that.resource.length){
return false
}
//深拷贝数据
let allData=_.cloneDeep(that.resource);
// 新增时,判断已经创建的数据,然后先在对应的数据里删除
//这里对allData进行了操作,splice操作会直接更改原数组,并且allData是外层循环,如果先splice后,再循环内层,在运行 [i].id这个操作时会报错
//allData是复制出来的源数组,dataList是表格内的数组
for(let i=0;i
for(let j =0;j
if(that.dataList[i].id===allData[j].id){
allData.splice(j,1)
}
};
};
//推入一组数据
let obj={
list:allData,
id:allData[0].id
};
that.dataList.push(obj);
//把所有已选的数据单独放置到一个arr数组里
let arr=[];
for(let k=0,len=that.dataList.length;k
arr.push(that.dataList[k].id);
};
//在dataList的list项中删除所有的已选数据
for(let o =0; o
for(let u =0; u
for(let p=0; p
if(arr[u]==that.dataList[o].list[p].id){
that.dataList[o].list.splice(p,1);
}
};
};
};
//dataList的list项中将自身的id对应的数据推入
for(let r =0; r
for(let e =0; e
if(that.resource[r].id==that.dataList[e].id){
that.dataList[e].list.unshift(that.resource[r]);
}
};
};
},
这里除去深拷贝的坑,还有一个是 如果在嵌套循环中需要更改数组(例如splice方法),那么需要被更改的数组一定最后一个被嵌套循环。否则在一些判断条件里会出错.
delete
deleteTr(msg,index){
let that=this;
if(that.dataList.length<=1){
return false;
}
//先直接删除,去掉对应数据
that.dataList.splice(index,1);
//处理对应数据里下拉框里的数据
//复制一份源数据
let allData=_.cloneDeep(that.resource);
let obj={};
//遍历找出删掉的是数组里的哪个数据,然后吧他给obj
for(let i=0,len=allData.length; i
if(msg.id===allData[i].id){
obj=allData[i]
}
};
//循环dataList,将删除的数据推进dataList的list里面
for(let o =0; o
that.dataList[o].list.push(obj);
};
},
这里正常删除再添加
change
change(msg,index){
let that=this;
//更改dataList中的list
//把所有已选的数据单独放置到一个arr数组里
let arr=[];
for(let k=0,len=that.dataList.length;k
arr.push(that.dataList[k].id);
};
//在dataList的list项中删除所有的已选数据
for(let o =0; o
that.dataList[o].list=_.cloneDeep(that.resource);
for(let u =0; u
for(let p=0; p
if(arr[u]==that.dataList[o].list[p].id){
that.dataList[o].list.splice(p,1);
}
};
};
};
//dataList的list项中将自身的id对应的数据推入
for(let r =0; r
for(let e =0; e
if(that.resource[r].id==that.dataList[e].id){
that.dataList[e].list.unshift(that.resource[r]);
}
};
};
}
这里我把select的v-model设置成msg.id,这样每次切换时id会自动变化。
// let allData=_.cloneDeep(that.resource);
for(let i =0,len=that.dataList.length; i
that.dataList[i].list=_.cloneDeep(that.resource);
};
这一段最开始也错了,开始是注释的那行。
dataList里的每个list都需要独立的内存地址,所以这里需要循环深拷贝。
总结
刚刚写完代码,测了下功能没有问题就来记录了,代码还没有迭代优化,自己也没有想到更好的处理数据的方法,但是总觉得自己这个嵌套着的循环性能有些低下了。
会优化一下代码
刚回看一下就发现不少需要改的地方。不过需要休息了,下次编辑一下
日常鼓励自己。。。
这样的表格也的确不适合数据量大的情况,数据量大的情况需要换一下实现思路。
msl比赛1:1时开始写功能,写完看下朋友圈,md好像错过了什么。
java一键保存表格增删改,一个增删改功能的表格小demo相关推荐
- android 随机播放代码,Android | 一个随机播放网络音乐的小 Demo
前言 是这样,前几天接触到一个可以随机获取网络音乐及其热评的 API(关于该API:github.com/isecret/yun- ),于是乎就想着要做一个小 demo 来练练手吧! 目前的效果就是上 ...
- wpf+xml实现的一个随机生成早晚餐的小demo
话说每到吃完的时间就发愁,真的不知道该吃什么,然后就想到做一个生成吃什么的小软件,既然这个软件如此的简单,就打算用wpf开发吧,也不用数据库了,直接保存在xml中就可以了 程序整体结构如下图 首先我写 ...
- 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo
简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...
- androidstudio表格中填充 宽跟长一样_Excel表格的基本操作教程,覆盖表格制作的10大知识!...
Excel表格制作包含的知识比较多,通常制作一张表格需要这10大知识:新建表格.调整行高列宽.插入行列和单元格.删除行列和单元格.移动行列和单元格.表格文字编辑.单元格格式设置.表格边框与单元格边框设 ...
- html中两个表格的间距怎么设置,HTML两个表格间距怎么调整
回答:Word是我们平时经常用的办公软件,能够很好地帮助我们整理文字和图表,那么Word表格里的字间距怎么调呢?下面介绍一下Word表格里的字间距调整的方法,希望对你有所帮助. 开启分步阅读模式 工具 ...
- bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
- bootstrap 获取表格修改的结果_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
- 第1关:学习-Java集合类之List的ArrayList之增删改查
任务描述 相关知识 List 集合 ArrayList 集合 创建 ArrayList 集合 ArrayList 集合的增删改查 遍历 ArrayList 编程要求 测试说明 任务描述 本关任务:创建 ...
- BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
最新文章
- matlab 二值化_MATLAB实验,图像二值化处理
- 这五种 Python 字符串连接方式,你都知道吗?
- OpenSSL使用3(基本原理及生成过程)(转)
- flask sqlalchemy一对多关系详解
- 吞吐量(TPS)、QPS、并发数、响应时间(RT)
- python 美化ppt_使用python-pptx包批量修改ppt格式的实现
- 判断当前日期是否在[startDate, endDate]区间
- PHP中数据类型转换有多少种,PHP中数据类型转换的三种方式
- CDR X4无法使用怎么解决
- 2020年你还不会做绿幕特效?这4步基础技巧要点了解一下!
- Foxmail设置方法
- 笃行杂记之Zookeeper SessionTimeOut分析
- 如何在jsp中写一个弹窗
- 哪些因素影响苏州企业注册商标?
- 2018全美程序员薪资报告新鲜出炉!
- 洛谷P3987 我永远喜欢珂朵莉~(set 树状数组)
- 苹果手机服务器找不到,电脑找不到苹果手机热点
- IIS + PHP 配置
- 作为一个码农,发发牢骚
- codeforces(E. Carrots for Rabbits)贪心