jQuery EasyUI Data Grid - Column Operations

jQuery EasyUI Data Grid - Column Operations

In this section, you'll learn how to include an operation column in the editable jQuery EasyUI data grid. An operation column usually contains some values from one or more other column operations.

First, create an editable grid of data. H ere we have created some editable columns, 'listprice', 'amount' and 'unitcost' columns defined as the numberbox editing type. The operation column is the 'unitcost' field and will be the result of the listprice multiplied by theamount 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="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>

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;
		}
	});

In order to create an computational relationship between some columns, we should get the current editors and bind some events to them.

	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 the jQuery EasyUI instance

jeasyui-datagrid-datagrid15.zip