在平常开发中,涉及表单的处理司空见惯。过往,在取值和赋值的过程当中,借助 jQuery 经常只是逐个控件进行操做,惋惜这样开发效率并不高。那么能不能批量获取整个表单的值呢,以及批量为表单赋值。javascript
/* jQuery 扩展 */ jQuery.fn.extend({ /* 清空表单 */ formClear: function () { this.find("input:text,select,input:hidden,input:password").each(function () { $(this).val(""); }); this.find("input:checkbox,input:radio").each(function () { $(this).removeAttr("checked"); }); }, /* 填充表单 */ // 例如 $('form').formFill({ data : {id:1} , prefix : "user." }),填充后形如 <input name='user.id' value='1' > formFill: function (option) { var prefix = option.prefix; if (prefix == undefined) prefix = ""; var frmData = option.data; for (i in frmData) { var dataKey = i; var thisData = this.find("[name='" + prefix + i + "']"); var text = "text"; var hidden = "hidden"; if (thisData != null) { var thisDataType = thisData.attr("type"); var val = frmData[i]; var isdata = (val != null && val.toString().lastIndexOf("/Date(") != -1); if (thisDataType == "radio") { thisData.filter("[value=" + val + "]").attr("checked", "checked") if (val == true || val == "0") val = "True"; else if (val == false || val != "0") val = "False"; thisData.filter("[value=" + val + "]").not("donbool").attr("checked", "checked") } else if (thisDataType == "checkbox") { if (thisData.size() == 1) { if (val == "true" || val == 1 || val == "True" || val == "1") { thisData.attr("checked", "checked"); } else { thisData.removeAttr("checked"); } } else { thisData.removeAttr("checked"); var cbIndex = i; if (val.lastIndexOf(",") == -1) { this.find("[name='" + prefix + dataKey + "'][value='" + prefix + val + "']").attr("checked", "checked"); } else { jQuery(val.split(',')).each(function (i, v) { this.find("[name='" + prefix + dataKey + "'][value='" + prefix + v + "']").attr("checked", "checked");; }) } } } else { if (isdata) { val = jQuery.Convert.jsonReductionDate(val); } if (val == "null" || val == null) val = ""; if (val == "" && thisData.attr("watertitle") == thisData.val()) { } else { thisData.val(val + ""); thisData.removeClass("watertitle"); } } } } }, /* 抓取表单 */ // changeToBool 设置为true的话,会把string型"true"和"false"字符串值转化为boolean型 formSerialize: function (changeToBool) { var formArray = this.serializeArray(); var oRet = {}; for (var i in formArray) { if (typeof (oRet[formArray[i].name]) == 'undefined') { if (changeToBool) { oRet[formArray[i].name] = (formArray[i].value == "true" || formArray[i].value == "false") ? formArray[i].value == "true" : formArray[i].value; } else { oRet[formArray[i].name] = formArray[i].value; } } else { if (changeToBool) { oRet[formArray[i].name] = (formArray[i].value == "true" || formArray[i].value == "false") ? formArray[i].value == "true" : formArray[i].value; } else { oRet[formArray[i].name] += "," + formArray[i].value; } } } return oRet; } }); // end extend
$("form#editForm").formClear();
$("form#editForm").formFill({ data: result.Data });
// 收集表单数据 var serializeForm = $("#searchForm").formSerialize(true);
参数设置为true的话,会把string型的"true"和"false"字符串值转化为boolean型。java
若是须要追加额外的属性,使用 extend 合并便可:json
$.extend(serializeForm, { openId: openId });
除了上述的合并方式以外,还能够直接为属性赋值,这样 js 语言层面会自动追加属性:this
if (serializeForm.hasOwnProperty("IsSubscribeSenderEmail")) { serializeForm["IsSubscribeSenderEmail"] = 1; } else { serializeForm["IsSubscribeSenderEmail"] = 0; }