-
jQuery EasyUI Tutorial
jEasyUI application
- jEasyUI Create a CRUD application
- jEasyUI Create a CRUD data grid
- jEasyUI Form CRUD application
- jEasyUI Create an RSS reader
jEasyUI Drag and drop
- jEasyUI Basic drag and drop
- jEasyUI Create a drag-and-drop shopping cart
- jEasyUI Create a school curriculum
jEasyUI Menus and buttons
- jEasyUI Create a simple menu
- jEasyUI Create a link button
- jEasyUI Create a menu button
- jEasyUI Create a split button
jEasyUI layout
- jEasyUI Create a border layout
- jEasyUI Create a complex layout
- jEasyUI Creates a fold panel
- jEasyUI Create a tab page
- jEasyUI Dynamically add a tab
- jEasyUI Add the AutoPlay tab
- jEasyUI Create the XP style left panel
jEasyUI Data grid
- jEasyUI Convert HTML tables to data grids
- jEasyUI Get the selected row data
- jEasyUI Add the query function
- jEasyUI Add a toolbar
- jEasyUI Create complex toolbars
- jEasyUI Sets the frozen column
- jEasyUI Dynamically change columns
- jEasyUI Format the column
- jEasyUI Set sort
- jEasyUI Custom sorting
- jEasyUI Create a column combination
- jEasyUI Add a check box
- jEasyUI Custom tab
- jEasyUI Enable in-line editing
- jEasyUI Extension editor
- jEasyUI Column operation
- jEasyUI Merge Cells
- jEasyUI Create a custom view
- jEasyUI Create a footer summary
- jEasyUI Condition Sets the line background color
- jEasyUI Create an attribute grid
- jEasyUI The extended line shows the details
- jEasyUI Create a subgrid
- jEasyUI Display massive data
- jEasyUI Add a paging component
jEasyUI window
- jEasyUI Create a simple window
- jEasyUI Customize the Window Toolbar
- jEasyUI Window and layout
- jEasyUI Create a dialog box
- jEasyUI Customize the dialog box
jEasyUI Tree menu
- jEasyUI Use the markup to create a tree menu
- jEasyUI Create an asynchronous tree menu
- jEasyUI Tree menu to add nodes
- jEasyUI Create a tree menu with check boxes
- jEasyUI Tree menu drag and drop control
- jEasyUI The Tree menu loads the parent / child nodes
- jEasyUI Create the base tree grid
- jEasyUI Create a complex tree grid
- jEasyUI Dynamic loading of tree
- jEasyUI The tree grid adds pagination
- jEasyUI Tree-lazy lazy-loading node
jEasyUI Form
- jEasyUI Create an asynchronous submission form
- jEasyUI Form validation
- jEasyUI Create a tree drop-down box
- jEasyUI Format the drop-down box
- jEasyUI Filter down the data grid
jEasyUI Reference Manual
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.