一個增刪改功能的表格小demo

ideaa 發布于2019-08-22 17:23 / 1268人閱讀

摘要：項目中遇到的一個小功能，原來的開發的寫法可能有點冗余了，擴展性不高，又出了點小，特此回來自己寫個類似的小，遇到的一些問題記錄一下。這個里，是不可以被污染更改的。

項目中遇到的一個小功能，原來的開發的寫法可能有點冗余了，擴展性不高，又出了點小bug，特此回來自己寫個類似的小demo，遇到的一些問題記錄一下。
大概這樣

一個操作保留在本地的一個小表格（簡化樣式了）

請求的數據是所有的 name 列的數據

name列是個select，option會隨著表格數據的增加而改變，也就是option不會和列表數據重復

三個主要方法，add，delete，change。因為最近想學習下lodash，深拷貝用的 _.cloneDeep()

設計

開始前一定思考下這個怎么實現會比較好，項目用的vue，拋棄原本的jquery，基于vue的數據驅動去做，響應式這塊vue幫我們做好了。

下面是html的寫法，一個v-for去實現頁面

表格的數據是 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
這里除去深拷貝的坑，還有一個是  如果在嵌套循環中需要更改數組（例如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
這里正常刪除再添加
change
        change(msg,index){
            let that=this;
            //更改dataList中的list
            //把所有已選的數據多帶帶放置到一個arr數組里
            let arr=[];
            for(let k=0,len=that.dataList.length;k
這里我把select的v-model設置成msg.id，這樣每次切換時id會自動變化。
 //         let allData=_.cloneDeep(that.resource);
            for(let  i =0,len=that.dataList.length; i
這一段最開始也錯了，開始是注釋的那行。
dataList里的每個list都需要獨立的內存地址，所以這里需要循環深拷貝。
總結
剛剛寫完代碼，測了下功能沒有問題就來記錄了，代碼還沒有迭代優化，自己也沒有想到更好的處理數據的方法，但是總覺得自己這個嵌套著的循環性能有些低下了。
會優化一下代碼
剛回看一下就發現不少需要改的地方。不過需要休息了，下次編輯一下
日常鼓勵自己。。。
這樣的表格也的確不適合數據量大的情況，數據量大的情況需要換一下實現思路。
msl比賽1:1時開始寫功能，寫完看下朋友圈，md好像錯過了什么。

GPU云服務器云服務器 java增刪改查功能 php增刪改查小項目增刪改大數據增刪改

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95132.html

Jquery + dataTable + Bootstrap + 完整邏輯實現表格的增刪改查

摘要：最近在做畢設，同學在做前端頁面的時候使用到和這些控件，然后自己又在刷題的時候遇到一個這個的實現，于是就自己去官網文檔上學習了一下，嘗試實現這個官方文檔代碼代碼效果如下圖示頂部結構頁面上的三個，增刪改新增修改刪除這里的框的最近在做畢設，同學在做前端頁面的時候使用到JQuery、DataTable和Bootstrap這些控件，然后自己又在刷題的時候遇到一個這個demo的實現，于是就自己去...

oneasp 2019-08-22 18:28 評論0 收藏0
fsLayui介紹(layui插件)

摘要：是一個基于的快速開發插件，支持數據表格增刪改查操作，提供通用的組件，通過配置實現數據請求，減少前端重復開發的工作。 fsLayui 是一個基于layui的快速開發插件，支持數據表格增刪改查操作，提供通用的組件，通過配置html實現數據請求，減少前端js重復開發的工作。 GitHub下載碼云下載測試環境地址：http://fslayui.itcto.cn 為什么要使用fsLa...

Barry_Ng 2019-08-22 11:16 評論0 收藏0
表格的增刪改demo

摘要：前端菜鳥，下午沒什么活兒，寫了個不過腦子的，十分喜歡妖尾，就用妖尾做了模擬數據，大伙兒輕噴。前端菜鳥，下午沒什么活兒，寫了個不過腦子的demo，十分喜歡妖尾，就用妖尾做了模擬數據，大伙兒輕噴。設計感為0，頁面配色丑得我都不想看，在此膜拜我司UI工程師，很多實現功能的地方沒有想到更好的辦法，希望各位大佬斧正！效果圖 showImg(https://segmentfault.com/i...

lastSeries 2019-08-23 12:57 評論0 收藏0
fsLayui聯動表格使用(二)

摘要：復雜聯動表格使用點擊主表格，加載副表格數據，支持主副表格的增刪改查操作。演示地址復雜聯動表格配置和基礎聯通表格類似，在基礎上擴展一些增刪改查功能，基礎聯動表格參考復雜的聯動表格需要在基礎表格上增加配置和按鈕操作。復雜聯動表格使用點擊主表格，加載副表格數據，支持主、副表格的增刪改查操作。演示地址：http://fslayui.itcto.cn 復雜聯動表格配置和基礎聯通...

miguel.jiang 2019-08-01 18:15 評論0 收藏0
fsLayui聯動表格使用(二)

摘要：復雜聯動表格使用點擊主表格，加載副表格數據，支持主副表格的增刪改查操作。演示地址復雜聯動表格配置和基礎聯通表格類似，在基礎上擴展一些增刪改查功能，基礎聯動表格參考復雜的聯動表格需要在基礎表格上增加配置和按鈕操作。復雜聯動表格使用點擊主表格，加載副表格數據，支持主、副表格的增刪改查操作。演示地址：http://fslayui.itcto.cn 復雜聯動表格配置和基礎聯通...

kel 2019-08-22 11:23 評論0 收藏0