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

Posted Wit_tang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 ******************************************************/

以上是关于EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他的主要内容，如果未能解决你的问题，请参考以下文章

雷林鹏分享：jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用

雷林鹏分享：jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用

easyui datagrid 单元格关闭编辑框再开启编辑框就报错

easyui datagrid如何让高度充满整个框

jQuery easyui终有一个datagrid用来生成一个表格，怎样在里面加入输入框啊<input>,

easyui datagrid可编辑表格使用经验分享