jQuery EasyUI data Grid - Editor diperpanjang
Beberapa Editor umum (Editor) ditambahkan ke jaringan data (datagrid), sehingga pengguna mengedit data. Semua Editor (Editor) didefinisikan dalam objek $ yang .fn.datagrid.defaults.editors, ini dapat diperpanjang untuk mendukung Editor warisan baru (Editor). Tutorial ini akan menunjukkan cara untuk menambahkan editor numberspinner baru ke jaringan data (datagrid).
Mewarisi diperpanjang Editor numberspinner
$ .extend ($. Fn.datagrid.defaults.editors, { numberspinner: { init: function (container, opsi) { var input = $ ( '<input type = "text">') appendTo (kontainer) .; kembali input.numberspinner (pilihan); }, menghancurkan: function (target) { $ (Target) .numberspinner ( 'menghancurkan'); }, getValue: function (target) { kembali $ (target) .numberspinner ( 'getValue'); }, setValue: fungsi (target, value) { $ (Target) .numberspinner ( 'setValue', nilai); }, mengubah ukuran: function (target, lebar) { $ (Target) .numberspinner ( 'resize', lebar); } } });
Membuat data Grid (datagrid) di tag html
<Table id = "tt" style = "width: 600px; height: 250px" url = "data / datagrid_data.json" title = "diedit DataGrid" iconCls = "icon-edit" singleSelect = "true" idfield = "itemid" fitColumns = "true"> <Thead> <Tr> <Bidang Th = "Itemid" width = "60"> ID Item </ th> <Th field = "listprice" width = "80" align = "right" editor = "{type: 'numberbox', pilihan: {presisi: 1}}"> Daftar Harga </ th> <Bidang Th = "unitcost" width = "80" align = "right" editor = "numberspinner"> Satuan Biaya </ th> <Th field = "attr1" width = "180" editor = "text"> Atribut </ th> <Th field = "status" width = "60" align = "center" editor = "{type: 'checkbox', pilihan: {pada: 'P', off: ''}}"> Status </ th> <Bidang Th = "action" width = "80" align = "center" formatter = "formatAction"> Action </ th> </ Tr> </ Thead> </ Table>
Kami menetapkan numberspinner editor untuk 'biaya unit bidang. Ketika Anda mulai mengedit berturut-turut, pengguna dapat mengedit data dengan redaksi numberspinner.