EasyUI Forum

	<table id="productTable" style="width:100%"  singleSelect="true" fitColumns="true">
		<thead>
			<tr> 
				<th field="name" width="23%">Наименование</th>
				<th field="articul" width="7%">Артикул</th>
				<th field="rest" width="7%">Наличие</th>
				<th field="unit" width="5%">Единица хранения</th>
				<th field="price" width="7%" editor="{type:'numberbox',options:{precision:2, readonly: true}}">Цена</th>
				<th field="volume" width="7%">Объем упаковки</th>
				<th field="amount" width="5%" editor="{type:'numberbox',options:{precision:2}}">Количество упаковок</th>
				<th field="total" width="7%" editor="{type:'numberbox',options:{precision:2, readonly: true}}">Итого</th>
				<th field="photo" width="7%">Фото</th>
				<th field="comment" width="20%" editor="text">Комментарий</th>
				<th field="rate" hidden='true'/>
				<th field="order" hidden='true'/>
				<th field="id" hidden='true'/>
				<th field="isProduct" hidden='true'/>
				<th field="action" width="80" align="center" formatter="formatAction">Изменить</th>
			</tr>
		</thead>
	</table>
//-----------
	$(function(){
		$('#productTable').datagrid({
			onBeforeEdit:function(index,row){
				$(this).datagrid('updateRow', {index:index,row:{editing:true}})
			},
			onAfterEdit:function(index,row){
				$(this).datagrid('updateRow', {index:index,row:{editing:false}})
			},
			onCancelEdit:function(index,row){
				$(this).datagrid('updateRow', {index:index,row:{editing:false}})
			},
			onBeginEdit:function(rowIndex){
				var editors = $(this).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);
					}
				})
			},			
			idField:'id',
			treeField:'productTable',
			nowrap:false,
			rownumbers:true
		});
	});