1. Home
  2. jQuery EasyUI danych Siatka - praca kolumny

Najlepszy samouczek jQuery EasyUI danych Siatka - praca kolumny W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

jQuery EasyUI danych Siatka - praca kolumny

W tym poradniku dowiesz się, jak włączyć kolumnę w działaniu edycji siatki danych (DataGrid) w. Kolumna operacyjna zazwyczaj zawiera wartości z jednego lub większej liczby operacji kolumny.

Najpierw należy utworzyć edytowalną siatkę danych (datagrid). Tutaj tworzymy jakąś edytowalną kolumnę 'ListPrice', 'ilość' i '' unitcost kolumnę zdefiniowaną jako edycji numberbox typu. Operacja jest kolumna "unitcost 'pole, będzie wynikiem pomnożenia kolumny Kwota ListPrice. 

	<Table id = "tt" style = "width: 600px; height: auto"
			title = "Edytowalne DataGrid w kolumnie obliczeniowej" iconCls = "icon-edit" singleSelect = "true"
			idField = "ItemID" url = "data / datagrid_data.json">
		<THEAD>
			<Tr>
				<Pole Th = "itemid" width = "80"> Item ID </ th>
				<Th pole = "ListPrice" width = align = "right" Redaktor "80" = "{type:" numberbox ', opcje: {precyzja: 1}} "> Cennik </ th>
				<Th pole = "ilość" width = "80" align = "right" Edytor = "{type:" numberbox ', opcje: {Precyzja: 0}} "> Ilość </ th>
				<Pole Th = "unitcost" width = "80" align = "right" Edytor = ""> numberbox jednostkowy koszt </ th>
				<Th pole = "attr1" width = "150" editor = "text"> Atrybut </ th>
				<Th pole = "status" width = "60" align = "center" Edytor = "{type:" pole ", opcje: {on: 'P', off: ''}}"> Stan </ th>
			</ Tr>
		</ THEAD>
	</ Table>

Gdy użytkownik kliknie na wiersz, rozpoczęliśmy akcję edycji. 

	var lastIndex;
	$ ( '# Tt "). DataGrid ({
		onClickRow: function (rowIndex) {
			if (lastIndex! = rowIndex) {
				$ ( '# Tt ") DataGrid (" endEdit "lastIndex) .;
				$ ( '# Tt ") DataGrid (" BeginEdit "rowIndex) .;
				setEditing (rowIndex);
			}
			lastIndex = rowIndex;
		}
	});

Aby utworzyć relację między eksploatacją niektórych kolumn, powinniśmy otrzymać aktualne redaktorów, i wiążą je do niektórych z powyższych zdarzeń. 

	Funkcja setEditing (rowIndex) {
		var redaktorzy = $ ( '# tt') DataGrid ( "getEditors ', rowIndex) .;
		var priceEditor = redaktorzy [0];
		var amountEditor = redaktorzy [1];
		var costEditor = redaktorzy [2];
		priceEditor.target.bind ( "zmiany", function () {
			oblicz ();
		});
		amountEditor.target.bind ( "zmiany", function () {
			oblicz ();
		});
		Funkcja oblicz () {
			Koszt var = priceEditor.target.val () * amountEditor.target.val ();
			$ (CostEditor.target) .numberbox ( "setValue ', kosztów);
		}
	}

Pobierz przykłady jQuery EasyUI

jeasyui-datagrid-datagrid15.zip

Hot Tutorials

Contact US

jQuery EasyUI danych Siatka - praca kolumny
10/30