Najlepszy samouczek jQuery EasyUI danych Siatka - Rozszerzony edytor W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,
Niektóre wspólne Editor (edytor) dodaje się do sieci danych (DataGrid), dzięki czemu użytkownicy edytować dane. Wszystko Editor (edytor) są zdefiniowane w $ .fn.datagrid.defaults.editors obiekt ten może być przedłużony do obsługi nowego edytora dziedziczenia (montaż). Ten poradnik pokaże Ci, jak dodać nową numberspinner edytor do sieci danych (DataGrid).
$ .extend ($. Fn.datagrid.defaults.editors { numberspinner { startowych: function (tara, opcje) { var input = $ ( '<input type = "text"> ") appendTo (kontener) .; powrót input.numberspinner (opcje); } zniszczyć: function (cel) { $ (Docelowy) .numberspinner ( 'zniszczyć'); } getValue: function (cel) { return $ (TARGET) .numberspinner ( "getValue '); } setValue: function (cel, wartość) { $ (Docelowy) .numberspinner ( "setValue", wartość); } rozmiar: function (cel, szerokość) { $ (Docelowy) .numberspinner ( "rozmiar", szerokość); } } });
<Table id = "tt" style = "width: 600px; height: 250px" url = "data / datagrid_data.json" title = "Edytowalne DataGrid" iconCls = "icon-edit" singleSelect = "true" idField = "itemID" fitColumns = "true"> <THEAD> <Tr> <Pole Th = "itemid" width = "60"> Item ID </ th> <Th pole = "ListPrice" width = align = "right" Redaktor "80" = "{type:" numberbox ', opcje: {precyzja: 1}} "> Cennik </ th> <Pole Th = "unitcost" width = "80" align = "right" Edytor = ""> numberspinner jednostkowy koszt </ th> <Th pole = "attr1" width = "180" editor = "text"> Atrybut </ th> <Th pole = "status" width = "60" align = "center" Edytor = "{type:" pole ", opcje: {on: 'P', off: ''}}"> Stan </ th> <Pole Th = "action" width = "80" align = "center" formatyzatora = "formatAction"> Akcja </ th> </ Tr> </ THEAD> </ Table>
Przypisujemy edytor numberspinner do pól "jednostkowych kosztów". Po uruchomieniu edycji wiersz, użytkownik może edytować dane redaktor numberspinner.