Opérations sur les colonnes jEasyUI

Dans ce tutoriel, vous apprendrez comment inclure une colonne calculée dans une grille de données modifiable. Une colonne calculée contient généralement un certain nombre de valeurs calculées à partir d'une ou plusieurs autres colonnes.

Tout d'abord, créez une grille de données modifiable (datagrid). Ici, nous avons créé des colonnes modifiables, les colonnes « prix liste », « montant » et « coût unitaire » sont définies comme type d'édition numberbox. La colonne calculée est le champ « coût unitaire », qui sera le résultat de la multiplication du prix catalogue par la colonne de montant.

	<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>

Lorsque l'utilisateur clique sur une ligne, nous démarrons une action d'édition.

	var lastIndex;
	$('#tt').datagrid({
		onClickRow:function(rowIndex){
			if (lastIndex != rowIndex){
				$('#tt').datagrid('endEdit', lastIndex);
				$('#tt').datagrid('beginEdit', rowIndex);
				setEditing(rowIndex);
			}
			lastIndex = rowIndex;
		}
	});

Afin de créer des opérations entre certaines colonnes, nous devons récupérer les éditeurs actuels et leur lier certains événements.

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

Télécharger l'instance jQuery EasyUI

jeasyui-datagrid-datagrid15.zip