首页 > 安全资讯 >

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

12-08-11

@author YHC在这个教程中你将学习如何包含一个运算的列在可编辑的datagrid中,一个运算列通常包含一些运算值从一个或多个其他列.查看Demo首先,创建一个可编辑的datagrid,这就是我们创建的一些可编辑列,'list...

@author YHC

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

 


查看Demo


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

将是 listprice 乘以 amount列的结果.


[html]
<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>   

<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]
var lastIndex;   
$('#tt').datagrid({   
    onClickRow:function(rowIndex){   
        if (lastIndex != rowIndex){   
            $('#tt').datagrid('endEdit', lastIndex);   
            $('#tt').datagrid('beginEdit', rowIndex);   
            setEditing(rowIndex);   
        }   
        lastIndex = rowIndex;   
    }   
});   

var lastIndex; 
$('#tt').datagrid({ 
    onClickRow:function(rowIndex){ 
        if (lastIndex != rowIndex){ 
            $('#tt').datagrid('endEdit', lastIndex); 
            $('#tt').datagrid('beginEdit', rowIndex); 
            setEditing(rowIndex); 
        } 
        lastIndex = rowIndex; 
    } 
});  创建运算关系在一些列之间,我们应该得到editors和绑定一些事件到他们上面.


[javascript]
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);   
    }   
}   
作者:yhc13429826359
 

相关文章
最新文章
热点推荐