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=\"width: 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=\"width: 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=\"width: 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~~