jQuery EasyUI Data Grid - Editor esteso
Alcuni editor di comune (a cura di) aggiunto alla griglia di dati (DataGrid), in modo che gli utenti modificare i dati. Tutti Editor (redattore) sono definiti in oggetto la $ .fn.datagrid.defaults.editors, questo può essere esteso per supportare nuovo editor di successione (a cura di). Questo tutorial vi mostrerà come aggiungere un nuovo editor numberspinner alla griglia di dati (DataGrid).
Ereditato Editor numberspinner esteso
$ .extend ($. Fn.datagrid.defaults.editors, { numberspinner: { init: la funzione (contenitore, opzioni) { var input = $ ( '<input type = "text">') appendTo (contenitore) .; tornare input.numberspinner (opzioni); }, distruggere: la funzione (target) { $ (Target) .numberspinner ( 'distruggere'); }, getValue: function (target) { return $ (target) .numberspinner ( 'getValue'); }, setValue: function (destinazione, il valore) { $ (Target) .numberspinner ( 'setValue', value); }, ridimensionare: la funzione (target, larghezza) { $ (Target) .numberspinner ( 'ridimensionare', larghezza); } } });
La creazione di una griglia di dati (DataGrid) nel tag html
<Table id = stile "tt" = "width: 600px; height: 250px" url = "/ datagrid_data.json dati" title = "iconCls modificabile DataGrid" = "icona-edit" singleSelect = "true" idField = fitColumns "Itemid" = "true"> <Thead> <Tr> <Field Th = "Itemid" width = "60"> ID Articolo </ th> <Th campo = larghezza "prezzo di listino" = "80" align = "right" Editor = "{type: 'numberbox', opzioni: {precisione: 1}}"> Listino </ th> <Field Th = "Costounitario" width = "80" align = "right" Editor = "numberspinner"> Costo Unità </ th> <Th campo = larghezza "attr1" = "180" Editor = "text"> attributo </ th> <Field Th = larghezza "status" = "60" align = editor di "centro" = "{type: 'casella', opzioni: {on: 'P', off: ''}}"> Stato </ th> <Field Th = "azione" width = "80" align = "center" formattatore = "formatAction"> Azione </ th> </ Tr> </ Thead> </ Table>
Assegniamo editor di numberspinner alle 'unità cost campi. Quando si avvia la modifica di una riga, l'utente può modificare i dati dal redattore numberspinner.