可编辑数据表格中计算两列值

使用教程 » 可编辑数据表格中计算两列值

在本教程中，您将学习如何在编辑datagrid中包含计算列。 计算列通常包含从一个或多个其他列计算出的值.

275/5000 首先，创建可编辑的datagrid。这里我们创建了一些可编辑的列，' listprice'，'amount'和' unitcost的列定义为数字框编辑类型。计算列是'unitcost'字段 listprice乘以amount的结果.

<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>

现在，当用户单击一行时，我们开始编辑操作.

var lastIndex; $('#tt').datagrid({ onClickRow:function(rowIndex){ if (lastIndex != rowIndex){ $(this).datagrid('endEdit', lastIndex); $(this).datagrid('beginEdit', rowIndex); } lastIndex = rowIndex; }, onBeginEdit:function(rowIndex){ var editors = $('#tt').datagrid('getEditors', rowIndex); var n1 = $(editors[0].target); var n2 = $(editors[1].target); var n3 = $(editors[2].target); n1.add(n2).numberbox({ onChange:function(){ var cost = n1.numberbox('getValue')*n2.numberbox('getValue'); n3.numberbox('setValue',cost); } }) } });

下载 EasyUI 实例: