<jQuery EasyUI最新试用版免费下载>
在本教程中,您将学习如何在可编辑的数据网格中包含一个运算列。计算列一般含有一个或多个其他列计算的值。
查看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示例:easyui-datagrid-demo.zip
有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程!