【原創分享】動態新增行和刪除行

由於工作的一個小需求,來寫一寫這個很小,但是新手朋友可能會有些迷惑的功能
記得剛工作的時候做過一個類似的功能,但是的思路不太記得了,只記得很亂,測出各種bug。

今天來看一下這次的思路,比較適合新手朋友,沒有很多的jquery父子級關係

先看一下大概的界面

115058rldm9lucvah16wwd.jpg 
實現的就是點擊新增一行會新增一條空白行,點擊刪除將這行刪除,點擊保存將信息保存

校驗方面做得比較簡單,只是標紅不讓提交
115019ofbjf918t9l819g9.jpg 
1。 先看一下 初始頁面的主要代碼


114933dk3tzoffuv9ztgsg.jpg 

115301p4gbb8jdd459gud4.jpg 

是不是很簡單,初始化的頁面 只有一條單獨的空行和兩個按鈕外加兩個隱藏域

這個小功能,唯一的迷惑可能就是增加多條後從中間刪除,會造成數據的錯亂。
在這裏我是這麼處理的,記錄了一個初始化的max最大值隱藏域,默認給0。然後添加一行將這個值加一,刪除不便,這樣可以保證生成的動態id唯一且比較好做默認排序的效果。
由於這個需求是在最後新增一行,所以比較簡單。 如果有同學要做在特定行下新增,除了id不重複還需要考慮一下排序的問題。

下面就看一下 新增的js代碼
115916q7ps2hiqhx7qpzsh.jpg 
120029kr2di7izz7kpt7hk.jpg 


以上就是新增行和刪除特定行的js,是不是很簡單。

2。新增保存操作

由於業務需求保存前做了一些校驗不詳說,只是傳遞數據
這裏其實有很多辦法json,列表等等。我是比較懶。自己按自己的規則拼接了字符串來傳遞,到業務處理的地方再解析取出,僅供大家參考下

先看解析數據的代碼,將行的id傳遞進方法
120437z8b4xkvbxuze05xe.jpg 

保存方法沒什麼好說,有一個不啓用的功能在這裏處理一下,剩下就是傳遞數據去後臺處理再返回結果
120609lm2zsfrfmyy8fffl.jpg 
120643kb0wdkmgdvy7mvsn.jpg 

剩下就是後臺入庫那些啦,很簡單對不對,然後就是如果這個功能需要修改的時候 還存在一個回顯得功能,來看一下 


3。 修改回顯操作
      其實上面的保存方法已經滿足了修改的要求,那麼問題只剩下一個就是回顯

121245qe7l5wnionylhzt4.jpg 
121405a8zg4r4z2i28iodw.jpg 

這裏有幾點  1。由於是共用的頁面,所以在初始化數據之前將span0的原有空行刪除
                    2。新循環生成的新行,id和原來的一樣,這樣在後臺取數據的時候注意下排序
                   3。由於id是原來保存的,而新打開頁面中我們的標記max還是0,所以在數據加載的同時要將max算出,並放回到隱藏域中。

這樣這個小功能就基本完成啦。


歡迎大家交流,共同學習,希望給新人一點啓示,高手別劈我  哈哈 。

文章爲原創 發佈在 http://techfoxbbs.com/thread-21638-1-1.html。 也歡迎大家 關注公衆號 TechFoxBBS ,一起交流學習 
轉載 請標明出處 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章