EasyUI在表单提交时如何校验数据是否发生变化

Easyui在form表单提交时应该先校验页面数据是否发生改变,之后在提交数据,我提供的方法可以校验Input输入框与combox下拉框的值是否发生变化,另本次使用的input全部是easyui-textbox,使用的下拉框全部为easyui-combobox; 

1.首先添加一个from表单,然后填充内容,要求填充内容时对应的控件需要name属性且与后台返回的json数据中参数一致

<form id="fm" method="post" novalidate style="margin: 0; padding: 20px 50px">

2.定义一个变量,用来存放后台的数据,然后与页面数据比较

var rowData;

3.在页面从后台获取数据后,给什么的变量赋值;

rowData = row;

4.写change函数

首先是input的监听函数,由于easyui框架使用easyui-textBox时会自动隐藏用户的input并生成新的input,所以在获取发生改变的input框的name属性时,需要使用$(this).next("input").attr("name");方法,在比较改变后的input的值与后台获取的值后,使用$("#fm").data("changed",true);方法赋值 

$(function() {
    $("#fm :input").change(function(e){
        var valueName = $(this).next("input").attr("name");
        var dataValue = rowData[valueName];
        var inputValue = e.currentTarget.value;
        if(dataValue == inputValue){
            $("#fm").data("changed",false);  
        }else {
            $("#fm").data("changed",true);  
        }
    });

}

然后是combox 的监听函数,由于监听函数是监听from表单里所有combox。所以需要找到触发函数的是哪一个对象,并获取对象name属性后,比较改变后的combox的值与后台获取的值,然后给change赋值

$("#fm .easyui-combobox").combobox({
        onChange : function(e){
            var valueName = $(this)[0].attributes.comboname.value;
            var selectValue = rowData[valueName];
             if(e == selectValue){
            $("#fm").data("changed",false);  
        }else {
            $("#fm").data("changed",true);  
        } 
        }
    })

5.提交的时候根据change去判断页面数据是否发生改变

 if($("#fm").data("changed")){

$.messager.alert('温馨提示', '发生数据参数变化');

}else{
$.messager.alert('温馨提示', '没有发生数据参数变化');

}

#2023.09.25

逻辑更新:上述的内容在有多处修改源数据时,存在逻辑问题,在上述基础上增加以下逻辑:

新增一个数组变量,或者字符串变量,里面存储发生变化的对象的name或者name加特定字符串拼接的字符串

当数据发生变化时,存入name或者拼接name

当数据变回源数据时,将name从数组或者字符串移除

这样就避免了多次多个数据修改,会影响数据是否发生变化的校验结果

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值