operasi lajur jEasyUI

Dalam tutorial ini, anda akan belajar cara memasukkan lajur yang dikira dalam grid data yang boleh diedit. Lajur yang dikira biasanya mengandungi beberapa nilai yang dikira daripada satu atau lebih lajur lain.

Pertama, buat grid data boleh diedit (datagrid). Di sini kami telah mencipta beberapa lajur boleh edit, lajur 'listprice', 'amount' dan 'unitcost' ditakrifkan sebagai jenis edit kotak nombor. Lajur yang dikira ialah medan 'unitcost', yang akan menjadi hasil darab harga senarai dengan lajur amaun.

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

Apabila pengguna mengklik pada baris, kami memulakan tindakan menyunting.

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

Untuk membuat operasi antara beberapa lajur, kita harus mendapatkan editor semasa dan mengikat beberapa acara kepada mereka.

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

Muat turun contoh jQuery EasyUI

jeasyui-datagrid-datagrid15.zip