传统 HTML 表单数据的“整存整取”
2024-04-11 21:28:30
在日常开发中，涉及表单的处理司空见惯。过往，在取值和赋值的过程中，借助 jQuery 常常只是逐个控件进行操作，可惜这样开发效率并不高。那么能不能批量获取整个表单的值呢，以及批量为表单赋值。
一、取值、赋值的扩展方法
/* 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
formClear：清空表单中所有控件的值
$("form#editForm").formClear();
formFill：填充表单所有控件
$("form#editForm").formFill({ data: result.Data });
formSerialize：获取表单中所有控件的值
// 收集表单数据
var serializeForm = $("#searchForm").formSerialize(true);
参数设置为true的话，会把string型的"true"和"false"字符串值转化为boolean型。
如果需要追加额外的属性，使用 extend 合并即可：
$.extend(serializeForm, { openId: openId });
除了上述的合并方式之外，还可以直接为属性赋值，这样 js 语言层面会自动追加属性：
if (serializeForm.hasOwnProperty("IsSubscribeSenderEmail")) {
serializeForm["IsSubscribeSenderEmail"] = 1;
} else {
serializeForm["IsSubscribeSenderEmail"] = 0;
}
最新文章
- [转]C/C++ 程序员必须收藏的资源大全
- GitHub使用指南
- logrotate关于日志轮询和分割
- 串口编程 tcflush（）函数 (转)
- FJNU 1156 Fat Brother’s Gorehowl（胖哥的血吼）
- The service ‘xxx’ configured for WCF is not registered with the Autofac container
- CSS3动画（360度旋转、旋转放大、放大、移动）
- android studio 更新失败解决办法
- 解决 apache poi 转换 word(docx) 文件到 html 文件表格没边框的问题
- MySQL系列：基于binlog的增量订阅与消费（一）
- appium 3 跑起来
- hdu 6287 口算训练
- 【模板】快速幂&取余运算
- Python守护进程和脚本单例运行
- css 多行文字，超出部分隐藏，...代替
- 【转】每天一个linux命令(11)：nl命令
- C# 属性事件一些设置说明
- 第七模块：项目实战一 第1章 项目实战：CRM客户关系管理系统开发
- maria（mysql）的主从复制
- 【PPTP】windows & linux 安装pptp