jquery Easyui displays sortable fields when the DataGrid is initialized

In the list using the easy UI, you want to mark the fields that can be sorted, so that users can see which ones are sorted by clicking on the page.

Add an icon to the sortable field after the column name. The unordered field is also the same as the original.

Steps:

2. You need an icon,

4. You need to add the following code to your easy UI source

   $ ("span", TD). HTML (col.title);
   $ ("Span.datagrid-sort-icon", TD). HTML (" ");
   var cell=td.find ("Div.datagrid-cell");
   if (Opts.sortname = = Col.field) {
   Cell.addclass ("datagrid-sort-" + opts.sortorder);
   } else if (col.sortable==true) {
   Cell.addclass ("Datagrid-sort");
   }

   One of the last else if parts is manually added.

6. Finally, add the app CSS to your project to

   . datagrid-sort. Datagrid-sort-icon {
   padding:0 13px 0 0;
   margin-left:4px;
   Background:url (' images/sorter.png ') no-repeat 0px Center;
   }
   . datagrid-sort-asc. Datagrid-sort-icon,.datagrid-sort-desc. Datagrid-sort-icon {
   margin-left:0px;
   }
   
   Note: The picture can be freely chosen, secondly, the style name can be freely selected ("Datagrid-sort" for my Custom), finally, my easy UI is compressed version 1.3.2, search "Datagrid-sort-icon" can find the corresponding Code section, find

   if (Opts.sortname = = Col.field) {
   Cell.addclass ("datagrid-sort-" + opts.sortorder);
   Add a branch to the IF statement

   else if (col.sortable==true) {
   Cell.addclass ("Datagrid-sort");
   }

   Last one.

jquery Easyui displays sortable fields when the DataGrid is initialized