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好像错过了什么。