最近在写前端了,好久不写,摸索的写,下面说下复选框回显,选中,页面转中文展示写法,当然写法很多,仅供参考学习
// html checkbox写法
<label for="" class="col-sm-2 control-label">[[#{payfees.payfeespaytype}]]:</label><!-- 支付方式 -->
<div class="col-sm-4">
<input type="hidden" name="d" id="d" value="${pay.paytype}">
[[#{payfees.payfeeswechat}]]:<input type="checkbox" id="paytype" name="paytype" value=1>
[[#{payfees.payfeesalipay}]]:<input type="checkbox" id="paytype" name="paytype" value=2>
[[#{payfees.payfeesschoolcard}]]:<input type="checkbox" id="paytype" name="paytype" value=3>
</div>
// 回显写法,在查看接口拼接check选中
getPayfeesById: function () {
var itemid = $("#itemid").val();
if (!itemid) {
return;
}
dkyw.request.post("business/getPayfeesById", {"itemid": itemid}, function (response) {
if (response.success) {
var list = response.resultData;
$("#itemname").val(list.itemname);
$("#itemamt").val(list.itemamt);
$("#startdate1").val(list.startdate);
$("#enddate1").val(list.enddate);
$("#txcode").val(list.txcode);
$("#merchantno").val(list.merchantno);
$("#itemtype option[value='" + list.itemtype + "']").attr("selected", "selected"); // 项目类型
$("#status").find("option[value='" + list.status + "']").prop("selected", true);//状态
let val = $("#paytype").val();
// 获取复选框值回显
let paytype = list.paytype;
//拆分
var checkArray = paytype.split(",");
//获取所有复选框的值
var checkBoxAll = $("input[name='paytype']");
for (var i = 0; i < checkArray.length; i++) {
//获取所有复选框对象的value属性,然后,用checkArray[i]和他们匹配,如果有,则说明他应被选中
$.each(checkBoxAll, function (j, checkbox) {
//获取复选框的value属性
var checkValue = $(checkbox).val();
if (checkArray[i] == checkValue) {
$(checkbox).attr("checked", true);
}
})
}
} else {
dialog.close();
dkyw.dialog.error(queryI18n(response.message));
}
});
}
// 新增数据,复选框传值到后台写法
/**
* 公共对象
*/
commonData: function (param) {
var itemname = $("#itemname").val();// 缴费项目名称
var itemamt = $("#itemamt").val(); // 项目单价
var startdate = $("#startdate1").val(); // 开始时间
var enddate = $("#enddate1").val(); // 截至时间
var txcode = $("#txcode").val();// 交易代码
// var paytype = $("input[name='paytype']");
// 选中传值到后台
var str = "";
$("input[name=paytype]:checked").each(function (i) {
str += $(this).val() + ",";
});
var ids = str.substring(0, str.length - 1); //去掉最后面的逗号
var itemtype = $("#itemtype").val();// 项目类型
var merchantno = $("#merchantno").val();// 商户账号
var status = $("#status").val();// 状态
param.itemname = itemname;
param.itemamt = itemamt;
param.startdate = startdate;
param.enddate = enddate;
param.txcode = txcode;
param.paytype = ids;
param.itemtype = itemtype;
param.merchantno = merchantno;
param.status = status;
},
//页面列表展示复选框值 默认数据库查出:(1,2,3)转成(支付宝,微信,银联)
{
title: queryI18n('payfees.payfeespaytype'), /*支付方式*/
field: 'paytype',
visible: true,
sortable: true,
align: 'center',
width: "15%",
formatter: function (value) {
// 数字字符串转中文字符串方法
let val = '', newData = [];
var data = value.split(',');
data.forEach(item => {
if (item == 1) {
val = queryI18n('payfees.payfeeswechat')// 微信
} else if (item == 2) {
val = queryI18n('payfees.payfeesalipay');// 支付宝
} else if (item == 3) {
val = queryI18n('payfees.payfeesschoolcard'); // 校园卡
}
newData.push(val)
})
return newData.join(',')
}
// 展示样式
学习ing