1. Casa
  2. jQuery EasyUI griglia di dati - consente la modifica in linea

Il miglior tutorial jQuery EasyUI griglia di dati - consente la modifica in linea Nel 2024, in questo tutorial puoi imparare Scarica esempi jQuery EasyUI,

jQuery EasyUI griglia di dati - consente la modifica in linea

Funzione modificabile recentemente aggiunto alla griglia di dati (DataGrid) di. Esso consente all'utente di aggiungere una nuova riga alla griglia di dati (DataGrid). Gli utenti possono inoltre aggiornare una o più righe.

Questo tutorial vi mostra come creare una griglia di dati (DataGrid) e redattore in linea.

La creazione di una griglia di dati (DataGrid) 

	$ (Function () {
		$ ( '# Tt'). DataGrid ({
			Titolo: 'modificabile DataGrid',
			iconCls: 'icona-edit',
			Larghezza: 660,
			altezza: 250,
			singleSelect: vero,
			idField: 'Itemid',
			URL: 'datagrid_data.json',
			colonne: [[
				{Campo: 'Itemid', titolo: 'ID dell'oggetto', Larghezza: 60},
				{Campo: 'IDProdotto', titolo: 'Prodotto', width: 100,
					formattatore: function (value) {
						for (var i = 0; i <products.length; i ++) {
							se (prodotti [i] .productid == valore) prodotti di ritorno [i] .name;
						}
						valore di ritorno;
					},
					Editor: {
						Tipo: 'combobox',
						Opzioni: {
							ValueField: 'ProductID',
							textField: 'nome',
							dati: prodotti,
							richiesta: true
						}
					}
				},
				{Campo: 'Prezzo di listino', titolo: 'Listino', Larghezza: 80, allineare: 'destra', redattore: {type: 'numberbox', opzioni: {precisione: 1}}},
				{Campo: 'Costounitario', titolo: 'Costo unitario', Larghezza: 80, allineare: 'destra', editore: 'numberbox'},
				{Campo: 'attr1', titolo: 'attributo', Larghezza: 150, editor di: 'text'},
				{Campo: 'status', titolo: 'Stato', Larghezza: 50, allineare: 'centro',
					Editor: {
						Tipo: 'casella',
						Opzioni: {
							on: 'P',
							off: ''
						}
					}
				},
				{Campo: 'action', titolo: 'Azione', Larghezza: 70, allineare: 'centro',
					formattatore: la funzione (valore, fila, index) {
						if (row.editing) {
							var s = '<a href="#" onclick="saverow(this)"> Salva </a>';
							var c = '<a href="#" onclick="cancelrow(this)"> Cancellare </a>';
							ritorno s + c;
						} Else {
							var e = '<a href="#" onclick="editrow(this)"> Edit </a>';
							var d = '<a href="#" onclick="deleterow(this)"> Delete </a>';
							tornare e + d;
						}
					}
				}
			]],
			onBeforeEdit: la funzione (indice, riga) {
				row.editing = true;
				updateActions (indice);
			},
			onAfterEdit: la funzione (indice, riga) {
				row.editing = false;
				updateActions (indice);
			},
			onCancelEdit: la funzione (indice, riga) {
				row.editing = false;
				updateActions (indice);
			}
		});
	});
	updateActions funzione (indice) {
		$ ( '# Tt'). DataGrid ( 'updateRow', {
			Indice: indice,
			fila: {}
		});
	}

Per attivare la griglia di modifica dei dati in linea, si dovrebbe aggiungere una proprietà alla colonna editore. Editor (redattore) dice a Data Grid (DataGrid) Come modificare il campo e come salvare il valore del campo. Come si può vedere, tre editor (a cura di) Definiamo: testo, casella combinata e casella di controllo. 

	Funzione getRowIndex (target) {
		var TR = $ (target) .closest ( '-fila tr.datagrid');
		tornare parseInt (tr.attr ( 'datagrid-fila-index'));
	}
	Funzione editrow (target) {
		$ ( '# Tt') DataGrid ( 'BeginEdit', getRowIndex (target)) .;
	}
	Funzione DeleteRow (target) {
		$ .messager.confirm ( 'Conferma', 'Sei sicuro?', Funzione (r) {
			if (r) {
				$ ( '# Tt') DataGrid ( 'deleteRow', getRowIndex (target)) .;
			}
		});
	}
	Funzione saverow (target) {
		$ ( '# Tt') DataGrid ( 'EndEdit', getRowIndex (target)) .;
	}
	Funzione cancelrow (target) {
		$ ( '# Tt') DataGrid ( 'CancelEdit', getRowIndex (target)) .;
	}

Scarica esempi jQuery EasyUI

jeasyui-datagrid-datagrid12.zip

Tutorial caldi

Contattaci

jQuery EasyUI griglia di dati - consente la modifica in linea
10/30