表格里，如何实现input失去焦点事件

标签：index val 表格 焦点 value common var input sprintf

 

一诺佳人 创建于   2020-09-02 13:33  

大佬，请问表格的input框内怎么实现动态失去焦点事件，例如填写数量和单价，金额自动生成，

 

我在formatter里写了，如下，但是不是自动触发，是点击新增按钮，才会自动计算一次。

 

 

     

参考代码

表格字段

{
    field: 'weight',
    align: 'center',
    title: '商品重量',
    formatter: function(value, row, index) {
	var html = $.common.sprintf("<input class='form-control weight' type='text' name='goods[%s].weight' data-index='%s' value='%s'>", index,index, value);
	return html;
    }
},
{
    field: 'price',
    align: 'center',
    title: '商品价格',
    formatter: function(value, row, index) {
	var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].price' value='%s'>", index, value);
	return html;
    }
},

 

动态添加事件

$("body").on("input propertychange",".weight",function(){
    var value = $(this).val();
    var index = $(this).data("index");
    $("input[name='" + $.common.sprintf("goods[%s].price",index) + "']").val(value * 10);
})

 

失去焦点事件

$("body").on("blur",".weight",function(){
    var value = $(this).val();
    var index = $(this).data("index");
    $("input[name='" + $.common.sprintf("goods[%s].price",index) + "']").val(value * 10);
})

       

参考代码
表格字段

{
field: 'weight',
align: 'center',
title: '商品重量',
formatter: function(value, row, index) {
var html = $.common.sprintf("<input class='form-control weight' type='text' name='goods[%s].weight' data-index='%s' value='%s'>", index,index, value);
return html;
}
},
{
field: 'price',
align: 'center',
title: '商品价格',
formatter: function(value, row, index) {
var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].price' value='%s'>", index, value);
return html;
}
},

 

动态添加事件

$("body").on("input propertychange",".weight",function(){
var value = $(this).val();
var index = $(this).data("index");
$("input[name='" + $.common.sprintf("goods[%s].price",index) + "']").val(value * 10);
})

 

失去焦点事件

$("body").on("blur",".weight",function(){
var value = $(this).val();
var index = $(this).data("index");
$("input[name='" + $.common.sprintf("goods[%s].price",index) + "']").val(value * 10);
})

 

@Ricky var index = $(this).data("index"); 这个获取的index为undefined，我要怎么调整下这句？谢谢

    Ricky 成员 3年前  

@Ricky var index = $(this).data("index"); 这个获取的index为undefined，我要怎么调整下这句？谢谢

@一诺佳人

var html = $.common.sprintf("<input class='form-control weight' type='text' name='goods[%s].weight' data-index='%s' value='%s'>", index,index, value);
这里定义了，这只是给你参考，要怎么改，看你自己的业务情况

    一诺佳人 3年前  

@一诺佳人
var html = $.common.sprintf("<input class='form-control weight' type='text' name='goods[%s].weight' data-index='%s' value='%s'>", index,index, value);
这里定义了，这只是给你参考，要怎么改，看你自己的业务情况

@Ricky
请问，根据您的代码提示，我想问下失去焦点事件最后赋值的.val(val10),这个10，我改成如下代码qty 和price，amt=qtyprice,做了2个失去焦点事件，amt的赋值不能成功，还请再指导下，非常感谢大佬。

// 失去焦点事件
$("body").on("blur",".qty",function(){
    var value = $(this).val();   ==>能取值
    var index = $(this).data("index");==>能取值
    var price = $("input[name='" + $.common.sprintf("sysPdList[%s].price",index) + "']").val();==>能取值
    price==null||price==""?$("input[name='" + $.common.sprintf("sysPdList[%s].amt",index) + "']").val("0"):$("input[name='" + $.common.sprintf("sysPdList[%s].amt",index) + "']").val(value * price);
})   ====>不能取值

// 失去焦点事件
$("body").on("blur",".price",function(){
    var value = $(this).val();
    var index = $(this).data("index");
    var qty = $("input[name='" + $.common.sprintf("sysPdList[%s].qty",index) + "']").val();
   
    qty==null||qty==""?$("input[name='" + $.common.sprintf("sysPdList[%s].amt",index) + "']").val("0"):$("input[name='" + $.common.sprintf("sysPdList[%s].amt",index) + "']").val(value * qty);
})

      Ricky 成员 3年前  

@Ricky
请问，根据您的代码提示，我想问下失去焦点事件最后赋值的.val(val10),这个10，我改成如下代码qty 和price，amt=qtyprice,做了2个失去焦点事件，amt的赋值不能成功，还请再指导下，非常感谢大佬。
// 失去焦点事件
("body").on("blur",".qty",function()varvalue=$(this).val();==>能取值varindex=$(this).data("index");==>能取值varprice=$("input[name=′"+$.common.sprintf("sysPdList[price==null||price==""?$("input[name=′"+$.common.sprintf("sysPdList[)====>不能取值//失去焦点事件

("body").on("blur",".price",function(){
var value = (this).val();varindex=(this).data("index");
var qty = ("input[name=′"+.common.sprintf("sysPdList[%s].qty",index) + "']").val();
qty==null||qty==""?("input[name=′"+.common.sprintf("sysPdList[%s].amt",index) + "']").val("0"):("input[name=′"+

.common.sprintf("sysPdList[%s].amt",index) + "']").val(value * qty);
})

@一诺佳人 好好看看第一次给你的代码示例，剩下的问题都是js基础了，自己查一查怎么使用js

    一诺佳人 3年前  

@一诺佳人 好好看看第一次给你的代码示例，剩下的问题都是js基础了，自己查一查怎么使用js

@Ricky

感谢，已经解决了。非常感谢指导。

标签：index,val,表格,焦点,value,common,var,input,sprintf
From： https://www.cnblogs.com/chuangsi/p/17342232.html