themleaf 页面弹层取值

themleaf 页面弹层取值

  • 创作背景
  • themleaf页面事件
    • onblur
    • onclick
  • 页面参数提交

创作背景

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

themleaf页面事件

onblur

离焦事件,页面输入框输入手机号离焦后触发ajax请求后台自动获取官网用户名并赋值在页面上,页面如图
在这里插入图片描述
页面代码

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

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

//获取官网用户名function getGwUserName() {var phone = $("#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) {var data = result.data;$("#gwUserName").val(data.userName);//放置memberId用户后面从元数据获取官网订单信息$("#memberId").val(data.memberId);}else {$.modal.alertWarning("未获取到官网用户名,请手动输入");}}});}}

onclick

页面点击事件,这里点击添加在当前容器后拼接新的输入框内容
在这里插入图片描述
页面代码

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

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

//点击添加按钮var clicknum = 0;function addgw() {var memberId = $("#memberId").val();if (checkNull(memberId)) {var html = '<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下订单信息function getMetaOrders(num) {var memberId = $("#memberId").val();//var memberId = 34763975;$.modal.open("订单号", prefix + "/getMetaOrders?memberId="+memberId+"&clicknum="+num);}//官网抵扣商品是否关课/退款function judgeRefund(num) {var $1 = $('#orderNo'+num+'');var parent = $1.parent().parent().parent();var orderNo = $1.val();var goodsIds = 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) {var data = result.data;//console.log(data)//判断开关课状态var find = parent.find("select[name='closeClass']");//console.log(find);find.empty();var html = '<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);var find2 = parent.find("select[name='gwDrawback']");find2.empty();var html2 = '<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);}}});}}

页面效果就是点击订单号弹层列表页,然后选中订单号点击确定
在这里插入图片描述
点击订单号弹层列表页,分页查询
在这里插入图片描述
弹层页面点击确定回传至父页面值的方法在弹层页面提交方法中

function submitHandler() {var id = $.table.selectColumns($.table._option.columns[1].field);if (id.length == 0) {$.modal.alertWarning("请至少选择一条记录");return;}var orderNo = $.table.selectColumns($.table._option.columns[2].field);$.modal.close();// 父页面的方法// activeWindow().selectUsers();// 父页面的变量var clicknum = $("#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();});//初始化加载官网抵扣商品信息function getGwInfos() {var recordId = $("#id").val();var memberId = $("#memberId").val();$.ajax({type: "POST",url: prefix + "/getGwInfos",dataType: 'html',data: {recordId: recordId,memberId:memberId},success: function (html) {$("#container").append(html);var array = $("#container").find("select[name='deductionGoodsIds']");array.each(function (i,item) {//console.log(item)$(item).select2();})//$(".gwdetail").find(".deductionGoodsIds").select2();}});}

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

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

这里需要注意的是themleaf页面拼接动态id时的操作
在这里插入图片描述
这样的话涉及到themleaf复杂页面事件添加,各种事件交互的操作就完成了,重复的没有多写。

页面参数提交

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

function submitHandler() {var data = $.common.formToJSON('form-tmUpgradeOrderRecord-add');//var data = $('#form-tmUpgradeOrderRecord-add').serializeArray();var list= new Array();$("div[class='gwdetail']").each(function(i,item){var metaOrderId = $(item).find("input[name='metaOrderId']").val();var orderNo = $(item).find("input[name='orderNo']").val();var deductionGoodsIds = $(item).find("select[name='deductionGoodsIds']").val().toString();var gwPaymentAmount = $(item).find("input[name='gwPaymentAmount']").val();var closeClass = $(item).find("select[name='closeClass']").val();var gwDrawback = $(item).find("select[name='gwDrawback']").val();var deductionAmount = $(item).find("input[name='deductionAmount']").val();var detail = {"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) {var json = {};$.each($("#" + formId).serializeArray(), function(i, field) {json[field.name] = field.value;});return json;}

其中提交方法中调用的save2()ajax方法需要指定contentType: “application/json; charset=utf-8”,ajax默认的提交方式不支持json格式数据
在这里插入图片描述
后端接收参数方法中传参需要加入注解@RequestBody
在这里插入图片描述
这样整个过程就完整了,后续如果有需要但是博文没看明白的欢迎留言,一起进步。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/27482.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

10 SpringBoot 静态资源访问

我们在开发Web项目的时候&#xff0c;往往会有很多静态资源&#xff0c;如html、图片、css等。那如何向前端返回静态资源呢&#xff1f; 以前做过web开发的同学应该知道&#xff0c;我们以前创建的web工程下面会有一个webapp的目录&#xff0c;我们只要把静态资源放在该目录下…

从零手写实现 nginx-23-nginx 对于 cookie 的操作

前言 大家好&#xff0c;我是老马。很高兴遇到你。 我们为 java 开发者实现了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何处理的&#xff0c;可以参考我的另一个项目&#xff1a; 手写从零实现简易版 tomcat minicat 手写 nginx 系列 …

信号与系统实验MATLAB-实验2-连续时间系统的时域分析

实验二 连续时间系统的时域分析 一、实验目的 1、掌握连续时间信号卷积及其MATLAB实现方法&#xff1b; 2、掌握连续系统的冲激响应、阶跃响应及其MATLAB实现方法&#xff1b; 3、掌握利用MATLAB求LTI系统响应的方法&#xff1b; 4、掌握利用MATLAB求函数卷积和解微分方程…

网络IO模型:BIO NIO AIO 的区别!!!

BIO是同步阻塞I/O模型&#xff0c;它使用一个线程来处理一个请求&#xff0c;如果这个请求没有被处理完&#xff0c;这个线程就会一直等待&#xff0c;直到请求处理完成。这种模型适用于连接数较小的情况。 NIO是同步非阻塞I/O模型&#xff0c;它使用单个线程来处理多个请求&a…

APM之:卡顿监控

方案一&#xff1a;参考了ANR-WatchDog机制 ANR-WatchDog机制原理不复杂&#xff0c;它内部启动了一个子线程&#xff0c;定时通过主线程Handler发送Message&#xff0c;然后定时去检查Message的处理结果。 通俗来说就是利用了Android系统MessageQueue队列的排队处理特性。 …

学习grdecl文件格式之后的事情

学习了grdecl文件格式&#xff0c;搞地质的专业人士都知道&#xff0c;这是专门用在地质上的油藏软件&#xff08;个人感觉就是斯伦贝谢的Petrel的&#xff09;的一种文件格式&#xff0c;正好自己也在学习三维的开发&#xff0c;顺手写了一个简单的读取grdecl算法&#xff0c;…

Vue3【十九】自定义Hooks钩子 将数据和方法分组

Vue3【十九】自定义Hooks钩子 将数据和方法分组 Vue3【十九】自定义Hooks钩子 将数据和方法分组 每个分组都可以放置 各种生命周期钩子 分组和可以使用计算属性等 案例截图 目录结构 代码 person.vue <template><div class"person"><h2>Vue3自定…

Linux指令学习(4)

目录 0.普通用户和root用户之间的切换 1.head/tail指令 2.管道 3.date命令 4.三个查找相关的指令 5.文件过滤grep 6.打包和压缩 5.zip/unzip指令 0.普通用户和root用户之间的切换 &#xff08;1&#xff09;这个我们之前不是经常使用这个root用户吗&#xff0c;现在随着…

NLP--逻辑回归

1.定义 如何解决二元分类问题&#xff0c;除了上节我们谈到的贝叶斯分类器&#xff0c;我们可以通过计算数据属于不同类别的概率进行分类的逻辑回归。虽然有回归二字&#xff0c;但逻辑回归解决的是分类问题&#xff0c;也可以用于两类以上的多分类问题。 2.方法 概率是介于0到…

python操作jenkins

参考链接&#xff1a; python操作jenkins

数据结构笔记39-48

碎碎念&#xff1a;想了很久&#xff0c;不知道数据结构这个科目最终该以什么笔记方式呈现出来&#xff0c;是纸质版还是电子版&#xff1f;后来想了又想&#xff0c;还是电子版吧&#xff1f;毕竟和计算机有关~&#xff08;啊哈哈哈哈哈哈哈&#xff09; 概率论已经更新完了&…

代码随想录训练营第八天 151反转字符串中的单词 右旋字符串

第一题&#xff1a; 原题链接&#xff1a;151. 反转字符串中的单词 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 先把首尾的空格去掉&#xff1a;找到第一个不是空格的字符&#xff0c;找到最后一个不是空格的字符。substr字符串为新的字符串t。 使用双指针&…

【Python入门与进阶】Jupyter Notebook配置与优化

目录 1.Jupyter Notebook简介 2.Jupyter Notebook的安装 2.1 命令行安装 2.2 可视化界面安装 3.Jupyter Notebook的使用 3.1 启动 Jupyter Notebook 3.2 Jupyter Notebook 界面介绍 3.3 创建新的 Notebook 3.4 编写和运行代码单元 3.5 使用 Markdown 编写文档 3.6 保…

快慢指针在字符串中的应用-443. 压缩字符串

题目链接及描述 443. 压缩字符串 - 力扣&#xff08;LeetCode&#xff09; 题目分析 这个题目总体不算太难&#xff0c;如果之前接触过双指针&#xff08;快慢指针&#xff09;的话&#xff0c;比较好做。题目可以理解为计算数组中对应各个连续字符出现的次数&#xff0c;并将…

SAPUI5基础知识5 - 控件(control)的使用

1. 背景 在SAPUI5中&#xff0c;控件&#xff08;Control&#xff09;是构建用户界面的基本元素。控件是一个可重用的组件&#xff0c;它可以与用户进行交互或显示信息。 每个控件都有自己的特性&#xff0c;例如属性&#xff08;Properties&#xff09;、聚合&#xff08;Agg…

btrace:binder_transaction+eBPF+Golang实现通用的Android APP动态行为追踪工具

一、简介&#xff1a; 在进行Android恶意APP检测时&#xff0c;需要进行自动化的行为分析&#xff0c;一般至少包括行为采集和行为分析两个模块。其中&#xff0c;行为分析有基于规则、基于机器学习、基于深度学习甚至基于大模型的方案&#xff0c;各有各的优缺点&#xff0c;不…

CentOS 7基础操作14_Linux组账号管理

在5.1.2节学习了管理Linux操作系统中用户账号的相关命令&#xff0c;接下来继续学习组账号管理的相关命令。组账号管理命令的使用相对较少&#xff0c;主要包括groupadd、groupdel、gpasswd等。 对于用户账号来说&#xff0e;对应的组账号可分为基本组和附加组两种类型&#xf…

【AI开发】LangGraph基础

在LangGraph中有三个重要元素 StateGraphNodeEdge StateGraph 首先stategraph是用来描述整个图的&#xff0c;图中的状态会随着多个agent的工作不断的更新&#xff0c;节点node就是用来更新状态的 如何来定义一张图中的状态 每个应用的状态可能不同&#xff0c;所以我们需要…

kettle实时增量同步mysql数据

** 本文主要介绍运用kettle实时增量同步mysql数据 ** Debezium介绍 官网地址&#xff1a;https://debezium.io/documentation/ Debezium是一个开源项目&#xff0c;为捕获数据更改(Capture Data Change,CDC)提供了一个低延迟的流式处理平台&#xff0c;通过安装配置Debeziu…