创作背景

个人在日常开发中，遇到了一个需求页面，页面交互较多，用到的事件也很丰富，特此记录，方便后续查找也方便有需要的开发者采用，本文涉及项目所用架构为开源的若依架构。

themleaf页面事件

onblur

离焦事件，页面输入框输入手机号离焦后触发ajax请求后台自动获取官网用户名并赋值在页面上，页面如图

页面代码

<divclass="form-group"><labelclass="col-sm-3 control-label"><spanstyle="color: red;">*  </span>学员手机号：</label><divclass="col-sm-8"><inputid="phone"name="phone"class="form-control"type="text"onblur="getGwUserName();"placeholder="员工填写,必填"></div></div>

离焦事件触发方法getGwUserName()获取后台数据并返回重写在页面，getGwUserName()方法详情

//获取官网用户名functiongetGwUserName() {
varphone=$("#phone").val().trim();
if (checkNull(phone)) {
$.ajax({
type: "POST",
url: prefix+"/getGwUserName",
dataType: 'json',
data: {
phone: phone      },
success: function (result) {
if (result.code==web_status.SUCCESS) {
vardata=result.data;
$("#gwUserName").val(data.userName);
//放置memberId用户后面从元数据获取官网订单信息$("#memberId").val(data.memberId);
        }else {
$.modal.alertWarning("未获取到官网用户名，请手动输入");
        }
      }
    });
  }
}

onclick

页面点击事件，这里点击添加在当前容器后拼接新的输入框内容

页面代码

<h3style="float: left;padding-right: 100px;">官网抵扣商品信息</h3><buttontype="button"class="btn btn-w-m btn-primary"onclick="addgw();">添加</button><hr><divid="container"></div><h3>天猫成单信息</h3><hr>

点击事件触发方法addgw()往容器追加代码，可以多次点击添加内容，因此需要记录点击号clicknum用于动态化id，方便后续处理业务逻辑；addgw()方法内容

//点击添加按钮varclicknum=0;
functionaddgw() {
varmemberId=$("#memberId").val();
if (checkNull(memberId)) {
varhtml='<div class="gwdetail">';
html+='<div class="form-group"><label class="col-sm-3 control-label">订单号：</label><div class="col-sm-8"><input type="text" name="orderNo" id="orderNo'+clicknum+'" class="form-control" readonly onclick="getMetaOrders('+clicknum+');"/><input type="hidden" name="metaOrderId" id="metaOrderId'+clicknum+'"/></div></div>';
html+='<div class="form-group"><label class="col-sm-3 control-label">抵扣商品：</label><div class="col-sm-8"><select name="deductionGoodsIds" class="form-control select2-multiple" multiple><option value="">请选择</option></select><button type="button" class="btn btn-w-m btn-primary" onclick="judgeRefund('+clicknum+');">关课/退款</button></div></div>';
html+='<div class="form-group"><label class="col-sm-3 control-label">支付金额：</label><div class="col-sm-8"><input name="gwPaymentAmount" class="form-control" type="text"></div></div>\n';
html+='<div class="form-group"><label class="col-sm-3 control-label">商品是否关课：</label><div class="col-sm-8"><select name="closeClass" class="form-control"><option value="">请选择</option><option value="0">否</option><option value="1">是</option></select></div></div>';
html+='<div class="form-group"><label class="col-sm-3 control-label">抵扣商品是否有退款：</label><div class="col-sm-8"><select name="gwDrawback" class="form-control"><option value="">请选择</option><option value="0">否</option><option value="1">是</option></select></div></div>';
html+='<div class="form-group"><label class="col-sm-3 control-label">抵扣金额：</label><div class="col-sm-8"><input name="deductionAmount" class="form-control" type="text"></div></div><div>---------------------------------------------------------------------</div></div>';
$("#container").append(html);
$("select[name='deductionGoodsIds']").select2();
clicknum++;
  }else {
$.modal.alertWarning("请先填写学员手机号");
  }
}

在addgw()添加页面属性中onclick方法getMetaOrders('+clicknum+')主要是负责跳转到弹层列表页，选择相应的订单号点击确定之后再返回当前弹层页面;

//分页获取当前memberId下订单信息functiongetMetaOrders(num) {
varmemberId=$("#memberId").val();
//var memberId = 34763975;$.modal.open("订单号", prefix+"/getMetaOrders?memberId="+memberId+"&clicknum="+num);
}
//官网抵扣商品是否关课/退款functionjudgeRefund(num) {
var$1=$('#orderNo'+num+'');
varparent=$1.parent().parent().parent();
varorderNo=$1.val();
vargoodsIds=parent.find("select[name='deductionGoodsIds']").val().toString();
//console.log("orderno:"+orderNo);//console.log("goodsIds:"+goodsIds);if (checkNull(orderNo) &&checkNull(goodsIds)) {
$.ajax({
type: "POST",
url: prefix+"/checkOpenClassAndRefundStatus",
dataType: 'json',
data: {
orderNo:orderNo,
goodsIds: goodsIds      },
success: function (result) {
if (result.code==web_status.SUCCESS) {
vardata=result.data;
//console.log(data)//判断开关课状态varfind=parent.find("select[name='closeClass']");
//console.log(find);find.empty();
varhtml='<option value="">请选择</option>';
if (data.openclass==1) {
//全部关课html+='<option value="0">否</option><option value="1" selected>是</option>';
          }else {
//没有全关html+='<option value="0" selected>否</option><option value="1">是</option>';
          }
find.append(html);
varfind2=parent.find("select[name='gwDrawback']");
find2.empty();
varhtml2='<option value="">请选择</option>';
if (data.refund==1) {
//全退html2+='<option value="0">否</option><option value="1" selected>是</option>';
          }else {
//没有全退html2+='<option value="0" selected>否</option><option value="1">是</option>';
          }
find2.append(html2);
        }
      }
    });
  }
}

页面效果就是点击订单号弹层列表页，然后选中订单号点击确定

点击订单号弹层列表页，分页查询

弹层页面点击确定回传至父页面值的方法在弹层页面提交方法中

functionsubmitHandler() {
varid=$.table.selectColumns($.table._option.columns[1].field);
if (id.length==0) {
$.modal.alertWarning("请至少选择一条记录");
return;
  }
varorderNo=$.table.selectColumns($.table._option.columns[2].field);
$.modal.close();
// 父页面的方法// activeWindow().selectUsers();// 父页面的变量varclicknum=$("#clicknum").val();
console.log(id);
console.log(orderNo);
//console.log('#metaOrderId'+clicknum+'');activeWindow().$('#metaOrderId'+clicknum+'').val(id);
activeWindow().$('#orderNo'+clicknum+'').val(orderNo);
activeWindow().getMetaItem(clicknum);
}

页面主要内容相关的就这些，其他的onclick或者onblur事件相似处理即可；

另外编辑页面在应对addgw()方法添加内容回显时采用了ajax返回html页面的处理方式

$(function () {
getGwInfos();
});
//初始化加载官网抵扣商品信息functiongetGwInfos() {
varrecordId=$("#id").val();
varmemberId=$("#memberId").val();
$.ajax({
type: "POST",
url: prefix+"/getGwInfos",
dataType: 'html',
data: {
recordId: recordId,
memberId:memberId    },
success: function (html) {
$("#container").append(html);
vararray=$("#container").find("select[name='deductionGoodsIds']");
array.each(function (i,item) {
//console.log(item)$(item).select2();
      })
//$(".gwdetail").find(".deductionGoodsIds").select2();    }
  });
}

具体的回显html页面代码如下

<divclass="gwdetail"th:each="gw : ${gwInfos}"><inputtype="hidden"name="gwId"id="gwId"th:value="${gw.id}"/><divclass="form-group"><labelclass="col-sm-3 control-label">订单号：</label><divclass="col-sm-8"><inputtype="hidden"name="metaOrderId"th:id="metaOrderId+${gwStat.index}"th:value="${gw.metaOrderId}"/><inputtype="text"name="orderNo"th:id="orderNo+${gwStat.index}"class="form-control"readonlyth:value="${gw.orderNo}"th:onclick="getMetaOrders([[${gwStat.index}]])"/></div></div><divclass="form-group"><labelclass="col-sm-3 control-label">抵扣商品：</label><divclass="col-sm-8"><selectname="deductionGoodsIds"class="form-control select2-multiple"multiple><optionvalue="">请选择</option><optionth:each="item:${gw.items}"th:value="${item.goodsId}"th:selected="${gw.deductionGoodsIds?.contains(item.goodsId)}"th:text="${item.goodsName}"></option></select><buttontype="button"class="btn btn-w-m btn-primary"th:onclick="judgeRefund([[${gwStat.index}]])">关课/退款</button></div></div><divclass="form-group"><labelclass="col-sm-3 control-label">支付金额：</label><divclass="col-sm-8"><inputid="gwPaymentAmount"name="gwPaymentAmount"class="form-control"type="text"th:value="${gw.paymentAmount}"></div></div><divclass="form-group"><labelclass="col-sm-3 control-label">商品是否关课：</label><divclass="col-sm-8"><selectid="closeClass"name="closeClass"class="form-control"><optionvalue="">请选择</option><optionvalue="0"th:selected="${gw.closeClass == 0}">否</option><optionvalue="1"th:selected="${gw.closeClass == 1}">是</option></select></div></div><divclass="form-group"><labelclass="col-sm-3 control-label">抵扣商品是否有退款：</label><divclass="col-sm-8"><selectid="gwDrawback"name="gwDrawback"class="form-control"><optionvalue="">请选择</option><optionvalue="0"th:selected="${gw.drawback == 0}">否</option><optionvalue="1"th:selected="${gw.drawback == 1}">是</option></select></div></div><divclass="form-group"><labelclass="col-sm-3 control-label">抵扣金额：</label><divclass="col-sm-8"><inputid="deductionAmount"name="deductionAmount"class="form-control"type="text"th:value="${gw.deductionAmount}"></div></div><div>---------------------------------------------------------------------</div></div>

这里需要注意的是themleaf页面拼接动态id时的操作

这样的话涉及到themleaf复杂页面事件添加，各种事件交互的操作就完成了，重复的没有多写。

页面参数提交

由于addgw()方法会添加重复的属性名称，因此在提交时需要特殊处理，以list方式添加进提交参数json中提交，页面提交方法代码

functionsubmitHandler() {
vardata=$.common.formToJSON('form-tmUpgradeOrderRecord-add');
//var data = $('#form-tmUpgradeOrderRecord-add').serializeArray();varlist=newArray();
$("div[class='gwdetail']").each(function(i,item){
varmetaOrderId=$(item).find("input[name='metaOrderId']").val();
varorderNo=$(item).find("input[name='orderNo']").val();
vardeductionGoodsIds=$(item).find("select[name='deductionGoodsIds']").val().toString();
vargwPaymentAmount=$(item).find("input[name='gwPaymentAmount']").val();
varcloseClass=$(item).find("select[name='closeClass']").val();
vargwDrawback=$(item).find("select[name='gwDrawback']").val();
vardeductionAmount=$(item).find("input[name='deductionAmount']").val();
vardetail= {"metaOrderId":metaOrderId,"orderNo":orderNo,"deductionGoodsIds":deductionGoodsIds,"paymentAmount":gwPaymentAmount                  ,"closeClass":closeClass,"drawback":gwDrawback,"deductionAmount":deductionAmount};
list.push(detail);
  });
//data.push({"name":"gwlist","value":list});data["gwlist"]=list;
data=JSON.stringify(data);
//console.log(data);if ($.validate.form()) {
$.operate.save2(prefix+"/add", data);
  }
}
// 获取form下所有的字段并转换为json对象formToJSON: function(formId) {
varjson= {};
$.each($("#"+formId).serializeArray(), function(i, field) {
json[field.name] =field.value;
  });
returnjson;
}

其中提交方法中调用的save2()ajax方法需要指定contentType: "application/json; charset=utf-8"，ajax默认的提交方式不支持json格式数据

后端接收参数方法中传参需要加入注解@RequestBody

这样整个过程就完整了，后续如果有需要但是博文没看明白的欢迎留言，一起进步。

themleaf 页面弹层取值

创作背景

themleaf页面事件

onblur

onclick

页面参数提交

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

themleaf 页面弹层取值

创作背景

themleaf页面事件

onblur

onclick

页面参数提交

热门文章

最新文章

相关电子书