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

<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的教程！