1. Home
  2. Dane jQuery EasyUI grid - umożliwia edycję inline

Najlepszy samouczek Dane jQuery EasyUI grid - umożliwia edycję inline W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

Dane jQuery EasyUI grid - umożliwia edycję inline

Funkcja edytowalne ostatnio dodane do sieci danych (DataGrid) z. Pozwala to użytkownikowi na dodanie nowego wiersza do siatki danych (DataGrid). Użytkownicy mogą także zaktualizować jeden lub więcej wierszy.

Ten poradnik pokazuje, jak stworzyć siatkę danych (datagrid) i edytora inline.

Tworzenie siatki danych (DataGrid) 

	$ (Function () {
		$ ( '# Tt "). DataGrid ({
			Tytuł: "Edytowalne DataGrid"
			iconCls: "ikona-edit"
			szerokość: 660,
			wysokość: 250,
			singleSelect: prawda,
			idField: "itemid"
			url: 'datagrid_data.json "
			kolumny: [[
				{Pole: "itemid", tytuł: "Numer pozycji", Szerokość: 60}
				{Pole: "ProductId", tytuł: "produkt", szerokość: 100,
					formater: function (value) {
						for (var i = 0; i <products.length; i ++) {
							if (produkty [i] == wartość .productid) produkty Powrót [i] .name;
						}
						wartość powrotu;
					}
					Edytor: {
						Typ: "combobox"
						Opcje: {
							valueField: "ProductId"
							textField: "nazwa",
							danych: produktów,
							Wymagane: true
						}
					}
				}
				{Pole: "ListPrice", tytuł: "Cena", szerokość: 80, align: "prawo", redaktor: {type: "numberbox ', opcje: {precyzja: 1}}}
				{Pole: "unitcost", tytuł: "koszt jednostkowy, szerokość: 80, align:" prawo ", redaktor:" numberbox '},
				{Pole: "attr1", tytuł: "Atrybut ', szerokość: 150, wydawca:" text "},
				{Pola: 'status', tytuł: "Stan", szerokość: 50, align: 'centrum',
					Edytor: {
						Typ: "checkbox"
						Opcje: {
							on: 'P',
							off: ''
						}
					}
				}
				{Pole: "działanie", tytuł: "Action", szerokość: 70, align: 'centrum',
					formater: function (value, wiersz, index) {
						if (row.editing) {
							var s = '<a href="#" onclick="saverow(this)"> Zapisz </a>';
							var c = '<a href="#" onclick="cancelrow(this)"> Anuluj </a>';
							Return s + c;
						} Else {
							var e = '<a href="#" onclick="editrow(this)"> Edycja </a>';
							var d = '<a href="#" onclick="deleterow(this)"> Usuń </a>';
							powrót e + D;
						}
					}
				}
			]]
			onBeforeEdit: function (indeksowe, wiersz) {
				row.editing = true;
				updateActions (indeksowe);
			}
			onAfterEdit: function (indeksowe, wiersz) {
				row.editing = false;
				updateActions (indeksowe);
			}
			onCancelEdit: function (indeksowe, wiersz) {
				row.editing = false;
				updateActions (indeksowe);
			}
		});
	});
	updateActions funkcyjne (index) {
		$ ( '# Tt "). DataGrid (" updateRow', {
			index: indeks,
			wiersz: {}
		});
	}

Aby umożliwić inline edycji siatki danych, należy dodać obiekt do kolumny edytora. Editor (edytor) opowiada danych siatki (datagrid) Jak edytować pole i jak zapisać wartość pola. Jak widać, trzy redaktorzy (montażysta) Definiujemy: tekst, combobox i pola wyboru. 

	Funkcja getRowIndex (cel) {
		var tr = $ (target) .closest ( "tr.datagrid-row");
		powrót parseInt (tr.attr ( 'DataGrid-row-index'));
	}
	Funkcja editrow (cel) {
		$ ( '# Tt ") DataGrid (" BeginEdit "getRowIndex (target)) .;
	}
	Funkcja deleterow (cel) {
		$ .messager.confirm ( "Potwierdzenie", "Czy jesteś pewien?", Funkcja (r) {
			if (R) {
				$ ( '# Tt ") DataGrid (" deleteRow "getRowIndex (target)) .;
			}
		});
	}
	Funkcja saverow (cel) {
		$ ( '# Tt ") DataGrid (" endEdit "getRowIndex (target)) .;
	}
	Funkcja cancelrow (cel) {
		$ ( '# Tt ") DataGrid (" cancelEdit "getRowIndex (target)) .;
	}

Pobierz przykłady jQuery EasyUI

jeasyui-datagrid-datagrid12.zip

Hot Tutorials

Contact US

Dane jQuery EasyUI grid - umożliwia edycję inline
10/30