jQuery EasyUI Data Grid - Extended Editor
Some common editor (editor) added to the data grid (datagrid), so that users edit the data. All editor (editor) are defined in the $ .fn.datagrid.defaults.editors object, this can be extended to support new inheritance editor (editor). This tutorial will show you how to add a new numberspinner editor to the data grid (datagrid).
Inherited extended numberspinner Editor
$ .extend ($. Fn.datagrid.defaults.editors, { numberspinner: { init: function (container, options) { var input = $ ( '<input type = "text">') appendTo (container).; return input.numberspinner (options); }, destroy: function (target) { $ (Target) .numberspinner ( 'destroy'); }, getValue: function (target) { return $ (target) .numberspinner ( 'getValue'); }, setValue: function (target, value) { $ (Target) .numberspinner ( 'setValue', value); }, resize: function (target, width) { $ (Target) .numberspinner ( 'resize', width); } } });
Creating a Data Grid (DataGrid) in html tag
<Table id = "tt" style = "width: 600px; height: 250px" url = "data / datagrid_data.json" title = "Editable DataGrid" iconCls = "icon-edit" singleSelect = "true" idField = "itemid" fitColumns = "true"> <Thead> <Tr> <Th field = "itemid" width = "60"> Item ID </ th> <Th field = "listprice" width = "80" align = "right" editor = "{type: 'numberbox', options: {precision: 1}}"> List Price </ th> <Th field = "unitcost" width = "80" align = "right" editor = "numberspinner"> Unit Cost </ th> <Th field = "attr1" width = "180" editor = "text"> Attribute </ th> <Th field = "status" width = "60" align = "center" editor = "{type: 'checkbox', options: {on: 'P', off: ''}}"> Status </ th> <Th field = "action" width = "80" align = "center" formatter = "formatAction"> Action </ th> </ Tr> </ Thead> </ Table>
We assign numberspinner editor to the 'unit cost' fields. When you start editing a row, the user can edit the data by numberspinner editor.