Geek asks and answers

JqGrid with custom sort type

I am using jqGrid 3.7.2 with local data. For some columns, the default sort types are insufficient. I need to provide a custom sorttype, which I understand from the documentation. I do not know how to make it work. The code below is my best attempt to get it working - I can't get it to call a custom sort function. The idea is to sort the "Posn" field in the order of "GK" → "DEF" → "MID" → "STR". Here is the code I would like to get:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Table Testbed</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/south-street/jquery-ui.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <link rel="stylesheet" type="text/css" href="/thirdParty/jqGrid/ui.jqgrid.css" >
  <script type="text/javascript" src="/thirdParty/jqGrid/grid.locale-en.js"></script>
  <script type="text/javascript" src="/thirdParty/jqGrid/jquery.jqGrid.min.js"></script>

  <script type="text/javascript">
  $().ready(function()
  {
   tableToGrid("#playerTable",
   {
    datatype:  "local",
    sortable:  true,
    hidegrid:  false,
    multiselect:  false,
    altRows:  true,
    height:   "100%", 
    width:   "155px",
    shrinkToFit: true,
    rowNum: 100,
    colNames:  ['Posn','Name'],
    colModel: [
     {name:'Posn', index:'Posn', width:100, sorttype:
      function(cell)
      {
       if (cell=='GK') return '0';
       if (cell=='DEF') return '1';
       if (cell=='MID') return '2';
       if (cell=='STR') return '3';
      }
     },
     {name:'Name', index:'Name', width:200, sorttype:"text"}
    ]
   });
  });
  </script>
 </head>

 <body>
  <table id="playerTable"> 
   <thead> 
    <tr><th>Posn</th><th>Name</th></tr> 
   </thead> 
   <tbody> 
    <tr><td>GK</td><td>Almunia</td></tr> 
    <tr><td>GK</td><td>Fabianski</td></tr> 
    <tr><td>DEF</td><td>Campbell</td></tr> 
    <tr><td>DEF</td><td>Clichy</td></tr> 
    <tr><td>MID</td><td>Denilson</td></tr> 
    <tr><td>MID</td><td>Diaby</td></tr> 
    <tr><td>STR</td><td>Arshavin</td></tr> 
    <tr><td>STR</td><td>Bendtner</td></tr> 
   </tbody> 
  </table> 
 </body>
</html>
+1
source share
2 answers

sorttype , onSortCol

, , sorttype, sorttype: sortDate, sortDate jqGrid, onSortCol. onSortcol- SortDate - onSortCol , , ? sorttype: sortDate onSortCol ? , jqGrid initailized, , , . , sortDate , jqGrid. 1, -1 0. - jqGrid...

, ?

+2

More articles:


All Articles