jQuery比较表单初始数据和提交后数据

问题描述

表单加载后，要能够对修改的数据进行比较，不能删除默认添加的数据。

问题分析

由于平台上的功能是多个iframe页面执行表单加载和表单提交的脚本不是运行在同一个上下文，要在表单中保存一个对象数据到input输入框中，才能传递保存的数据

解决方案

获取原始数据构造为json

使用字面量的方式构造json，数据在表单加载时从input中取出

function fomatApprovalList(){
    var approvalList =  [];
    for(i=1;i<5;i++){
        var approvalList1 = { "approvalId":$("#SelectUserV2" + i + "hf").val().toString().split(","),"approvalName":$("#SelectUserV2" + i + "txt").val().toString().split(",")};
        approvalList.push(approvalList1);
    }
    return approvalList;
}

保存数据到隐藏的文本框中

使用JSON.stringify()转换数据，如果不转换的话保存到input中的数据就会是[Object Object,Object Object]这样的数据，无法从input中重新读取，然后保存到input中，获取时使用JSON.parse()转换回json，保存到另外的input中

var approvalListArray = fomatApprovalList();
$("#approvalListInput").val(JSON.stringify(approvalListArray));

构造新的json数据与原始数据进行比较

在提交表单的上下文中，由于构造的数据对象会变为数组对象，所以用旧的元素中的元素去对比是否在新的数组中有包含，使用.indexOf(String) == -1，作为判断

var newApprovalListInfo = fomatApprovalList();
var firstApprovalListInfo = JSON.parse($("#approvalListInput").val().toString());
var temp = 1;
for(i = 0; i < firstApprovalListInfo.length; i++){
    for(j = 0; j < firstApprovalListInfo[i].approvalName.length; j++){
        var firstValue = firstApprovalListInfo[i].approvalName[j];
        if(firstValue != ""){
            if(newApprovalListInfo[i].approvalName.indexOf(firstValue)==-1){
                temp = 2;
                $("#SelectUserV2" + (i+1) + "hf").val($("#SelectUserV2" + (i+1) + "hf").val() + "," + firstApprovalListInfo[i].approvalId[j]);
                $("#SelectUserV2" + (i+1) + "txt").val($("#SelectUserV2" + (i+1) + "txt").val() + "," + firstApprovalListInfo[i].approvalName[j]);
            }
        }
        
    }
}

结论

从中涉及到的知识点都是了解到的知识，还是需要多次查询和调试，还是要多写多记录。