JQ动态添加数据，并让后端能识别到
在做开发的过程中，特别是做web时，经常用到一些界面上的数据需要动态添加。
功能本来是不复杂，脑子里想的思路是很清晰的。但是经常等到动起手来就发现，哎呦，这不行那不行的（有没有跟我一样的。。。）。
所以，好记性不如烂笔头，就记录一下这个动态添加数据的功能
HTML代码段
1 <div class="layui-form-item"> 2 <div style=" display:none;"> 3 <input type="text" name="compatibleIndexList" id="compatibleIndexList" autocomplete="off" class="layui-input"> 4 <input type="text" name="compatibleList" id="compatibleList" autocomplete="off" class="layui-input"> 5 </div> 6 <div class="layui-inline"> 7 <label class="layui-form-label">配件类型</label> 8 <div class="layui-input-block"> 9 <select name="accessory_type" id="accessory_type" lay-filter="accessory_type_filter"></select> 10 </div> 11 </div> 12 <div class="layui-inline"> 13 <label class="layui-form-label">字段名称</label> 14 <div class="layui-input-block layui-form-select"> 15 <input type="text" name="field_name" id="field_name" placeholder="字段名称" autocomplete="off" class="layui-input"> 16 </div> 17 </div> 18 <div class="layui-inline"> 19 <label class="layui-form-label">字段值</label> 20 <div class="layui-input-inline layui-form-select"> 21 <input type="text" name="field_value" id="field_value" placeholder="字段值" autocomplete="off" class="layui-input"> 22 </div> 23 </div> 24 <div class="layui-inline"> 25 <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" style="float:left;height: 35px;line-height: 35px; width: 100px; padding: inherit;" onclick="addProductInfo()">添加参数</button> 26 </div> 27 </div> 28 <div id="addProductPareameterList"> 29 @*零件参数动态添加列表 *@ 30 </div>
再来看看JS完整的方法分别有添加和删除两个方法：
1 //添加动态参数 2 function addProductInfo() { 3 var index = 0; 4 var accessoryType = $("#accessory_type").val(); //选择的配件类型 5 var accessoryType_txt = $("#accessory_type option:selected").text(); 6 var fieldName = $("#field_name").val(); //字段名 7 var fieldValue = $("#field_value").val(); //字段值 8 9 if (accessoryType == "") { 10 layer.msg("请选择配件类型"); 11 return false; 12 } 13 14 if (fieldName == "" || fieldValue == "") { 15 layer.msg("请输入字段名和字段值"); 16 return false; 17 } 18 //先放进session 19 var data = sessionStorage.getItem('CompatibleDynamicInfoIndex'); 20 if (data == null) { 21 data = "1"; 22 } 23 else { 24 data = Number(data) + 1; 25 } 26 //在从session中取出 27 sessionStorage.setItem('CompatibleDynamicInfoIndex', data); 28 var strParameter = ""; 29 strParameter += " <div class=\"layui-form-item\" id=\"productDynamic_" + data + "\">"; 30 strParameter += " <div style=\" display:none;\">"; 31 strParameter += " <input type=\"text\" name=\"accessory_type_" + data + "\" id=\"accessory_type_" + data + "\" value=\"" + accessoryType + "\" autocomplete=\"off\" class=\"layui - input\">"; 32 strParameter += " </div>"; 33 strParameter += " <div style=\" display:none;\">"; 34 strParameter += " <input type=\"text\" name=\"compatible_key_" + data + "\" id=\"compatible_key_" + data + "\" value=\"" + fieldName + "\" autocomplete=\"off\" class=\"layui - input\">"; 35 strParameter += " </div>"; 36 strParameter += " <div style=\" display:none;\">"; 37 strParameter += " <input type=\"text\" name=\"compatible_value_" + data + "\" id=\"compatible_value_" + data + "\" value=\"" + fieldValue + "\" autocomplete=\"off\" class=\"layui - input\">"; 38 strParameter += " </div>"; 39 strParameter += " <div class=\"layui-inline\">"; 40 strParameter += " <label class=\"layui-form-label\">配件类型</label>"; 41 strParameter += " <div class=\"layui-form-mid layui-word-aux lable_txt\" id=\"accessoryType\">" + accessoryType_txt + "</div>"; 42 strParameter += " </div>"; 43 strParameter += " <div class=\"layui-inline\">"; 44 strParameter += " <label class=\"layui-form-label\">字段名</label>"; 45 strParameter += " <div class=\"layui-form-mid layui-word-aux lable_txt\" id=\"product_type\">" + fieldName + "</div>"; 46 strParameter += " </div>"; 47 strParameter += " <div class=\"layui-inline\">"; 48 strParameter += " <label class=\"layui-form-label\">字段值</label> "; 49 strParameter += " <div class=\"layui-form-mid layui-word-aux lable_txt\" id=\"product_mtx\">" + fieldValue + "</div>"; 50 strParameter += " </div>"; 51 strParameter += " <div class=\"layui-inline\">"; 52 strParameter += " <button type=\"button\" class=\"layui-btn layui-btn-danger layui-btn-radius del-parmeter-box\" onclick=\"delProductInfo(" + data + ")\">删除</button>"; 53 strParameter += " </div>"; 54 strParameter += " </div>"; 55 56 57 58 //参数集合 59 var idlist = $("#compatibleIndexList").val(); 60 var strmp = $("#compatibleList").val(); //key+value+type 组合 61 var strNewMP = fieldName + "|" + fieldValue + "|" + accessoryType; 62 //判断参数是否有添加过 63 if (strmp != "") { 64 var pmsplit = strmp.split(','); 65 var resultparrt = $.inArray(strNewMP, pmsplit); 66 if (resultparrt >= 0) { 67 68 layer.msg("已添加相同字段信息"); 69 return false; 70 } 71 } 72 //索引集合 73 if (idlist == "") { 74 $("#compatibleIndexList").val(data); 75 } 76 else { 77 idlist = idlist + "," + data; 78 $("#compatibleIndexList").val(idlist); 79 } 80 //材料+产品 组合 81 if (strmp == "") { 82 $("#compatibleList").val(strNewMP); 83 } 84 else { 85 strmp = strmp + "," + strNewMP; 86 $("#compatibleList").val(strmp); 87 } 88 //追加参数 89 $("#addProductPareameterList").append(strParameter); 90 $("#field_name").val(""); 91 $("#field_value").val(""); 92 }
1 //删除 2 function delProductInfo(id) { 3 if (confirm("确定删除这个参数吗？") == true) { 4 //debugger; 5 var acctype = $("#accessory_type_" + id).val(); //类型 6 var fieldName = $("#compatible_key_" + id).val(); //字段名 7 var fieldValue = $("#compatible_value_" + id).val(); //字段值 8 $("#productDynamic_" + id).remove(); 9 var idlist = $("#compatibleIndexList").val(); 10 var splitlist = ""; 11 var sear = new RegExp(id + ','); 12 var strend = new RegExp(',' + id); 13 if (sear.test(idlist)) { 14 splitlist = idlist.replace(id + ",", ''); 15 } 16 else 17 if (strend.test(idlist)) { 18 splitlist = idlist.replace("," + id, ''); 19 } 20 else { 21 splitlist = idlist.replace(id, ''); 22 } 23 $("#compatibleIndexList").val(splitlist); 24 var splitpmlist = ""; 25 var strpm = fieldName + "|" + fieldValue + "|" + acctype 26 var stardpm = strpm + ","; // new RegExp(strpm + ","); 27 var endpm = "," + strpm; // new RegExp("," + strpm); 28 var pmlist = $("#compatibleList").val(); 29 if (pmlist.indexOf(stardpm) != -1) { 30 splitpmlist = pmlist.replace(strpm + ',', '') 31 } else 32 if (pmlist.indexOf(endpm) != -1) { 33 splitpmlist = pmlist.replace(',' + strpm, '') 34 } else { 35 splitpmlist = pmlist.replace(strpm, ''); 36 } 37 $("#compatibleList").val(splitpmlist); 38 } 39 }
这JS里面看起来代码量有点多，其实是为了将你动态添加的数据，集中放在一个隐藏的input框中方便后端取值。不管是mvc还是前后端分离，
最终都是要将动态添加的数据传到后端的，但是多少数据并不确定，所以要动态处理这个值。
最终效果如下：
浙公网安备 33010602011771号