根据条件自定义生成表单
根据各种类型,长度生成表单信息,循环以下方法:
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>"
}
},
最后生成类似于:

这种的表单信息,可判断长度、类型、小数位数、可进行分组。

浙公网安备 33010602011771号