Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
620 views
in Technique[技术] by (71.8m points)

sorting - jqGrid with Custom sorttype

I am using jqGrid 3.7.2 with local data. For some columns the default sorttypes are not sufficient. I need to provide a custom sorttype, which I understand from the documentation is possible. I don't know how to get it to work though. The code below is my best attempt at getting it to work - I can't make it call the custom sorting function though. The idea is to sort the 'Posn' field in the order 'GK'->'DEF'->'MID'->'STR'. Here is the code I'd like to get working:

<!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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Probably you read about the usage of sorttype as a function in Tony's answer to my thread http://www.trirand.com/blog/?page_id=393/help/custom-local-sort-with-respect-of-the-function-as-index/. Your problem could be very easy solved. My suggestion to use index as a function for custom sorting of local jqGrid data work fine in the version 3.7.1, but not more in the version 3.7.2 of jqGrid. The feature sorttype as a function is implemented in the jqGrid after the release of the version 3.7.2.

So to be able to use sorttype as a function you have to download the latest version of jqGrid from http://github.com/tonytomov/jqGrid/tree/master. This is an uncompressed version of jqGrid. If you not familier with uncompressed version of jqGrid I'll recommend you to read http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install#development_installation to undertand which of js files and in the which order you should include. Under http://www.ok-soft-gmbh.com/jqGrid/CustomSorttype1.htm you can find a working example of your code where the custom function really work.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...