具有自定义排序类型的 jqGrid答案

【问题标题】：jqGrid with Custom sorttype具有自定义排序类型的 jqGrid
【发布时间】：2011-03-20 11:18:54
【问题描述】：

我正在使用 jqGrid 3.7.2 和本地数据。对于某些列，默认排序类型是不够的。我需要提供一个自定义的排序类型，我从文档中了解到这是可能的。我不知道如何让它工作。下面的代码是我让它工作的最佳尝试——虽然我不能让它调用自定义排序函数。这个想法是按照“GK”->“DEF”->“MID”->“STR”的顺序对“Posn”字段进行排序。这是我想要工作的代码：

<!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>

【问题讨论】：

你能在发布代码时格式化你的代码吗？它在当前状态下有点不可读。
还有，tableToGrid的函数是什么？

标签： sorting jqgrid

【解决方案1】：

根据this forum post，自定义sorttype仅在网格初始化时调用，而不是在onSortCol事件期间调用：

据我所知，如果我有一个自定义排序类型，如 sorttype:sortDate，则函数 sortDate 只会在 jqGrid 初始化时调用，而不是 onSortCol 事件。进行 onSortcol 调用 SortDate 的唯一方法是手动覆盖 onSortCol 事件并编写执行此操作的繁琐代码并相应地更新网格吗？为什么不定义 sorttype:sortDate 只是自动覆盖 onSortCol 事件？我的意思是当 jqGrid 被初始化时它会正确排序，但是当我调用事件时它必须做一些内置排序。为什么我问是因为我的 sortDate 函数没有任何实际更新 jqGrid 的代码。它只返回 1、-1 或 0。它用于 jqGrid 之外的东西……

这是否解释了您所看到的行为？

【讨论】：

【解决方案2】：

您可能在 Tony 对我的线程 http://www.trirand.com/blog/?page_id=393/help/custom-local-sort-with-respect-of-the-function-as-index/ 的回答中了解了 sorttype 作为函数的用法。你的问题很容易解决。我建议使用 index 作为本地 jqGrid 数据自定义排序的函数在 3.7.1 版本中工作正常，但在 jqGrid 3.7.2 版本中没有更多。 sorttype 作为函数在 jqGrid 在 3.7.2 版本发布之后实现。

为了能够使用sorttype 作为函数，您必须从http://github.com/tonytomov/jqGrid/tree/master 下载最新版本的jqGrid。这是 jqGrid 的未压缩版本。如果您不熟悉 jqGrid 的未压缩版本，我建议您阅读 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install#development_installation 以了解您应该包含哪些 js 文件以及应包含的顺序。在http://www.ok-soft-gmbh.com/jqGrid/CustomSorttype1.htm 下，您可以找到自定义函数真正起作用的代码的工作示例。

【讨论】：

太棒了。谢谢你。是的，我确实在您提到的线程中看到了自定义排序的想法，但没有提到事情在 3.7.2 中不起作用！我假设我误解了什么。我认为对于任何使用本地数据的人来说，这都是一个至关重要的功能，所以这里是 3.7.3！
欢迎您！我对这个功能的重要性有同样的看法。顺便说一句，jqrid 的下一个版本将是 3.8 而不是 3.7.3，但这并不重要。不过，我很高兴为您提供帮助！