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

jQuery EasyUI danych Siatka - Rozszerzony edytor

Niektóre wspólne Editor (edytor) dodaje się do sieci danych (DataGrid), dzięki czemu użytkownicy edytować dane. Wszystko Editor (edytor) są zdefiniowane w $ .fn.datagrid.defaults.editors obiekt ten może być przedłużony do obsługi nowego edytora dziedziczenia (montaż). Ten poradnik pokaże Ci, jak dodać nową numberspinner edytor do sieci danych (DataGrid).

Dziedziczone rozszerzony numberspinner Editor

	$ .extend ($. Fn.datagrid.defaults.editors {
		numberspinner {
			startowych: function (tara, opcje) {
				var input = $ ( '<input type = "text"> ") appendTo (kontener) .;
				powrót input.numberspinner (opcje);
			}
			zniszczyć: function (cel) {
				$ (Docelowy) .numberspinner ( 'zniszczyć');
			}
			getValue: function (cel) {
				return $ (TARGET) .numberspinner ( "getValue ');
			}
			setValue: function (cel, wartość) {
				$ (Docelowy) .numberspinner ( "setValue", wartość);
			}
			rozmiar: function (cel, szerokość) {
				$ (Docelowy) .numberspinner ( "rozmiar", szerokość);
			}
		}
	});

Tworzenie siatki danych (DataGrid) w tagu html

	<Table id = "tt" style = "width: 600px; height: 250px"
			url = "data / datagrid_data.json" title = "Edytowalne DataGrid" iconCls = "icon-edit"
			singleSelect = "true" idField = "itemID" fitColumns = "true">
		<THEAD>
			<Tr>
				<Pole Th = "itemid" width = "60"> Item ID </ th>
				<Th pole = "ListPrice" width = align = "right" Redaktor "80" = "{type:" numberbox ', opcje: {precyzja: 1}} "> Cennik </ th>
				<Pole Th = "unitcost" width = "80" align = "right" Edytor = ""> numberspinner jednostkowy koszt </ th>
				<Th pole = "attr1" width = "180" editor = "text"> Atrybut </ th>
				<Th pole = "status" width = "60" align = "center" Edytor = "{type:" pole ", opcje: {on: 'P', off: ''}}"> Stan </ th>
				<Pole Th = "action" width = "80" align = "center" formatyzatora = "formatAction"> Akcja </ th>
			</ Tr>
		</ THEAD>
	</ Table>

Przypisujemy edytor numberspinner do pól "jednostkowych kosztów". Po uruchomieniu edycji wiersz, użytkownik może edytować dane redaktor numberspinner.

Pobierz przykłady jQuery EasyUI

jeasyui-datagrid-datagrid23.zip

jQuery EasyUI danych Siatka - Rozszerzony edytor
10/30