jQuery EasyUI使用教程：數據網格中的列運算

---

Kendo UI for jQuery——創建現代Web應用程序的最完整UI庫！查看詳情>>>

<jQuery EasyUI最新試用版免費下載>

在本教程中，您將學習如何在可編輯的數據網格中包含一個運算列。計算列一般含有一個或多個其他列計算的值。

首先創建可編輯的數據網格。在這里我們創建了一些可編輯的列，'listprice'、'amount'和'unitcost'列被定義為numberbox編輯類型。運算列是'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示例：

購買jQuery EasyUI最新正版授權！詳情請""