根据条件自定义生成表单
根据各种类型,长度生成表单信息,循环以下方法:
inputSct(name, Type, Length, decimal, columnnames,idvalues) {//根据条件(输入框前面的名字,类型,长度,小数位数,每个输入框传的name)生成不同输入框 let that = this; if (Type == "分隔符") {//这里指的是分组,利用类型分隔符进行数据分组,分组的大小宽度需要自己设置 if (count != 0) { that.str += "</div>"; } if (count == 0) { classname = "'name_dwa'"; } else if (count == 1) { classname = "'name_dwb'"; widths = "style='width:1400px;'"; } else if (count == 2) { classname = "'name_dwc'"; widths = "style='width:1426px;'"; } else if (count == 3) { classname = "'name_dwd'"; widths = "style='width:1426px;'"; } else if (count == 4) { classname = "'name_dwe'"; widths = "style='width:1477px;'"; } else if (count == 5) { classname = "'name_dwf'"; widths = "style='width:1477px;'"; } else if (count == 6) { classname = "'name_dwg'"; widths = "style='width:1477px;'"; } else if (count == 7) { classname = "'name_dwk'"; widths = "style='width:1477px;'"; } else if (count == 8) { classname = "'name_dwg'"; widths = "style='width:1477px;'"; } else if (count == 9) { classname = "'name_dwl'"; widths = "style='width:1477px;'"; } else if (count == 10) { classname = "'name_dwm'"; widths = "style='width:1300px;'"; } else if (count == 11) { classname = "'name_dwn'"; widths = "style='width:1344px;'"; } else if (count == 12) { classname = "'name_dwg'"; widths = "style='width:1477px;'"; } else if (count == 13) { classname = "'name_dwo'"; widths = "style='width:1316px;'"; } else if (count == 14) { classname = "'name_dwp'"; widths = "style='width:1372px;'"; } else if (count == 15) { classname = "'name_dwq'"; widths = "style='width:1264px;'"; } else if (count == 16) { classname = "'name_dwi'"; widths = "style='width:1160px;'"; } else if (count == 17) { classname = "'name_dwg'"; widths = "style='width:1280px;'"; } else { classname = "'name_dw'"; } count++; } if (Type == "短整型" || Type == "长整型" || Type == "单精度" || Type == "双精度") { if (decimal && (Type == "单精度" || Type == "双精度")) {//判断有无小数 let length_ = Number(Length)+1; that.str += "<span class=" + classname + " title=" + name + ">" + name + "</span>" + "<input type='text' name=" + columnnames + " class='type_dw'" + "maxlength='" + length_+ "'" + "onkeyup=" + '"!/^(\\d+\.?)?\\d{0,' + decimal + "}$/.test(this.value)?(this.value=this.value.substring(0, this.value.length-1)): ''" + '"'+"onafterpaste=" + '"!/^(\\d+\.?)?\\d{0,' + decimal + "}$/.test(this.value)?(this.value=this.value.substring(0, this.value.length-1)): ''" + '"'+"onblur=fun("+ Length+","+decimal+","+'this)>' } else if (!decimal && (Type == "单精度" || Type == "双精度")) { that.str += "<span class=" + classname + " title=" + name + ">" + name + "</span>" + "<input type='text' name=" + columnnames + " class='type_dw'" + "maxlength='" + Length + "'" + "onkeyup=" + '"value=value.replace(/[^\\d]/g,' + "''" + ')"'+"onchange="+"this.value = this.value.replace(/[\u4e00-\u9fa5d]/g, '');"+"onafterpaste=" + '"value=value.replace(/[^\\d]/g,' + "''" + ')"/>' } else { that.str += "<span class=" + classname + " title=" + name + ">" + name + "</span>" + "<input type='text' name=" + columnnames + " class='type_dw'" + "maxlength='" + Length + "'" + "onkeyup=" + '"value=value.replace(/[^\\d]/g,' + "''" + ')"'+"onchange="+"this.value = this.value.replace(/[\u4e00-\u9fa5d]/g, '');"+"onafterpaste=" + '"value=value.replace(/[^\\d]/g,' + "''" + ')"/>' } } else if (Type == "文本" || Type == "长文本") { that.str += "<span class=" + classname + " title=" + name + " >" + name + "</span>" + "<input @click='selectvalue()' type='text' name=" + columnnames + " class='type_dw' " + " maxlength='" + Length + "'></input>" } else if (Type == "日期型" || Type == "时间型" || Type == "日期时间型") { that.str += "<span class=" + classname + " title=" + name + " >" + name + "</span>" + "<input type='date' class='type_dw' name=" + columnnames + "/>" } else if (Type == "列表(单选)" || Type == "列表(多选)") { var datas = sessionStorage.getItem('yitb');//此处是对select框的下拉项里添加数据,通过查询每条数据后面跟的参数 var datas = JSON.parse(datas); var html = ""; for (var i = 0; i < datas.length; i++) { var ds = datas[i].name; if(datas[i].name !="划"){ if (datas[i].id == idvalues) { var codename = JSON.parse(datas[i].data); for (var n = 0; n < codename.length; n++) { if (codename[n].name.indexOf("rts") != -1 || codename[n].name == '') { continue; } html = html + "<option value='" + codename[n].code + "'>" + codename[n].name + "</option>"; } } } }; if (name == '省') { html = html + "<option value='610000'> 陕西省</option>"; } if (name == '作') { html = jodType; } selectve = html; that.str += "<span class=" + classname + " title=" + name + " id="+idvalues+" >" + name + "</span>" + "<select onchange='selectvalue(this)' class='type_dw' name=" + columnnames + ">" + selectve + " </select>" } else if (Type == "分隔符") { that.str += "<div " + widths + "><span class='name_dw' style='display:block;width: 1435px;font-size: 16px;height: 46px;font-weight: 700;border-bottom: 1px solid gainsboro;color:green;'>" + name + "</span>" } },
最后生成类似于:
这种的表单信息,可判断长度、类型、小数位数、可进行分组。