Il miglior tutorial jQuery EasyUI Data Grid - il funzionamento della colonna Nel 2024, in questo tutorial puoi imparare Scarica esempi jQuery EasyUI,
In questo tutorial, imparerete come includere una colonna nel funzionamento della griglia di dati modificabili (datagrid) in. Una colonna operativo contiene tipicamente valori da una o più altra operazione colonne.
In primo luogo, creare una griglia di dati modificabile (datagrid). Qui creiamo qualche colonna modificabile, 'Prezzo di listino', 'quantità' e la colonna 'Costounitario' definito come tipo numberbox modifica. colonna di funzionamento è campo 'Costounitario', sarà il risultato della moltiplicazione colonna quantità prezzo di listino.
<Table id = stile "tt" = "width: 600px; height: auto" title = "modificabile DataGrid con colonna calcolata" iconCls = "icona-edit" singleSelect = "true" idField = "itemid" url = "dati / datagrid_data.json"> <Thead> <Tr> <Field Th = "Itemid" width = "80"> ID Articolo </ th> <Th campo = larghezza "prezzo di listino" = "80" align = "right" Editor = "{type: 'numberbox', opzioni: {precisione: 1}}"> Listino </ th> <Th campo = larghezza "quantità" = "80" align = "right" Editor = "{type: 'numberbox', opzioni: {precisione: 0}}"> Importo </ th> <Field Th = "Costounitario" width = "80" align = "right" Editor = "numberbox"> Costo Unità </ th> <Th campo = larghezza "attr1" = "150" Editor = "text"> attributo </ th> <Field Th = larghezza "status" = "60" align = editor di "centro" = "{type: 'casella', opzioni: {on: 'P', off: ''}}"> Stato </ th> </ Tr> </ Thead> </ Table>
Quando l'utente fa clic su una riga, abbiamo iniziato un'azione di modifica.
var lastIndex; $ ( '# Tt'). DataGrid ({ onClickRow: function (rowIndex) { if (lastIndex! = rowIndex) { $ ( '# Tt') DataGrid ( 'EndEdit', lastIndex) .; $ ( '# Tt') DataGrid ( 'BeginEdit', rowIndex) .; setEditing (rowIndex); } lastIndex = rowIndex; } });
Per creare una relazione tra il funzionamento di alcune colonne, dovremmo ottenere gli editori attuali, e legarli ad alcuni degli eventi di cui sopra.
Funzione setEditing (rowIndex) { var redattori = $ ( '# TT') DataGrid ( 'getEditors', rowIndex) .; var = priceEditor editori [0]; var = amountEditor editori [1]; var = costEditor editori [2]; priceEditor.target.bind ( 'cambiamento', function () { calcolare (); }); amountEditor.target.bind ( 'cambiamento', function () { calcolare (); }); funzione di calcolo () { var = costo priceEditor.target.val () * amountEditor.target.val (); $ (CostEditor.target) .numberbox ( 'setValue', costi); } }