In this tutorial, you will learn how to include a column operation in an editable data grid (datagrid) in. Calculating a value from the column typically contains one or more other columns operations.
First, create an editable data grid (datagrid). Here we create some editable columns, 'listprice', 'amount' and 'unitcost' column is defined as numberbox edit type. Computation of column is 'unitcost' field, is the result of multiplying the amount column listprice.
title="Editable DataGrid with Calculated Column" iconCls="icon-edit" singleSelect="true"
idField="itemid" url="data/datagrid_data.json">
| Item ID | List Price | Amount | Unit Cost | Attribute | Status |
|---|
When the user clicks a row, we started an edit action.
each load index;
$('#tt').datagrid({
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('beginEdit', rowIndex);
setEditing(rowIndex);
}
lastIndex = rowIndex;
}
});
In order to create the operational relationship between the number of columns, we should get the current editors, and bind them to some of the events 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);
}
}
Download jQuery EasyUI examples
jeasyui-datagrid-datagrid15.zip (edit: Leilin Peng Source: network intrusion deleted)