项目测试中客户觉得单据过于复杂而且保存验证条件过多,希望能够录入到一半的单据先暂时保存起来不做任何验证,等需要时可以将曾经暂存的单据拿出来继续执行。
实现思路:
暂存:用户新增单据时点击“暂存”,使用jquery获取单据上用户录入的所有元素信息,拼接成json字符串和单据类型、登录用户等信息保存到数据库中。
引用暂存:用户新增单据时点击“引用暂存”,根据登录用户和单据类型查询暂存单据列表。用户选择其中一个暂存单据,使用ajax获取选中暂存单据json数据,解析数据并覆盖当前单据所有元素。
具体代码:
暂存单据
function saveTemMemory(){
var jsonArr = [];
//获取页面中所有元素的信息,将数据拼接为jsonArr
$("input,select,textarea").each(function(){
var map = {};
var id = $(this).attr("id");//元素id
var name = $(this).attr("name");//元素名称
var tagName = $(this)[0].tagName.toLowerCase();//标签名称
var type = $(this).attr("type");//元素type
var val = $(this).val();//value
if (type == "file") {//文件标签
return true;
}
if (type == "radio") {//单选框
//当此选项未选中时跳过
if (!$("input:radio[name='" + name + "'][value='" + val + "']").attr("checked")) {
return true;
}
}
if (type == "checkbox") {//复选选框
//当此选项未选中时跳过
if (!$("input:checkbox[name='" + name + "'][value='" + val + "']").attr("checked")) {
return true;
}
}
map.id = id;
map.name = name;
map.tagName = tagName;
map.type = type;
map.val = val;
jsonArr.push(map);
});
//转换并保存json数据
//这里就没必要说了吧?
.....
}
引用暂存单据
function quoteTemMemory(tmId){
//查询暂存单据
$.ajax({
async : false,//异步
cache : false,//缓存
type : "POST",
url : "获取暂存单据数据的地址",
data : {
tmId : tmId//暂存单据id
},
dataType : "JSON",
error : function(){
alert("请求失败!");
},
success : function(data){
if (data.result) {//成功
//使用暂存单据覆盖现有单据数据
var jsonArr = new Function("return" + data.jsonStr)();//解析json
//遍历json对象
for ( var i in jsonArr) {
var jsonObj = jsonArr[i];
var id = jsonObj.id == undefined ? "" : jsonObj.id.replace("~", "\\~");//元素id
var name = jsonObj.name;//元素名称
var tagName = jsonObj.tagName;//标签名称
var type = jsonObj.type;//元素type
var val = jsonObj.val;//value
if (tagName == "input") {//input
if (type == "radio") {//radio
$("input:radio[name='" + name + "'][value='" + val + "']").attr("checked", "checked");
} else if (type == "checkbox") {//checkbox
$("input:checkbox[name='" + name + "'][value='" + val + "']").attr("checked", "checked");
} else {
$("#"+id).val(val);//赋值
}
} else {
$("#"+id).val(val);//赋值
}
}
}
}
});
}
后端新增和查询暂存单据应该就没有必要说了吧?!