E8-事关明细表里的控件事件绑定、日期的计算、明细表的求和等问题的处理办法

news2024/11/24 6:34:57

起因

下面的讲述的事情是从开发出差申请流程开始的。涉及的知识点偏多,且得容我慢慢梳理出来。以下篇幅可能会有点儿长,但内容我会争取写得精彩的。

图1

发起表单样式如图1,我想实现的是当修改出发日期或结束日期的时候,自动计算时长,时长不能被人为修改。并且时长要有合计。

经过

总结起来,需求还是挺简单的。那就一项一项的来。

一、解决出发日期控件和结束日期控件的事件绑定。

这里建议先读一下《E8-怎么监听表单里的日期控件被修改过_rarenmen的博客-CSDN博客》,这里讲述了关于日期控件的结构,以及需要监听的事件,是本文的一个基础知识点。

* 注:本文中,灰色字体代码为相关但非重点代码,下同。

上文提到的日期控件需要绑定事件
    $("#fieldfield10484span").bind('DOMNodeInserted',function(e){
        alert("444");
    });

 看到这里,引出了第一个问题,明细表里的日期控件的命名格式是“field9442_” + 行号 + “span”的格式,并且表单里有多少明细行,是由用户操作而来的,那么能不能在JQuery的选择器里用变量或模糊匹配呢

其实JQuery是支持选器的模糊匹配的,也测试成功了,适用于这个例子的语法如下,还有其它匹配方式,感兴趣的朋友请自行百度。

选择器模糊匹配

$("span[id^='field10484']").each(function(index,obj){

      $(obj).bind("DOMNodeInserted",function(){
        alert($(obj).attr("id"));
      });

});

 写了个HTML,试了一下,这么写,功能倒是可以实现给页面里现有的所有ID以field10484开头的SPAN标签梆定了事件,但这种方法存在两个问题:1、如果把它放在jQuery(document).ready(function(){});里,实现不了给新增行里的相应日期控件绑定事件,解决办法会在问题二里去说;2、如果这么处理,每次是给页面里所有的符合条件的控件绑定事件,仔细想,其实要做事情是当新增行的时候去给新增行里的日期控件绑定事件,那是给指定控件去绑事件的,看来要把之前的方法升级一下。在热心网友的帮助下,把绑定事件的方法改成了这样。

修改后的绑定事件方法
            for(var i = indexnum0Old;  i < indexnum0New; i++) {
                // 给指定的控件绑定事件
                (function (arg) {
                    jQuery("#field10484_"+arg+"span").bind("DOMNodeInserted", function(){
                        alert($(obj).attr("id"));
                    }); 
                }(i));//匿名function,i是实参
            }//end for

 我个人觉得,这里有两个值得关注的知识点:1、JQuery里的选择器里是要以写变量的;2、有这么一种定义匿名函数的方法,并可以直接给它传递实参。第一个问题聊到这里结束。

二、该选择在什么时候绑定控件的事件

之前提到了,如果在jQuery(document).ready(function(){});里绑定事件,作用对象只会是表单里的现有控件。就是在流程表单里设置的默认的空行里的对应控件被绑定事件了,但用户新增行的对应控件是没有绑定事件的。去分析了一下页面关于明细行的HTML代码,发现明细行是被包含在一个ID叫作detailDiv_0的DIV里。这么说,可以给detailDiv_0绑定DOMNodeInserted事件,当其中内容被改的时候,去绑定日期控件的事件。但这么做也不合适,在实测的时候,发现在点击新增的时候,触发执行了若干次的DOMNodeInserted事件。

明细行有关的HTML代码

 热心网友又给出了一个好方法。页面里有一个ID是indexnum0的控件,保存了内表的行数。可以给它绑定控件。嗯,看起来这是个好办法。这里需要注意,不能绑定change事件,要去绑定bindPropertyChange事件。

id = indexnum0的控件

 整理一下思路,实现给新增行的日期控件绑定事件。

更新一版代码

jQuery(document).ready(function(){
    var indexnum0Old = $("#indexnum0").val() * 1.0; 

    $("#indexnum0").bindPropertyChange(function(){
        var indexnum0New = $("#indexnum0").val() * 1.0;

        // 根据新旧行数的比较,判断是增行还是减行,如果是增行了,做事件绑定
        if(indexnum0New > indexnum0Old) {
            for(var i = indexnum0Old;  i < indexnum0New; i++) {
                // 给指定的控件绑定事件
                (function (arg) {

                    // 开始日期
                    jQuery("#field10484_"+arg+"span").bind("DOMNodeInserted", function(){
                        calculationDays(arg);
                    }); 

                    // 结束日期

                    jQuery("#field10485_"+arg+"span").bind("DOMNodeInserted", function(){
                        calculationDays(arg);
                    }); 
                }(i));//匿名function
                calculationDays(i); //计算天数的方法,
            }//end for
        }//end if
        indexnum0Old = indexnum0New;
    });//bindPropertyChange
});

以上代码里,calculationDays(i)是计算从开始日期到结束日期间,一共多少天,在给日期控件绑定了事件之后,调用一次这个方法,主要是解决在默认的空行里,只有默认开始日期和结束日期,但没有天数的问题。

三、怎么能让“时长”不被修改

明细表里有个字段,叫“时长”,记录从开始日期到结束日期间,一共的天数。

从需求的字面意思来看,这个问题非常简单,把“时长”设置成只读就好了。最简单的解决办法确实是这样,但新问题又来了。当用$("#field10486_" + line).val(totalDays);给“时长”赋值的时候,前台没有效果。看页面的源码可以发现,当控件属性被设置成“只读”的时候,<input>标签是存在但被隐藏的,应该是用作和后台的信息交互,用户所看到的内容其实是展示在对应的<span>标签里的文本。

只读控件的HTML结构

情况了解了,那么处理的方法也就有了。<input>控件正常赋值,判断<span>控件存不存在,如果存在,修改一下它其中的文字就好了。

代码

        $("#field10486_" + line).val(totalDays);

        if($("#field10486_" + line + "span").length>0){ // 判断<span>标签是否存在
            $("#field10486_" + line + "span").html(totalDays);
        }

四、“时长”变了,但“合计”不变怎么办

初发现这情况的时候,以为是由于“时长”设置成了“只读”造成的。这里可以说一句“实则不然”,但也有关系,当把“时长”设置成“编辑”的时候,在控件的onChange事件里有一个calSum(0)的方法,它是负责计算合计行的。参数里的0,我猜是和detailDiv_0里的0同样是代表的是第一个明细表。在用JS给"时长"对应的<input>控件赋值后,再调用一下这个方法,就可以实现计算合计。可能有些小伙伴会想,如果“时长”是可编辑的,是不是就没有这个问题了。其实在用JS去修改<input>控件的值时,onChange事件是不被触发的,依然会有同样问题。

到此,遇到的问题都讲述完了。整体粘一下代码。

<script type="text/javascript">
jQuery(document).ready(function(){
    var indexnum0Old = $("#indexnum0").val() * 1.0;

    $("#indexnum0").bindPropertyChange(function(){
        var indexnum0New = $("#indexnum0").val() * 1.0;

        // 根据新旧行数的比较,判断是增行还是减行,如果是增行了,做事件绑定
        if(indexnum0New > indexnum0Old) {
            for(var i = indexnum0Old;  i < indexnum0New; i++) {
                // 给指定的控件绑定事件
                (function (arg) {

                   // 开始日期
                    jQuery("#field10484_"+arg+"span").bind("DOMNodeInserted", function(){
                        calculationDays(arg);
                    }); 

                   // 结束日期
                    jQuery("#field10485_"+arg+"span").bind("DOMNodeInserted", function(){
                        calculationDays(arg);
                    }); 
                }(i));//匿名function
                calculationDays(i);
            }//end for
        }//end if
        indexnum0Old = indexnum0New;
    });//bindPropertyChange
});

// 根据行号,取开始日期和结束日期,计算时长
function  calculationDays(line) {
    if(line >= 0) {
        var beginDateStr = $("#field10484_" + line).val();
        var endDateStr =  $("#field10485_" + line).val();
        var totalDays, diffDate;
        var beginDate = Date.parse(beginDateStr);
        var endDate = Date.parse(endDateStr);
        diffDate = Math.abs(endDate - beginDate);
        totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) + 1;
        $("#field10486_" + line).val(totalDays);

        // 触发计算合计的方法
        calSum(0);

        if($("#field10486_" + line + "span").length>0){
            $("#field10486_" + line + "span").html(totalDays);
        }
    }
}
</script>

结果

功能实现完成,至于知识点,这里先不整理了,有砖要搬,请小伙伴们自行归纳。

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

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

相关文章

并发-synchronized详解

JDK1.6之前的synchronized关键字一来就直接给对象加了一把重量级锁&#xff0c;频繁地在用户态和内核态之间切换&#xff0c;导致性能非常低。为了弥补synchronized的不足&#xff0c;大佬doug lee写了一个AQS框架&#xff0c;用Java语言实现了ReentrantLock。然后在JDK1.6之后…

电脑文件夹怎么设置密码?3个方法为文件加密!

我的电脑里存了很多重要的文件夹&#xff0c;为了防止信息的泄露&#xff0c;我想把这些文件夹都设置密码。但是不知道具体应该如何操作。请求大家的帮助&#xff01; 我们平常在使用电脑时&#xff0c;可能会将很多重要的文件保存在电脑中。如果不想让别人看到我们这些重要的文…

JMeter安装RabbitMQ测试插件

目录 前言&#xff1a; 具体实现步骤&#xff1a; 1、ant环境搭建 2、AMQP源码下载 3、拷贝JMeter_core.jar包到JMeter-Rabbit-AMQP插件根目录下 4、修改AMQP插件的配置文件 5、打包 6、RabbitMQ客户端插件下载 7、完成以上&#xff0c;重启JMeter创建线程组就可以看到…

智能小家电如何升级Type-C接口充电?

目前市面上智能小家电充电接口还是USB Micor&#xff0c;AC&#xff0c;DC接口等&#xff0c;今年随着欧盟的一纸令下&#xff0c;22年12月24日&#xff0c;欧洲理事会最终批准了“在欧盟范围内统一充电器接口”的法案。这意味着到2024年&#xff0c;usb type-c接口将成为一系列…

openknx初编译

knx协议出来也是很长时间了&#xff0c;但国内相关开发的文章很少&#xff0c;比起zigbee,lora这些网上一搜一大零的&#xff0c;显得可怜。因为公司以后可能会开发knx产品&#xff0c;所以对国外的openknx自已研究了一下。 https://github.com/thelsing/knx 这个就是openknx项…

Openlayers实战,Openlayers调整地图可视范围到多个点组成的多边形边界,可视范围缩放到多个点的中心点

专栏目录: OpenLayers入门教程汇总目录 前言 本片文章详细讲解如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。 也即Openlayers根据多个点坐标生成一个矩形可视范围,并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内,则调整地图中…

latex中两种图并排放,而且各自有小标题caption

\begin{figure*}[htbp] \centering #小标题 \subfigure[Case study in terms of interpretability on dataset HDep3.]{ \begin{minipage}[t]{0.37\linewidth} %linewidth小于0.5 \centering \includegraphics[scale0.2]{figures/hdep3d.png} #大小主要调节scale. %\caption{fi…

Blazor前后端框架Known-V1.2.1

V1.2.1 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 概述 基于C#和Blazor实现的快速开发框架&#xff0c;前后端分离&#xff0c;开箱即用。跨平台&#xff0c;单页应用&#xff…

耳挂式骨传导耳机哪个牌子好,分享几个品牌的骨传导耳机

骨传导耳机就是利用震动来传递声音的耳机&#xff0c;在运动时佩戴骨传导耳机&#xff0c;可以听歌也能听周围的声音&#xff0c;提高了运动时的安全性。目前市面上的骨传导耳机也是琳琅满目。今天就来给大家分享下目前市面上比较常见的几款骨传导耳机。希望对正在选购骨传导耳…

Linux v4l2框架分析

1. 概述 V4L2(Video for Linux 2)&#xff1a;Linux内核中关于视频设备驱动的框架&#xff0c;对上向应用层提供统一的接口&#xff0c;对下支持各类复杂硬件的灵活扩展&#xff1b; V4L2框架&#xff0c;主要包括v4l2-core、meida framework、videobuf2等模块&#xff0c;这也…

120.【ElastiSearch】

ElasticSearch-初级 (一)、什么是ElasticSearch(库、表、记录)1.ElasticSearch是什么2.ElasticSearch学习路线3.聊聊Doug Cutting4.Lucene 和 ElasticSearch的关系: (二)、ElasticSearch概述1.基本概述2.百度搜索关键字思考3.目前都有哪些公司在用ElasticSearch技术 (三)、ES和…

检验样本是否服从泊松分布

本文以一个订单数据为例&#xff0c;研究顾客购买次数的分布规律&#xff0c;尝试从中估计总体的分布&#xff0c;以对后续的订单数据进行预测或进行业绩的对比。 # 环境准备 import numpy as np import pandas as pd import scipy.stats as stats import matplotlib.pyplot a…

Nginx(3)nginx的Rewrite功能

nginx跨域 Rewrite功能配置Rewrite的相关命令Rewrite的案例域名跳转域名镜像独立域名目录自动添加/合并目录防盗链 Rewrite功能配置 Rewrite是Nginx服务器提供的一个重要基本功能&#xff0c;是Web服务器产品中几乎必备的功能。主要的作用是用来实现URL的重写。 注意:Nginx服…

AI生成图片检测器接口,应用于内容审核、虚拟现实应用和促进艺术及设计领域创新等场景

【检测率99.0%以上】可以快速准确地判断一张图片是否为AI生成&#xff0c;减少人工审核的工作量&#xff0c;提高工作效率、降低运营成本&#xff0c;帮助人们更好地管理和利用数字图像资源。广泛应用于内容审核、虚拟现实应用和促进艺术及设计领域创新等场景。 一、效果展示 …

Unity学习笔记--EventSystem事件系统在使用上需要注意的地方(很基础,但是很多人会忘记!!!)

目录 前言代码Unity 场景配置运行报错分析解决办法拓展&#xff08;预告&#xff09; 前言 之前有写过一篇关于事件系统实现以及使用的文章 Unity学习笔记–C#事件系统的实现与应用 最近在使用的时候遇到了一些问题&#xff0c;所以在此记录下&#xff0c;也为看到这篇文章的人…

魏副业而战:视频带货借助热点,这个账号月赚20w+

我是魏哥&#xff0c;与其在家躺平&#xff0c;不如魏副业而战&#xff01; 最近魏哥一直在研究短视频&#xff0c;每天刷刷抖音&#xff0c;经常刷到高考相关的视频。 本来高考跟我没关&#xff0c;毕竟孩子还小&#xff0c;但是刷得多了&#xff0c;魏哥发现有情况。 像这个…

oneAPI人工智能分析工具包实现图像处理

文章目录 一、oneAPI的介绍二、oneAPI实现图像处理环境配置加载预训练模型和网络创建IECore对象和设备插件准备输入数据执行推理总结 一、oneAPI的介绍 oneAPI是一个由英特尔&#xff08;Intel&#xff09;主导的、面向异构计算的开放标准和平台。它旨在简化和加速跨多种硬件架…

体验攻略 | 新时代的用研人,没有它不行

用户研究&#xff08;以下简称“用研”&#xff09;是随着互联网兴起和发展、从体验设计领域进一步分化出来的岗位。在互联网公司&#xff0c;用研岗位更多以用户体验为导向&#xff0c;主要工作为洞察用户的需求、行为和动机&#xff0c;为产品开发和服务设计提供指导性意见。…

DNS解析:连接互联网的关键步骤

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。&#x1f60a; 座右铭&#xff1a;不想…

C语言多组输入问题

目录 前言 scanf返回值介绍&#xff1a; EOF又是什么&#xff1f; 一、scanf的返回值等于输入参数的个数 二、scanf的返回值不等于EOF 三、对scanf的返回值按位取反&#xff08;~&#xff09; 如何结束&#xff1f; 前言 如果您经常刷题就一定碰到过多组输入的问题&#…