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);
}
})
-
不要问那个javagateway是什么，你要问的话我告诉你这个之前是.Net 的重构java。页面也不是jsp，所以。。。。
-
显示的就是正常的表单还有 下拉的双选~
还有图片
$.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("您有未填写的必填项，请检查后重新提交!");
}
}
很明显，分为三步
- 根据实体定义变量 并初始化值 也就是给个默认
- 给变量赋值
- 将整个变量作为 param 传给Ajax~~
