iT邦幫忙

0

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

客戶需要一個帳單頁面。

帳單示意圖:
https://ithelp.ithome.com.tw/upload/images/20181024/20108478TQGjHY9CnM.png

後台示意圖
https://ithelp.ithome.com.tw/upload/images/20181024/20108478fOMMxu2ZZh.png

從上帳單示意圖可以看到,他有多個群組,每個群組裡面有多個項目。
後台可以產生這個帳單,能夠動態新增刪除群組,畫面就像後台示意圖那樣,而每個群組裡面,則可以態新增刪除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邦研究生 4 級 ‧ 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 ,這方式會持續汙染資料庫,這樣嗎?
假如是這點的話,你可以在前端新增一個[儲存]按鈕,等修改內容穩定後按下這按紐來彙整整體的新增修改內容,再一次傳給後端去修改資料庫。
要問的是新增還是修改?
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邦研究生 4 級 ‧ 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 檢舉
非常感謝上面大大們的回答

1 個回答

0

使用以下的資料結構處理,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
]

我要發表回答

立即登入回答