(/index.

php)

Home(/index.php) Demo(/demo/main/index.php) Tutorial(/tutorial/index.php)

Documentation(/documentation/index.php) Download(/download/index.php)

Extension(/extension/index.php) Contact(/contact.php) Forum(/forum/index.php)

Calculatetwocolumnvalues
ineditingDataGrid
Tutorial(/tutorial/index.php)CalculatetwocolumnvaluesineditingDataGrid

Inthistutorialyouwilllearnhowtoincludeacalculatedcolumninaeditingdatagrid.Acalculated
columngenerallycontainssomevaluecalculatedfromoneormoreothercolumns.

ViewDemo(datagrid15_demo.html)

First,createtheeditabledatagrid.Herewecreatesomeeditablecolumns,the'listprice','amount'and
'unitcost'columnsaredefinedasnumberboxeditingtype.Thecalculatedcolumnis'unitcost'fieldthat
willbetheresultofmultiplyinglistpricetimesamount.
 1. <tableid="tt"style="width:600px;height:auto"
2. title="EditableDataGridwithCalculatedColumn"iconCls="iconedit"
3. idField="itemid"url="data/datagrid_data.json">
4. <thead>
5. <tr>
6. <thfield="itemid"width="80">ItemID</th>
7. <thfield="listprice"width="80"align="right"editor="{type:'numberbox
8. <thfield="amount"width="80"align="right"editor="{type:'numberbox',o
9. <thfield="unitcost"width="80"align="right"editor="numberbox"
10. <thfield="attr1"width="150"editor="text">Attribute</th>
11. <thfield="status"width="60"align="center"editor="{type:'checkbox',o
12. </tr>
13. </thead>
14. </table>

Nowwebeginaneditingactionwhenuserclickarow.
 1. varlastIndex;
2. $('#tt').datagrid({
3. onClickRow:function(rowIndex){
4. if(lastIndex!=rowIndex){
5. $(this).datagrid('endEdit',lastIndex);
6. $(this).datagrid('beginEdit',rowIndex);
7. }
8. lastIndex=rowIndex;
9. },
10. onBeginEdit:function(rowIndex){
11. vareditors=$('#tt').datagrid('getEditors',rowIndex);
12. varn1=$(editors[0].target);
13. varn2=$(editors[1].target);
14. varn3=$(editors[2].target);
15. n1.add(n2).numberbox({
16. onChange:function(){
17. varcost=n1.numberbox('getValue')*n2.numberbox('getValue'
18. n3.numberbox('setValue',cost);
19. }
20. })
21. }
22. });

DownloadtheEasyUIexample:
easyuidatagriddemo.zip(downloads/easyuidatagrid15demo.zip)

Copyright20102017www.jeasyui.com