JS の 套路 II ~~

今天的需求是 给表单赋值 还有修改并保存。以下的方法应该是个本方法，但好上手！！

给表单值

<form>
    <table>
         <tbodu>
                这里假装有一堆表单的一对tr td
        </tbodu>
        
    </table>   
</form>

先把代码给你

$.usergateway.selectOne(pram, function (res) {
                console.dir(res);
                console.dir(res.inputFlag);
                if (res.code == 200) {              
                    $("#stationName").val(res.data.stationName);
                    $("#stationManager").val(res.data.inChargePerson);
                    $("#stationTel_tel").val(res.data.telephone);
                    $("#sendSite").val(res.data.startStationName);
                    $("#stationAddr").val(res.data.stationAddress);
                    $("#txtRemark").val(res.data.remarks);
                    $("#areaName").val(res.data.sysAreaDic.vareaNick);
                    

                    $("#stopFlag").val(res.data.disables? 1 : 0);
                    //录入标志                    
                    $("#inputFlag").val(res.data.inputflag ? 1 : 0);
                    // 主站标志
                    $("#mainFlag").val(res.data.mainflag ? 1 : 0);
                    // 发站标志
                    $("#sendFlag").val(res.data.originflag ? 1 : 0);
                    //到站标志
                    $("#arriveFlag").val(res.data.endflag ? 1 : 0);
                    // 终点标志
                    $("#endFlag").val(res.data.terminalflag ? 1 : 0);
                    // 发货移交
                    $("#sendOutFlag").val(res.data.sendoutflag ? 1 : 0);
                    // 发货接收
                    $("#sendInFlag").val(res.data.sendinflag ? 1 : 0);
                    // 货到移交
                    $("#arrivedOutFlag").val(res.data.arrivedoutflag ? 1 : 0);
                    // 货到接收
                    $("#arrivedInFlag").val(res.data.arrivedinflag ? 1 : 0);
                                                 
                }
            })

1. 不要问那个javagateway是什么，你要问的话我告诉你这个之前是.Net 的重构java。页面也不是jsp，所以。。。。

2. 显示的就是正常的表单还有 下拉的双选~

   还有图片

$.javagateway.post("/relation/selectOne", param, function (response) {
    var result = response.data;
    //身份证赋值
    var identityStr = "";
    if (result.identityOnePic != null && result.identityTwoPic == null) {
        var identityUrl = "http://" + result.identityOnePic;
        identityStr = "<div style="position: relative; display: inline-block;">" +
            "<div>" +
            "<img id="driver_idcard_image0" onclick="previewImage('" + identityUrl + "') src='" + identityUrl + "' />" +
            "<input type="hidden" id="driver_idcard_image01" name="driver_idcard_image01" value="" />" +
            "<input type="hidden" value="" + result.identityOnePic + "" id="idcard0" />" +
            "<input type="hidden" id="driver_idcard_image08" name="driver_idcard_image08" value="" + result.identityOnePic + "" />" +
            "</div> </div>  <div style="position: relative; display: inline-block;">" +
            "<div>" +
            "<img id="driver_idcard_image1" src="/content/common/images/uploadImgOneLi.png" />" +
            "<input type="hidden" id="driver_idcard_image11" name="driver_idcard_image11" value="" />" +
            "<input type="hidden" id="driver_idcard_image18" name="driver_idcard_image18" />" +
            "</div>" +
            "<div class="driver_idcard_image1" style=" 100%; text-align: center; cursor: pointer; position: absolute; bottom: 0%; background-color: #808080; display: none;">" +
            "<span style="color: #ffffff;">查看原图</span>" +
            "</div>" +
            "</div>";
    } else if (result.identityOnePic != null && result.identityTwoPic != null) {
        var identityUrlOne = "http://" + result.identityOnePic;
        var identityUrlTwo = "http://" + result.identityTwoPic;
        identityStr = "<div style="position: relative; display: inline-block;">" +
            "<div>" +
            "<img id="driver_idcard_image0" onclick="previewImage('" + identityUrlOne + "')" src="" + identityUrlOne + "" />" +
            "<input type="hidden" id="driver_idcard_image01" name="driver_idcard_image01" value="" />" +
            "<input type="hidden" value="" + identityUrlOne + "" id="idcard0" />" +
            "<input type="hidden" id="driver_idcard_image08" name="driver_idcard_image08" value="" + identityUrlOne + "" />" +
            "</div>" +
            "</div>";

        identityStr += "<div style="position: relative; display: inline-block;">" +
            "<div>" +
            "<img id="driver_idcard_image1" onclick="previewImage('" + identityUrlTwo + "')" src="" + identityUrlTwo + "" />" +
            "<input type="hidden" id="driver_idcard_image11" name="driver_idcard_image11" value="" />" +
            "<input type="hidden" value="" + identityUrlTwo + "" id="idcard1" />" +
            "<input type="hidden" id="driver_idcard_image18" name="driver_idcard_image18" value="" + identityUrlTwo + "" />" +
            "</div>" +
            "</div>";
    } else {
        identityStr = "<div style="position: relative; display: inline-block;">" +
            "<div>" +
            "<img id="driver_idcard_image0" src="/content/common/images/uploadImgOneLi.png" />" +
            "<input type="hidden" id="driver_idcard_image01" name="driver_idcard_image01" value="" />" +
            "<input type="hidden" id="driver_idcard_image08" name="driver_idcard_image08" />" +
            "</div>" +
            "<div class="driver_idcard_image0" style=" 100%; text-align: center; cursor: pointer; position: absolute; bottom: 0%; background-color: #808080; display: none;">" +
            "<span style="color: #ffffff;">查看原图</span>" +
            "</div>" +
            "</div>" +
            " <div style="position: relative; display: inline-block;">" +
            "<div>" +
            "<img id="driver_idcard_image1" src="/content/common/images/uploadImgOneLi.png" />" +
            "<input type="hidden" id="driver_idcard_image11" name="driver_idcard_image11" value="" />" +
            "<input type="hidden" id="driver_idcard_image18" name="driver_idcard_image18" />" +
            "</div>" +

            "<div class="driver_idcard_image1" style=" 100%; text-align: center; cursor: pointer; position: absolute; bottom: 0%; background-color: #808080; display: none;">" +
            " <span style="color: #ffffff;">查看原图</span>" +
            "</div>" +
            "</div>";
    }
    $("#identityCard").html(identityStr);
    $("#identityId").val(result.identity);
    $("#driver_idcard_image3").val(result.identity);

   //以上是职业生涯痛的回忆，拼 表单，主要是因为那是两张图 前辈还偏偏用了循环
   //下面是给 表单赋值，如果不在循环之前给循环体 var 个变量，就啥都没有~~ 
    //授权信息赋值
    var auth =result.authorizationPic
    if (!auth) {
        document.getElementById("authorization_image").src = "/content/common/images/uploadImgOneLi.png";
    } else {
        document.getElementById("authorization_image").src = "https://" +auth;
    }
    //道路运输许可证赋值
    var trans = result.transportLicensePic;
    if (!trans) {
        document.getElementById("transport_image").src = "/content/common/images/uploadImgOneLi.png";
    } else {
        document.getElementById("transport_image").src = "https://" +trans;
    }
   
    //在同表单有个单击事件。一同奉上
    //单击事件
    $("#insurance_img").on("click", function () {
        console.log($(this).attr("src"))
        previewImage($(this).attr("src"));
    })
    //营业执照
    $("#trade_imagesxd").on("click", function () {
        console.log($(this).attr("src"))
        previewImage($(this).attr("src"));
    })
    。。。

            })
})

向表单要值

//定义修改变量
var params = {                     
    corpid: "<%=userInfo.CorpId%>",
    businessLicensePic: 1,
    accountLicensePic: 1,
    identityOnePic: 1,
    identityTwoPic: 1,
    insuranceFormPic: 1,
    transportLicensePic: "",
    authorizationPic: 1,
    doorLicensePic: 1
};

//修改的赋值方法
function assignment() {                       
    params.corpId = "<%=userInfo.CorpId%>";         
    //营业执照
    params.businessLicensePic = $("#trade_image8").val();
    //开户许可证
    params.accountLicensePic = $("#open_account_image8").val();
    //法人身份证A
    params.identityOnePic = $("#driver_idcard_image0_image8").val();
    //法人身份证B
    params.identityTwoPic = $("#driver_idcard_image1_image8").val();
    //货物保险单
    params.insuranceFormPic = $("#insurance_image1").val();
    //道路运输许可证          
    params.transportLicensePic = $("#transport_image8").val(); 
    //企业门头照片
    params.doorLicensePic = $("#door_image8").val();
    //授权协议
    params.authorizationPic = $("#authorization_image8").val();
}

//保存事件
function save() {
    if (validate()) {
        assignment();
        $.usergateway.updateRelation(JSON.stringify(params), function (res) {
            console.log(res);
            if (res.code == 200) {
                showSuccessAlert("上传成功!我们工作人员会尽快审核资料并与您取得联系！如有疑问，请拨打400-007-5656！");
                //页面的名字
                parent.layx.destroy("CompanyZzModify");
            } else {
                showErrorAlert(response.message);
            }
        })

    } else {
        showErrorAlert("您有未填写的必填项，请检查后重新提交!");
    }
}

很明显，分为三步

1. 根据实体定义变量 并初始化值 也就是给个默认
2. 给变量赋值
3. 将整个变量作为 param 传给Ajax~~