YouTip

-- Learning not just technology, but dreams! Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Creating CRUD Applications jEasyUI Creating CRUD DataGrid jEasyUI Form CRUD Application jEasyUI Creating RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Creating Drag and Drop Shopping Cart jEasyUI Creating School Timetable jEasyUI Menu and Buttons jEasyUI Creating Simple Menu jEasyUI Creating Link Buttons jEasyUI Creating Menu Buttons jEasyUI Creating Split Buttons jEasyUI Layout jEasyUI Creating Border Layout jEasyUI Creating Complex Layout jEasyUI Creating Accordion Panels jEasyUI Creating Tabs jEasyUI Dynamically Adding Tabs jEasyUI Adding Auto-play Tabs jEasyUI Creating XP-style Left Panel jEasyUI DataGrid jEasyUI Converting HTML Table to DataGrid jEasyUI Getting Selected Row Data jEasyUI Adding Search Functionality jEasyUI Adding Toolbar jEasyUI Creating Complex Toolbar jEasyUI Setting Frozen Columns jEasyUI Dynamically Changing Columns jEasyUI Formatting Columns jEasyUI Setting Sorting jEasyUI Custom Sorting jEasyUI Creating Column Groups jEasyUI Adding Checkboxes jEasyUI Custom Pagination jEasyUI Enabling Row Editing jEasyUI Extending Editors jEasyUI Column Calculation jEasyUI Merging Cells jEasyUI Creating Custom View jEasyUI Creating Footer Summary jEasyUI Setting Row Background Color Conditionally jEasyUI Creating PropertyGrid jEasyUI Expanding Row Details jEasyUI Creating SubGrid jEasyUI Displaying Large Data jEasyUI Adding Pagination Component jEasyUI Window jEasyUI Creating Simple Window jEasyUI Custom Window Toolbar jEasyUI Window and Layout jEasyUI Creating Dialog jEasyUI Custom Dialog jEasyUI Tree Menu jEasyUI Creating Tree Menu with Markup jEasyUI Creating Async Tree Menu jEasyUI Adding Nodes to Tree Menu jEasyUI Creating Tree Menu with Checkboxes jEasyUI Tree Menu Drag and Drop Control jEasyUI Tree Menu Loading Parent/Child Nodes jEasyUI Creating Basic TreeGrid jEasyUI Creating Complex TreeGrid jEasyUI TreeGrid Dynamic Loading jEasyUI TreeGrid Adding Pagination jEasyUI TreeGrid Lazy Loading Nodes jEasyUI Form jEasyUI Creating Async Submit Form jEasyUI Form Validation jEasyUI Creating Tree ComboBox jEasyUI Formatting ComboBox jEasyUI Filtering ComboBox DataGrid jEasyUI Reference Manual jQuery EasyUI Plugins jQuery EasyUI Extensions jQuery EasyUI DataGrid – Setting Sorting jQuery EasyUI DataGrid – Creating Column Groups Deep Dive Programming Languages Development Tools Programming Web Services Web Service Scripting Languages Scripts Computer Science Web Design and Development Software jQuery EasyUI DataGrid - Custom Sorting If the default sorting behavior does not meet your needs, you can customize the sorting behavior of the DataGrid. At the most basic level, users can define a sorting function on a column. The function name is `sorter`. This function will accept two values and return as follows: valueA > valueB => return 1 valueA return -1 Custom Sorting Code $('#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 == b){ if (a == b){ return (a>b?1:-1); } else { return (a>b?1:-1); } } else { return (a>b?1:-1); } } }, {field:'status',title:'Status',width:40,align:'center'} ]] }).datagrid('loadData', data); As you can see from this code, we created a custom `sorter` for the `date` column. The date format is 'dd/mm/yyyy', which can be easily sorted by year, month, and day. Download jQuery EasyUI Example jeasyui-datagrid-datagrid14.zip jQuery EasyUI DataGrid – Setting Sorting jQuery EasyUI DataGrid – Creating Column Groups ByteArk Coding Plan Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax. Official supply, stable and reliable. Configuration Guide ¥9.9 / month Subscribe Now iFlytek Star Coding Plan Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax. One-stop experience and deployment platform. Configuration Guide ¥3.9 / month Subscribe Now Click here to share notes Category Navigation Python / Data Science AI / Intelligent Development Frontend Development Backend Development Database Mobile Development DevOps / Engineering Programming Languages Computer Basics XML / Web Service .NET Website Building Advertisement jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Creating CRUD Applications jEasyUI Creating CRUD DataGrid jEasyUI Form CRUD Application jEasyUI Creating RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Creating Drag and Drop Shopping Cart jEasyUI Creating School Timetable jEasyUI Menu and Buttons jEasyUI Creating Simple Menu jEasyUI Creating Link Buttons jEasyUI Creating Menu Buttons jEasyUI Creating Split Buttons jEasyUI Layout jEasyUI Creating Border Layout jEasyUI Creating Complex Layout jEasyUI Creating Accordion Panels jEasyUI Creating Tabs jEasyUI Dynamically Adding Tabs jEasyUI Adding Auto-play Tabs jEasyUI Creating XP-style Left Panel jEasyUI DataGrid jEasyUI Converting HTML Table to DataGrid jEasyUI Getting Selected Row Data jEasyUI Adding Search Functionality jEasyUI Adding Toolbar jEasyUI Creating Complex Toolbar jEasyUI Setting Frozen Columns jEasyUI Dynamically Changing Columns jEasyUI Formatting Columns jEasyUI Setting Sorting jEasyUI Custom Sorting jEasyUI Creating Column Groups jEasyUI Adding Checkboxes jEasyUI Custom Pagination jEasyUI Enabling Row Editing jEasyUI Extending Editors jEasyUI Column Calculation jEasyUI Merging Cells jEasyUI Creating Custom View jEasyUI Creating Footer Summary jEasyUI Setting Row Background Color Conditionally jEasyUI Creating PropertyGrid jEasyUI Expanding Row Details jEasyUI Creating SubGrid jEasyUI Displaying Large Data jEasyUI Adding Pagination Component jEasyUI Window jEasyUI Creating Simple Window jEasyUI Custom Window Toolbar jEasyUI Window and Layout jEasyUI Creating Dialog jEasyUI Custom Dialog jEasyUI Tree Menu jEasyUI Creating Tree Menu with Markup jEasyUI Creating Async Tree Menu jEasyUI Adding Nodes to Tree Menu jEasyUI Creating Tree Menu with Checkboxes jEasyUI Tree Menu Drag and Drop Control jEasyUI Tree Menu Loading Parent/Child Nodes jEasyUI Creating Basic TreeGrid jEasyUI Creating Complex TreeGrid jEasyUI TreeGrid Dynamic Loading jEasyUI TreeGrid Adding Pagination jEasyUI TreeGrid Lazy Loading Nodes jEasyUI Form jEasyUI Creating Async Submit Form jEasyUI Form Validation jEasyUI Creating Tree ComboBox jEasyUI Formatting ComboBox jEasyUI Filtering ComboBox DataGrid jEasyUI Reference Manual jQuery EasyUI Plugins jQuery EasyUI Extensions Online Examples ·HTML Examples ·CSS Examples ·JavaScript Examples ·Ajax Examples ·jQuery Examples ·XML Examples ·Java Examples Character Sets & Tools · HTML Character Set Settings · HTML ASCII Character Set · JS Obfuscation/Encryption · PNG/JPEG Image Compression · HTML Color Picker · JSON Formatting Tool · Random Number Generator Latest Updates · Codex Advanced Configuration · AI Agent Terminology · ZCode Getting Started Tutorial · Loop Engineerin... · Claude Code Us... · Claude Code Us... · docker compose ... Site Information · Feedback · Disclaimer · About Us · Article Archive Follow WeChat My Favorites Mark Article Browsing History Clear All No Records