java一键保存表格增删改,一个增删改功能的表格小demo
項目中遇到的一個小功能，原來的開發的寫法可能有點冗余了，擴展性不高，又出了點小bug，特此回來自己寫個類似的小demo，遇到的一些問題記錄一下。
大概這樣
一個操作保留在本地的一個小表格(簡化樣式了)
請求的數據是所有的 name 列的數據
name列是個select，option會隨著表格數據的增加而改變，也就是option不會和列表數據重復
三個主要方法，add，delete，change。因為最近想學習下lodash，深拷貝用的 _.cloneDeep()
設計
開始前一定思考下這個怎么實現會比較好，項目用的vue，拋棄原本的jquery，基于vue的數據驅動去做，響應式這塊vue幫我們做好了。
下面是html的寫法，一個v-for去實現頁面
add
{{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好像錯過了什么。
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的java一键保存表格增删改,一个增删改功能的表格小demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java员工请假系统_基于jsp的员工请
- 下一篇： adt eclipse java1.8,