EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他



/******************************************************** 主要用于 明细表格 字段间的计算  Start ******************************************************/
    /**
     * 将 bindGridEvent() 函数 放在 明细表格,新增行 或 编辑 行事件之后调用即可,由于 每个业务表单的字段名称,及算法不一致,因此仅在单个模块中实现,其他模块需要可复制此代码进行修改
     * @author WUYF
     * @date 2014-03-22 
     */
    
    
    /**
     * 绑定 表格 事件 
     * @author WUYF
     */
    function bindGridEvent()
    {
        try
        {
            var objGrid = $("#customerStock");        // 表格对象
            var invQtyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invQty'});            // 数量
            var invSaleCostEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invSaleCost'});    // 产品单价
            var discountEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'discount'});        // 折扣额对象
            var depositEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'deposit'});            // 折扣率对象
            var invMoneyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'invMoney'});        // 金额对象
            
            // 数量  绑定 离开事件 
            $(invQtyEdt.target).bind("blur",function(){
                calcMoney();        // 根据 数量或单价变更后计算 金额
            });
            
            // 单价  绑定 离开事件 
            $(invSaleCostEdt.target).bind("blur",function(){
                calcMoney();        // 根据 数量或单价变更后计算 金额
            });
            
            // 折扣额  绑定 离开事件 
            $(discountEdt.target).bind("blur",function(){
                calcDiscount();        // 根据 折扣额变更后  计算 折扣率
            });
            
            // 折扣率  绑定离开事件 
            $(depositEdt.target).bind("blur",function(){
                calcDeposit();        // 根据 折扣率变更后 计算 折扣额
            });
            
            // 金额 绑定离开事件 
            $(invMoneyEdt.target).bind("blur",function(){
                calcMoneyChange();    // 金额变更 后 重新计算  单价,折扣额,折扣率
            });
            
        }
        catch(e)
        {
            alert(e);
        }
    }
    
    /**
     * 金额变更 后 重新计算  单价,折扣额,折扣率
     */
    function calcMoneyChange()
    {
        var objGrid = $("#customerStock");        // 表格对象
        var invQtyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invQty'});            // 数量对象
        var invSaleCostEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invSaleCost'});    // 单价对象
        var invMoneyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'invMoney'});        // 金额对象
        var discountEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'discount'});        // 折扣额对象
        
        var invQtyValue = $(invQtyEdt.target).val();                // 数量 值
        var invMoneyValue = $(invMoneyEdt.target).val();            // 金额  值
        var invSaleCostValue = invMoneyValue / (invQtyValue*1.0);    // 单价 值
        var discountValue = $(discountEdt.target).val();            // 折扣额 值
        
        $(invSaleCostEdt.target).numberbox("setValue",invSaleCostValue);    // 给 单价  赋值

        if( discountValue == 0){
            $(discountEdt.target).numberbox("setValue",invMoneyValue);        // 给 折扣额  赋值
        }
        calcDiscount();                                            // 根据 折扣额 计算 折扣率

    }
    
    /**
     * 根据 数量或单价变更后计算 金额
     * @author WUYF
     */
    function calcMoney()
    {
         var objGrid = $("#customerStock");        // 表格对象
        var invQtyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invQty'});            // 数量对象
        var invSaleCostEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invSaleCost'});    // 单价对象
        var invMoneyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'invMoney'});        // 金额对象
        var discountEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'discount'});        // 折扣额对象
        
        var invQtyValue = $(invQtyEdt.target).val();                // 数量 值
        var invSaleCostValue = $(invSaleCostEdt.target).val();        // 单价 值
        var invMoneyValue = invQtyValue * invSaleCostValue;            // 金额  值
        var discountValue = $(discountEdt.target).val();            // 折扣额 值
        
        $(invMoneyEdt.target).numberbox("setValue",invMoneyValue);    // 给 金额  赋值

        if( discountValue == 0){
            $(discountEdt.target).numberbox("setValue",invMoneyValue);    // 给折扣额 赋值
            calcDiscount();
        }
        else{
            calcDiscount();
        }
        
    }

    /**
     * 根据 折扣额变更后  计算 折扣率
     * @author WUYF
     */
    function calcDiscount(){
        var objGrid = $("#customerStock");        // 表格对象
        var invMoneyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invMoney'});    // 金额对象
        var discountEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'discount'});    // 折扣额对象
        var depositEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'deposit'});        // 折扣率对象
        
        var invMoneyValue = $(invMoneyEdt.target).val();            // 金额值
        var discountValue = $(discountEdt.target).val();            // 折扣额 值
        var depositValue = discountValue / (invMoneyValue * 1.0);    // 折扣率 值
        
        $(depositEdt.target).numberbox("setValue",depositValue);    // 给折扣率 赋值
    }
    
    /**
     * 根据 折扣率变更后 计算 折扣额
     * @author WUYF
     */
    function calcDeposit(){
        var objGrid = $("#customerStock");        // 表格对象
        var invMoneyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invMoney'});    // 金额对象
        var discountEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'discount'});    // 折扣额对象
        var depositEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'deposit'});        // 折扣率对象
        
        var invMoneyValue = $(invMoneyEdt.target).val();            // 金额值
        var depositValue = $(depositEdt.target).val();                // 折扣率 值
        var discountValue = invMoneyValue * depositValue;            // 折扣额 值

        
        $(discountEdt.target).numberbox("setValue",discountValue);    // 折扣额  赋值
    }
    
    /******************************************************** 主要用于 明细表格 字段间的计算  End ******************************************************/
复制代码
/******************************************************** 主要用于 明细表格 字段间的计算  Start ******************************************************/
    /**
     * 将 bindGridEvent() 函数 放在 明细表格,新增行 或 编辑 行事件之后调用即可,由于 每个业务表单的字段名称,及算法不一致,因此仅在单个模块中实现,其他模块需要可复制此代码进行修改
     * @author WUYF
     * @date 2014-03-22 
     */
    
    
    /**
     * 绑定 表格 事件 
     * @author WUYF
     */
    function bindGridEvent()
    {
        try
        {
            var objGrid = $("#customerStock");        // 表格对象
            var invQtyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invQty'});            // 数量
            var invSaleCostEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invSaleCost'});    // 产品单价
            var discountEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'discount'});        // 折扣额对象
            var depositEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'deposit'});            // 折扣率对象
            var invMoneyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'invMoney'});        // 金额对象
            
            // 数量  绑定 离开事件 
            $(invQtyEdt.target).bind("blur",function(){
                calcMoney();        // 根据 数量或单价变更后计算 金额
            });
            
            // 单价  绑定 离开事件 
            $(invSaleCostEdt.target).bind("blur",function(){
                calcMoney();        // 根据 数量或单价变更后计算 金额
            });
            
            // 折扣额  绑定 离开事件 
            $(discountEdt.target).bind("blur",function(){
                calcDiscount();        // 根据 折扣额变更后  计算 折扣率
            });
            
            // 折扣率  绑定离开事件 
            $(depositEdt.target).bind("blur",function(){
                calcDeposit();        // 根据 折扣率变更后 计算 折扣额
            });
            
            // 金额 绑定离开事件 
            $(invMoneyEdt.target).bind("blur",function(){
                calcMoneyChange();    // 金额变更 后 重新计算  单价,折扣额,折扣率
            });
            
        }
        catch(e)
        {
            alert(e);
        }
    }
    
    /**
     * 金额变更 后 重新计算  单价,折扣额,折扣率
     */
    function calcMoneyChange()
    {
        var objGrid = $("#customerStock");        // 表格对象
        var invQtyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invQty'});            // 数量对象
        var invSaleCostEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invSaleCost'});    // 单价对象
        var invMoneyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'invMoney'});        // 金额对象
        var discountEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'discount'});        // 折扣额对象
        
        var invQtyValue = $(invQtyEdt.target).val();                // 数量 值
        var invMoneyValue = $(invMoneyEdt.target).val();            // 金额  值
        var invSaleCostValue = invMoneyValue / (invQtyValue*1.0);    // 单价 值
        var discountValue = $(discountEdt.target).val();            // 折扣额 值
        
        $(invSaleCostEdt.target).numberbox("setValue",invSaleCostValue);    // 给 单价  赋值

        if( discountValue == 0){
            $(discountEdt.target).numberbox("setValue",invMoneyValue);        // 给 折扣额  赋值
        }
        calcDiscount();                                            // 根据 折扣额 计算 折扣率

    }
    
    /**
     * 根据 数量或单价变更后计算 金额
     * @author WUYF
     */
    function calcMoney()
    {
         var objGrid = $("#customerStock");        // 表格对象
        var invQtyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invQty'});            // 数量对象
        var invSaleCostEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invSaleCost'});    // 单价对象
        var invMoneyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'invMoney'});        // 金额对象
        var discountEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'discount'});        // 折扣额对象
        
        var invQtyValue = $(invQtyEdt.target).val();                // 数量 值
        var invSaleCostValue = $(invSaleCostEdt.target).val();        // 单价 值
        var invMoneyValue = invQtyValue * invSaleCostValue;            // 金额  值
        var discountValue = $(discountEdt.target).val();            // 折扣额 值
        
        $(invMoneyEdt.target).numberbox("setValue",invMoneyValue);    // 给 金额  赋值

        if( discountValue == 0){
            $(discountEdt.target).numberbox("setValue",invMoneyValue);    // 给折扣额 赋值
            calcDiscount();
        }
        else{
            calcDiscount();
        }
        
    }

    /**
     * 根据 折扣额变更后  计算 折扣率
     * @author WUYF
     */
    function calcDiscount(){
        var objGrid = $("#customerStock");        // 表格对象
        var invMoneyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invMoney'});    // 金额对象
        var discountEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'discount'});    // 折扣额对象
        var depositEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'deposit'});        // 折扣率对象
        
        var invMoneyValue = $(invMoneyEdt.target).val();            // 金额值
        var discountValue = $(discountEdt.target).val();            // 折扣额 值
        var depositValue = discountValue / (invMoneyValue * 1.0);    // 折扣率 值
        
        $(depositEdt.target).numberbox("setValue",depositValue);    // 给折扣率 赋值
    }
    
    /**
     * 根据 折扣率变更后 计算 折扣额
     * @author WUYF
     */
    function calcDeposit(){
        var objGrid = $("#customerStock");        // 表格对象
        var invMoneyEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'invMoney'});    // 金额对象
        var discountEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex,field:'discount'});    // 折扣额对象
        var depositEdt = objGrid.datagrid('getEditor', {index:isEditingRowIndex, field:'deposit'});        // 折扣率对象
        
        var invMoneyValue = $(invMoneyEdt.target).val();            // 金额值
        var depositValue = $(depositEdt.target).val();                // 折扣率 值
        var discountValue = invMoneyValue * depositValue;            // 折扣额 值

        
        $(discountEdt.target).numberbox("setValue",discountValue);    // 折扣额  赋值
    }
    
    /******************************************************** 主要用于 明细表格 字段间的计算  End ******************************************************/
复制代码
easyuidatagrid是一个可编辑的数据表格组件,它支持对表格不同类型的列进行不同的编辑操作。对于Number列,如果你想要在用户输入时绑定事件,可以通过以下步骤来实现: 1. 首先,确保你的Number列是以编辑模式呈现的,通常这意味着列会有一个文本框供用户输入数据。 2. 为Number列绑定编辑事件。在easyui,可以通过`formatter`属性来自定义单元格的显示内容,而通过`editor`属性可以设置一个编辑器(如文本框)。 3. 使用`onLoadSuccess`事件绑定输入事件。这个事件是在数据加载成功后触发的,可以用来初始化编辑器以及绑定输入事件。在这个事件的回调函数,你可以通过jQuery来获取到对应列的编辑器,并绑定相应的事件处理函数。 示例代码如下: ```javascript $('#datagridId').datagrid({ // ... 其他配置项 ... columns:[[ // Number列的定义 { field: 'numberField', title: '数字', editor: { type: 'numberbox', options: { // numberbox的配置项 } }, formatter: function(value, row, index) { // 单元格显示的值 return value; } }, // ... 其他列定义 ... ]], onLoadSuccess: function() { // 确保编辑器已经加载完毕 var editor = $('#datagridId').find('.editable-cell').find('input[type=text]'); editor.on('input', function(e) { // 输入事件的处理逻辑 console.log('Number列输入内容:', $(this).val()); // 可以在这里进行输入验证或者其他处理 }); } }); ``` 在上述代码,`#datagridId`是你的datagrid组件的ID,`numberField`是Number列对应的字段名。`numberbox`是easyui提供的一个数字输入框组件,它有特殊的事件处理,如果你使用的是普通的文本框,则绑定事件的方式会有所不同。 请注意,上述代码仅为示例,具体实现可能需要根据你的实际需求和easyui的版本进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值