-
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 - Custom Sort
If the default sort behavior does not meet your needs, you can customize the data grid (datagrid) sorting behavior.
The most basic, the user can define on a column to sort the function name is sorter. This function takes two values, the return value will be as follows:
valueA> valueB => returns 1
valueA <valueB => -1
Custom Sort Code
<Table id = "tt"> </ table>
$ ( '# Tt'). Datagrid ({
title: 'Custom Sort',
iconCls: 'icon-ok',
width: 520,
height: 250,
singleSelect: true,
remoteSort: false,
columns: [[
{Field: 'itemid', title: 'Item ID', width: 60, sortable: true},
{Field: 'listprice', title: 'List Price', width: 70, align: 'right', sortable: true},
{Field: 'unitcost', title: 'Unit Cost', width: 70, align: 'right', sortable: true},
{Field: 'attr1', title: 'Attribute', width: 120, sortable: true},
{Field: 'date', title: 'Date', width: 80, sortable: true, align: 'center',
sorter: function (a, b) {
a = a.split ( '/');
b = b.split ( '/');
if (a [2] == b [2]) {
if (a [0] == b [0]) {
return (a [1]> b [1] 1:? -1);
} Else {
return (a [0]> b [0] 1:? -1);
}
} Else {
return (a [2]> b [2] 1:? -1);
}
}
},
{Field: 'status', title: 'Status', width: 40, align: 'center'}
]]
.}) Datagrid ( 'loadData', data);
You can see from this code, we create a sorter custom column for the date. The date format is 'dd / mm / yyyy', it can be easily sorted by date.