jQuery EasyUI Data Grid - Spalte Betrieb
In diesem Tutorial erfahren Sie, wie eine Spalte im Betrieb von editierbaren Datenraster zu schließen (Datagrid) aus. Ein Operations Spalte enthält typischerweise Werte von einem oder mehreren anderen Spalten Betrieb.
Zuerst eine bearbeitbare Datenraster (Datagrid) erstellen. Hier schaffen wir eine bearbeitbare Spalte 'gelisteter', 'Höhe' und 'Unitcost "Spalte definiert als numberbox Editiertyp. Spalte Operation ist 'Unitcost "Feld, wird das Ergebnis von der Menge gelisteter Spalte multipliziert.
<Table id = "tt" style = "width: 600px; height: auto" title = "bearbeitbare Datenraster mit Berechnete Spalte" iconCls = "icon-edit" singleSelect = "true" idField = "itemid" url = "data / datagrid_data.json"> <Thead> <Tr> <Th Feld = "itemid" width = "80"> Item ID </ th> <Th Feld = "gelisteter" width = "80" align = "right" editor = "{type:" numberbox ', Optionen: {Präzision: 1}} "> Listenpreis </ th> <Th Feld = "Menge" width = "80" align = "right" editor = "{type:" numberbox ', Optionen: {Präzision: 0}} "> Betrag </ th> <Th Feld = "Unitcost" width = "80" align = "right" editor = "numberbox"> Kosten pro Einheit </ th> <Th Feld = "attr1" width = "150" editor = "text"> Attribut </ th> <Th field = "status" width = "60" align = "center" editor = "{type: 'Option', Optionen: {on: 'P', aus: ''}}"> Status </ th> </ Tr> </ Thead> </ Table>
Wenn der Benutzer auf eine Zeile klickt, haben wir begonnen, eine Bearbeitungsaktion.
var last; $ ( '# Tt'). Datagrid ({ onClickRow: function (rowIndex) { if (last! = rowIndex) { $ ( '# Tt') Datagrid ( 'EndEdit', last) .; $ ( '# Tt') Datagrid ( 'BeginEdit', rowIndex) .; setEditing (rowIndex); } last = rowIndex; } });
Um eine Beziehung zwischen dem Betrieb einiger Spalten erstellen, sollten wir die aktuellen Redakteure bekommen und bindet sie über einige der Ereignisse.
Funktion setEditing (rowIndex) { var Herausgeber = $ ( '# tt') Datagrid ( 'getEditors', rowIndex) .; var priceEditor = Editoren [0]; var amountEditor = Editoren [1]; var costEditor = Editoren [2]; priceEditor.target.bind ( 'change', function () { berechnen (); }); amountEditor.target.bind ( 'change', function () { berechnen (); }); Funktion berechnen () { var Kosten = priceEditor.target.val () * amountEditor.target.val (); $ (CostEditor.target) .numberbox ( 'setValue', Kosten); } }