JS動態新增刪除「能夠動態新增刪除」的input=text

jquery javascript laravel php web

tsunejui 2018-10-24 11:41:47 ‧ 7005 瀏覽

分享至

客戶需要一個帳單頁面。

帳單示意圖：

後台示意圖

從上帳單示意圖可以看到，他有多個群組，每個群組裡面有多個項目。
後台可以產生這個帳單，能夠動態新增刪除群組，畫面就像後台示意圖那樣，而每個群組裡面，則可以態新增刪除label。

資料庫目前有三張table
帳單表、帳單群組表、帳單群組標籤表

目前的作法是：
產生group時，也產生一組編號。

//1 為 生產編號
<div class="form-control" id="group_form_1">
    <input type="hidden" name="group[]" value="1">
    <table data-id="1">
        /*...*/
        //操作
        <a class="add_label" data-id="1">新增label</a>
        <a class="remove_label" data-id="1">刪除label</a>
        /*...*/
        //新增的label (假設新增兩個)
        <input name="label_group_title_1[]" value="">
        <input name="label_group_content_1[]" value="">
        <input name="label_group_title_1[]" value="">
        <input name="label_group_content_1[]" value="">
        /*...*/
    </table>
</div>

後端再透過傳來的group，去解label_group_title跟label_group_content。但感覺這方法不是好方法，因為name會變成有編號，還是各位覺的這樣沒差(感覺有點不協調)。

請問這種兩層的動態新增刪除，前端應該怎麼實現呢? 或是平常這種情況，會怎麼做？
謝謝

看更多先前的討論...收起先前的討論...

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2018-10-24 12:02:35 檢舉

抱歉，完全聽不懂你的需求是什麼。

tsunejui iT邦新手 5 級 ‧ 2018-10-24 13:06:22 檢舉

好的我再描述詳細一點

rising iT邦新手 5 級 ‧ 2018-10-24 15:01:11 檢舉

--刪除--

tsunejui iT邦新手 5 級 ‧ 2018-10-24 15:12:34 檢舉

謝謝您的回答，非常不好意思，那不是我想問的，我再描述詳細一點。

rising iT邦新手 5 級 ‧ 2018-10-24 15:52:18 檢舉

你覺得你原本的方法不好的原因在於每次新增 group 都要先跟後端溝通，拿到 id 後才顯示新的 group ，這方式會持續汙染資料庫，這樣嗎？
假如是這點的話，你可以在前端新增一個[儲存]按鈕，等修改內容穩定後按下這按紐來彙整整體的新增修改內容，再一次傳給後端去修改資料庫。

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-10-24 16:10:01 檢舉

要問的是新增還是修改？

tsunejui iT邦新手 5 級 ‧ 2018-10-24 16:11:09 檢舉

不不， id是前端產生的，我認為不好的原因是，name是用編號來命名的，感覺有這麼一點不協調，不曉得其他人在遇到這種事，通常怎麼處理（EX:分成兩階段?）

rising iT邦新手 5 級 ‧ 2018-10-24 16:19:27 檢舉

這種巢狀資料我不會傾向用 form post 去傳遞資料，會換用 JSON 格式傳遞給後端，這樣就不用按照 group id 去解出其他資料
例:
{ "groups": [ {"id": 1, "labels": [ { "name": "Mineral Water" } ] }, {"id": 2, "labels": [ { "name": "Chewing Gum"} ] } ] }

* 稍微誤解你的資料架構，上面例子有做了修正

tsunejui iT邦新手 5 級 ‧ 2018-10-25 00:26:07 檢舉

好的，謝謝您的建議

froce iT邦大師 1 級 ‧ 2018-10-25 08:17:43 檢舉

有點疑問，id是前端產生的，那如何確保id在資料庫上不重複？

我在之前剛學的時候的確會像你這樣用name編號去傳，現在的話我會用JSON，像rising大這樣。

tsunejui iT邦新手 5 級 ‧ 2018-10-25 09:41:42 檢舉

您好，因為跟資料庫的id沒有關係，那個id不會拿來當資料庫的id，如果是用json的方式，就不需要那個id了，那只是我後端要來解group用。

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2018-10-25 17:58:29 檢舉

我只給紫重點就好了

1.我不會用id來做定向命名的處理，我會連data-id也不會用。

2.可以給與一個hide的input來定義你要的groupid。但如沒必要就無所謂

其實一般像這種有多巢式的動態元件。決定好群組動態元件後。就可以直接處理應用
我在後面看到你的程式碼，有發現你已經有用hide的input來記錄你的groupid。
其實這樣想法很好。只是你一個地方做錯了。
就是你該每產生一個label。除了content跟title之外。你也需要再一個groupid
這樣就可以送進去後端後。你可以用程式更好處理。

當然另外一個做法。就是從javascript處理好json再送進去後端。
我個人比較偏向上一個做法。不太喜歡在javascript上做json再處理。

tsunejui iT邦新手 5 級 ‧ 2018-10-25 20:15:22 檢舉

我明白了，謝謝您解除我的疑惑。的確按照您的方式，生產一個label搭配一個groupid，name就不會有編號了。除非是前端框架要使前後端分離，否則我也不喜歡json再處理的方式。

tsunejui iT邦新手 5 級 ‧ 2018-10-26 09:44:32 檢舉

非常感謝上面大大們的回答

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-10-24 16:49:47

使用以下的資料結構處理，id只需保留在變數中，不需要依賴html標記：

var label1 = {
	id:1,
	labelName: 'name1',
	labelContent: 'content1'
}

var label2 = {
	id:2,
	labelName: 'name2',
	labelContent: 'content2'
}

var group1 = [ 
	label1, label2
]

var group2 = [ 
	label1, label2
]

var groupAry = [
    group1, group2
]