easyUI在可编辑的datagrid中计算两列的值

在这个教程中你将学习如何包含一个运算的列在可编辑的datagrid中,一个运算列通常包含一些运算值从一个或多个其他列.

查看Demo

首先,创建一个可编辑的datagrid,这就是我们创建的一些可编辑列,'listprice','amount' 和'unitcost' 列定义为numberbox 编辑类型,运算列是 'unitcost'字段,

将是 listprice 乘以 amount列的结果.

[html] view plain copy print ?

1. <table id="tt" style="width:600px;height:auto"   
2.         title="Editable DataGrid with Calculated Column" iconCls="icon-edit" singleSelect="true"   
3.         idField="itemid" url="data/datagrid_data.json">   
4.     <thead>   
5.         <tr>   
6.             <th field="itemid" width="80">Item ID</th>   
7.             <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>   
8.             <th field="amount" width="80" align="right" editor="{type:'numberbox',options:{precision:0}}">Amount</th>   
9.             <th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>   
10.             <th field="attr1" width="150" editor="text">Attribute</th>   
11.             <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>   
12.         </tr>   
13.     </thead>   
14. </table>   

<table id="tt" style="width:600px;height:auto"  
        title="Editable DataGrid with Calculated Column" iconCls="icon-edit" singleSelect="true"  
        idField="itemid" url="data/datagrid_data.json">  
    <thead>  
        <tr>  
            <th field="itemid" width="80">Item ID</th>  
            <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>  
            <th field="amount" width="80" align="right" editor="{type:'numberbox',options:{precision:0}}">Amount</th>  
            <th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>  
            <th field="attr1" width="150" editor="text">Attribute</th>  
            <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>  
        </tr>  
    </thead>  
</table>  

当用户点击一行的时候,我们开始一个编辑动作.

[javascript] view plain copy print ?

1. var lastIndex;   
2. $('#tt').datagrid({   
3.     onClickRow:function(rowIndex){   
4.         if (lastIndex != rowIndex){   
5.             $('#tt').datagrid('endEdit', lastIndex);   
6.             $('#tt').datagrid('beginEdit', rowIndex);   
7.             setEditing(rowIndex);   
8.         }   
9.         lastIndex = rowIndex;   
10.     }   
11. });   

var lastIndex;  
$('#tt').datagrid({  
    onClickRow:function(rowIndex){  
        if (lastIndex != rowIndex){  
            $('#tt').datagrid('endEdit', lastIndex);  
            $('#tt').datagrid('beginEdit', rowIndex);  
            setEditing(rowIndex);  
        }  
        lastIndex = rowIndex;  
    }  
});  

创建运算关系在一些列之间,我们应该得到 editors和绑定一些事件到他们上面.

[javascript] view plain copy print ?

1. function setEditing(rowIndex){   
2.     var editors = $('#tt').datagrid('getEditors', rowIndex);   
3.     var priceEditor = editors[0];   
4.     var amountEditor = editors[1];   
5.     var costEditor = editors[2];   
6.     priceEditor.target.bind('change', function(){   
7.         calculate();   
8.     });   
9.     amountEditor.target.bind('change', function(){   
10.         calculate();   
11.     });   
12.     function calculate(){   
13.         var cost = priceEditor.target.val() * amountEditor.target.val();   
14.         $(costEditor.target).numberbox('setValue',cost);   
15.     }   
16. }   

function setEditing(rowIndex){  
    var editors = $('#tt').datagrid('getEditors', rowIndex);  
    var priceEditor = editors[0];  
    var amountEditor = editors[1];  
    var costEditor = editors[2];  
    priceEditor.target.bind('change', function(){  
        calculate();  
    });  
    amountEditor.target.bind('change', function(){  
        calculate();  
    });  
    function calculate(){  
        var cost = priceEditor.target.val() * amountEditor.target.val();  
        $(costEditor.target).numberbox('setValue',cost);  
    }  
}  

下载 EasyUI 示例代码:

easyui-datagrid-demo.zip