求教：动态添加表单，获取表单值，设置表单值

Aisin丿Gioro

如图所示，表单是动态添加上去的，点击保存按钮获取表单中的值，怎样组合成一个数组对象传到后台。然后再试打开的话把上次保存的值回显到表单里，如何进行遍历设置值。

1. function addItemHtml(index, item) {
   
2.         if(!index) {
   
3.             index = 1;
   
4.         }
   
5.         var htmlStr = '<div class="card" id="card_'+ index +'">' +
   
6.             '<div class="card-header"><h3 class="card-title">候选名称'+ index +'</h3><a class="card-btn-del" href="javascript:void(0)" onclick="delElement(\'card_\' + \''+index+'\')">删除</a></div>' +
   
7.             '<div class="card-body">' +
   
8.             '<div class="form-item">' +
   
9.             '<div class="form-block">' +
   
10.             '<label class="form-label"><span class="required-tip">*</span>分所中文名称：</label>' +
    
11.             '<div class="form-input">' +
    
12.             '<input class="mini-textbox" id="branchFirmName_' + index +'" name="name" emptyText="请输入分所中文名称" errorMode="border" required requiredErrorText="分所中文名称不能为空">' +
    
13.             '</div>' +
    
14.             '</div>' +
    
15.             '</div>' +
    
16.             '<div class="form-item">' +
    
17.             '<div class="form-block">' +
    
18.             '<label class="form-label"><span class="required-tip">*</span>分所中文简称：</label>' +
    
19.             '<div class="form-input">' +
    
20.             '<input class="mini-textbox" id="branchFirmShortName_'+ index +'" name="shortName" emptyText="请输入分所中文简称" errorMode="border" required requiredErrorText="分所中文简称不能为空" onValuechanged="methods.onNameValueChanged(e, \'branchFirmShortPinyin_\' + \''+index+'\')">' +
    
21.             '</div>' +
    
22.             '</div>' +
    
23.             '</div>' +
    
24.             '<div class="form-item">' +
    
25.             '<div class="form-block">' +
    
26.             '<label class="form-label"><span class="required-tip">*</span>分所英文名称：</label>' +
    
27.             '<div class="form-input">' +
    
28.             '<input class="mini-textbox" id="branchFirmEnglishName_'+ index +'" name="engilshName" emptyText="请输入分所英文名称" vtype="isEnglish" errorMode="border" required requiredErrorText="分所英文名称不能为空">' +
    
29.             '</div>' +
    
30.             '</div>' +
    
31.             '</div>' +
    
32.             '<div class="form-item">' +
    
33.             '<div class="form-block">' +
    
34.             '<label class="form-label"><span class="required-tip">*</span>分所简称拼音：</label>' +
    
35.             '<div class="form-input">' +
    
36.             '<input class="mini-textbox" id="branchFirmShortPinyin_'+ index +'" name="pinYin" emptyText="请输入分所简称拼音" errorMode="border" required requiredErrorText="分所简称拼音不能为空">' +
    
37.             '</div>' +
    
38.             '</div>' +
    
39.             '</div>' +
    
40.             '</div>' +
    
41.             '</div>';
    
42.         return htmlStr;
    
43.     }
    
44. function addRow(eleId) {
    
45.         var count = $("#" + eleId).find(".card").length;
    
46.         count = count + 1;
    
47.         if(count > maxCount){
    
48.             mini.alert("候选名称最多添加10条");
    
49.             return;
    
50.         }
    
51.         var htmlStr = addItemHtml(count);
    
52.         $("#" + eleId).append(htmlStr);
    
53.         mini.parse(htmlStr);
    
54.     }
    
55. 
    
56. function delElement(eleId) {
    
57.         var num = $("#shortList").find(".card").length;
    
58.         if(num < 6){
    
59.             mini.alert("至少保留5条");
    
60.             return;
    
61.         }
    
62.         mini.showMessageBox({
    
63.             title: "提示",
    
64.             message: "确定要删除该条记录吗？",
    
65.             buttons: ["ok", "cancel"],
    
66.             iconCls: "mini-messagebox-question",
    
67.             callback: function(action){
    
68.                 if(action == "ok"){
    
69.                     $("#" + eleId).remove();
    
70.                     for (var i = 0; i <= num; i++) {
    
71.                         $("#shortList .card").eq(i).find(".card-title").html("候选名称" + (i + 1));
    
72.                     }
    
73.                 }
    
74.             }
    
75.         })
    
76.     }
    
77. function getItemsData() {
    
78.         var arr = [];
    
79.         $("#shortList").find(".card").each(function () {
    
80.             var _id = $(this).attr("id");
    
81.             var obj = new Object();
    
82.             var controls =  mini.getChildControls(_id);
    
83.             for(var i = 0; i < controls.length; i++){
    
84.                 var control = controls[i];
    
85.                 obj[control.name] = control.value;
    
86.             }
    
87.             arr.push(obj);
    
88.         });
    
89.         return arr;
    
90.     }

复制代码

felt

1. function getItemsData() {
   
2.         var obj = {};
   
3.         $("#shortList").find(".card").each(function () {
   
4.             var _id = $(this).attr("id");         
   
5.             var form = new mini.Form(_id);
   
6.             var data = form.getData();
   
7.             obj[_id] = data;           
   
8.         });
   
9.         return obj;
   
10.     }

复制代码

获取到的数据是这样的格式
{“card1":{name:"",shortName:"",engilshName:"",pinYin:""},"card2":{...}}

回填也是类似，把每部分当成一个小的表单，使用表单赋值就可以了。

Aisin丿Gioro

felt 发表于 2021-3-4 09:22
获取到的数据是这样的格式
{“card1":{name:"",shortName:"",engilshName:"",pinYin:""},"card2":{...}}

非常感谢，如果我想这个动态添加的封装成组件，添加表单时把模板写在body里然后用克隆的方式复制添加一条记录，这种可以实现吗？

felt

Aisin丿Gioro 发表于 2021-3-4 14:29
非常感谢，如果我想这个动态添加的封装成组件，添加表单时把模板写在body里然后用克隆的方式复制添加一条 ...

肯定可以的