jQuery EasyUI Data Grid - il funzionamento della colonna
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);
}
}
