Easyui to calculate the values of two columns in an editable datagrid

In this tutorial you will learn how to include a column of operations in an editable DataGrid, an operation column that typically contains some of the operands from one or more other columns.

View Demo

First, create an editable DataGrid, which is the editable columns we created, the ' listprice ', ' Amount ' and ' unitcost ' columns are defined as Numberbox edit types, the operation columns are ' unitcost ' fields,

will be the result of multiplying the ListPrice by the amount column.

<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=">item ID</th>

<th field=" ListPrice " width="  align= "right"  editor=" {type: ' Numberbox ', Options:{precision:1}} ">list price </th>   

<th field= "amount"  width= "80"  align= "right"  editor= >amount </th>   

<th field=" unitcost " width="  align= "right"  editor=" Numberbox ">unit cost</th< span class= "tag" >>   

<th field= "attr1"  width= "150"  editor= "text" >attribute</th>   

<th field="status" width="align=" Center " editor=" {type: ' checkbox ', Options:{on: ' P ', Off: '}} '>status</th>

</tr>

</thead>

</table>

<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=">item ID</th>

<th field=" ListPrice " width="  align= "right"  editor=" {type: ' Numberbox ', Options:{precision:1}} ">list price </th>    

<th field= "amount"  width= "80"  align= "right"  editor= >amount </th>    

<th field=" unitcost " width="  align= "right"  editor=" Numberbox ">unit cost</ Th>    

<th field= "attr1"  width= "150"  editor= "text" >attribute</th>    

<th field="status" width="align=" Center " editor=" {type: ' checkbox ', Options:{on: ' P ', Off: '}} '>status</th>

</tr>

</thead>

</table>

When the user clicks on a line, we start an edit action.

var LastIndex;

$ (' #tt '). DataGrid ({

Onclickrow:function (rowIndex) {

if (lastIndex! = RowIndex) {

$ (' #tt '). DataGrid (' EndEdit ', lastIndex);

$ (' #tt '). DataGrid (' BeginEdit ', rowIndex);

Setediting (RowIndex);

}

LastIndex = RowIndex;

}

});

var LastIndex;

$ (' #tt '). DataGrid ({

Onclickrow:function (rowIndex) {

if (lastIndex! = RowIndex) {

$ (' #tt '). DataGrid (' EndEdit ', lastIndex);

$ (' #tt '). DataGrid (' BeginEdit ', rowIndex);

Setediting (RowIndex);

}

LastIndex = RowIndex;

}

});

Create an operation relationship between some columns, we should get editors and bind some events to them above.

function setediting (rowIndex) {

var editors = $ (' #tt '). DataGrid (' geteditors ', rowIndex);

var priceeditor = editors[0];

var amounteditor = editors[1];

var costeditor = editors[2];

PriceEditor.target.bind (' change ', function () {

Calculate ();

});

AmountEditor.target.bind (' change ', function () {

Calculate ();

});

function Calculate () {

var cost = PriceEditor.target.val () * AmountEditor.target.val ();

$ (costeditor.target). Numberbox (' setValue ', cost);

}

}

function setediting (rowIndex) {

var editors = $ (' #tt '). DataGrid (' geteditors ', rowIndex);

var priceeditor = editors[0];

var amounteditor = editors[1];

var costeditor = editors[2];

PriceEditor.target.bind (' change ', function () {

Calculate ();

});

AmountEditor.target.bind (' change ', function () {

Calculate ();

});

function Calculate () {

var cost = PriceEditor.target.val () * AmountEditor.target.val ();

$ (costeditor.target). Numberbox (' setValue ', cost);

}

}

Easyui to calculate the values of two columns in an editable datagrid