jQuery EasyUI Data Grid - Erweiterter Editor
Einige häufig verwendete Editor (Editor) hinzugefügt, um die Datengitter (Datagrid), so dass die Benutzer die Daten bearbeiten. Alle Editor (Editor) in der $ .fn.datagrid.defaults.editors Objekt definiert sind, kann diese erweitert werden, um neue Vererbungs Editor (Editor) zu unterstützen. Dieses Tutorial zeigt Ihnen, wie Sie einen neuen Number Editor zum Datenraster (Datagrid) hinzuzufügen.
Geerbte erweitert Number Editor
$ .extend ($. Fn.datagrid.defaults.editors, { Number: { init: function (Container, Optionen) { var input = $ ( '<input type = "text">') appendTo (Container) .; Rückkehr input.numberspinner (Optionen); }, zerstören: function (Ziel) { $ (Target) .numberspinner ( 'zerstören'); }, getValue: function (Ziel) { return $ (Ziel) .numberspinner ( 'getValue'); }, setValue: function (Ziel, Wert) { $ (Target) .numberspinner ( 'setValue ", Wert); }, Größe ändern: function (Ziel, Breite) { $ (Target) .numberspinner ( 'die Größe, Breite); } } });
Erstellen eines Data Grid (Datagrid) in HTML-Tag
<Table id = "tt" style = "width: 600px; height: 250px" url = "data / datagrid_data.json" title = "Editierbare Datagrid" iconCls = "icon-edit" singleSelect = "true" idField = "itemid" fitColumns = "true"> <Thead> <Tr> <Th Feld = "itemid" width = "60"> Item ID </ th> <Th Feld = "gelisteter" width = "80" align = "right" editor = "{type:" numberbox ', Optionen: {Präzision: 1}} "> Listenpreis </ th> <Th Feld = "Unitcost" width = "80" align = "right" editor = "Number"> Kosten pro Einheit </ th> <Th Feld = "attr1" width = "180" editor = "text"> Attribut </ th> <Th field = "status" width = "60" align = "center" editor = "{type: 'Option', Optionen: {on: 'P', aus: ''}}"> Status </ th> <Th field = "action" width = "80" align = "center" Formatter = "formatAction"> Aktion </ th> </ Tr> </ Thead> </ Table>
Wir weisen Sie Number Editor auf die "Stückkosten" Felder. Wenn Sie die Bearbeitung einer Reihe starten, kann der Benutzer die Daten von Number Editor bearbeiten.