由于工作的一個(gè)小需求，來(lái)寫(xiě)一寫(xiě)這個(gè)很小，但是新手朋友可能會(huì)有些迷惑的功能
記得剛工作的時(shí)候做過(guò)一個(gè)類(lèi)似的功能，但是的思路不太記得了，只記得很亂，測(cè)出各種bug。

今天來(lái)看一下這次的思路，比較適合新手朋友，沒(méi)有很多的jquery父子級(jí)關(guān)系

先看一下大概的界面

 
實(shí)現(xiàn)的就是點(diǎn)擊新增一行會(huì)新增一條空白行，點(diǎn)擊刪除將這行刪除，點(diǎn)擊保存將信息保存

校驗(yàn)方面做得比較簡(jiǎn)單，只是標(biāo)紅不讓提交
 
1。 先看一下 初始頁(yè)面的主要代碼


 

 

是不是很簡(jiǎn)單，初始化的頁(yè)面 只有一條單獨(dú)的空行和兩個(gè)按鈕外加兩個(gè)隱藏域

這個(gè)小功能，唯一的迷惑可能就是增加多條后從中間刪除，會(huì)造成數(shù)據(jù)的錯(cuò)亂。
在這里我是這么處理的，記錄了一個(gè)初始化的max最大值隱藏域，默認(rèn)給0。然后添加一行將這個(gè)值加一，刪除不便，這樣可以保證生成的動(dòng)態(tài)id唯一且比較好做默認(rèn)排序的效果。
由于這個(gè)需求是在最后新增一行，所以比較簡(jiǎn)單。 如果有同學(xué)要做在特定行下新增，除了id不重復(fù)還需要考慮一下排序的問(wèn)題。

下面就看一下 新增的js代碼
 
 


以上就是新增行和刪除特定行的js，是不是很簡(jiǎn)單。

2。新增保存操作

由于業(yè)務(wù)需求保存前做了一些校驗(yàn)不詳說(shuō)，只是傳遞數(shù)據(jù)
這里其實(shí)有很多辦法json，列表等等。我是比較懶。自己按自己的規(guī)則拼接了字符串來(lái)傳遞，到業(yè)務(wù)處理的地方再解析取出，僅供大家參考下

先看解析數(shù)據(jù)的代碼，將行的id傳遞進(jìn)方法
 

保存方法沒(méi)什么好說(shuō)，有一個(gè)不啟用的功能在這里處理一下，剩下就是傳遞數(shù)據(jù)去后臺(tái)處理再返回結(jié)果
 
 

剩下就是后臺(tái)入庫(kù)那些啦，很簡(jiǎn)單對(duì)不對(duì)，然后就是如果這個(gè)功能需要修改的時(shí)候 還存在一個(gè)回顯得功能，來(lái)看一下 


3。 修改回顯操作
      其實(shí)上面的保存方法已經(jīng)滿(mǎn)足了修改的要求，那么問(wèn)題只剩下一個(gè)就是回顯

 
 

這里有幾點(diǎn)  1。由于是共用的頁(yè)面，所以在初始化數(shù)據(jù)之前將span0的原有空行刪除
                    2。新循環(huán)生成的新行，id和原來(lái)的一樣，這樣在后臺(tái)取數(shù)據(jù)的時(shí)候注意下排序
                   3。由于id是原來(lái)保存的，而新打開(kāi)頁(yè)面中我們的標(biāo)記max還是0，所以在數(shù)據(jù)加載的同時(shí)要將max算出，并放回到隱藏域中。

這樣這個(gè)小功能就基本完成啦。


歡迎大家交流，共同學(xué)習(xí)，希望給新人一點(diǎn)啟示，高手別劈我  哈哈 。

文章為原創(chuàng) 發(fā)布在 http://techfoxbbs.com/thread-21638-1-1.html。 也歡迎大家 關(guān)注公眾號(hào) TechFoxBBS ，一起交流學(xué)習(xí) 
轉(zhuǎn)載 請(qǐng)標(biāo)明出處 

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)洪江免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了數(shù)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。