jqGrid表头排序问题及解决办法

转自：https://www.exp99.com/f2e/qianduankaifa_225.html

作者：益享天开

jqGrid排序问题及解决办法

益享天开    2016-02-21    www.exp99.com    前端开发    

jqGrid

【摘要】最近在项目中发现jqGrid一个排序的问题，本文就jqGrid数据表中数字或金额无法正常排序说明解决办法。

jqGrid数据表排序

请看图中的“库存量”和“销售价”，其排序并未按照常规的数字大小执行，而是按字符串的形式来排序了！

实际项目中，后台返回的JSON数据是按照我给的排序条件正常返回到前端的（这里以“库存量”为例）：

AJAX请求参数（排序条件）

1. var sData = { 
2.   page:0 
3.   pageSize:12 
4.   sort:{"storQuantity":"desc"} 
5. } 

AJAX回调（后台根据前端的排序条件返回）

1. { 
2.   "data" : [ { 
3.     "id" : 127215, 
4.     "storQuantity" : 1397 
5.   }, 
6.   { 
7.     "id" : 127214, 
8.     "storQuantity" : 1000 
9.   }, 
10.   { 
11.     "id" : 98998 
12.     "storQuantity" : 999 
13.   }] 
14.   //省略... 
15. } 

前端jqGrid主要代码

1. $node.jqGrid({ 
2.   data:jsonData, 
3.   datatype:"local", 
4.   width:'100%', 
5.   height:'500', 
6.   loadonce: false, 
7.   colNames:['库存量','采购价','销售价','分类','医保类别'], 
8.   colModel:[{name:'storQuantity',sorttype:'integer'},{name:'inPrice',sorttype:'float'},{name:'salePrice',sorttype:'float'},{name:'type'},{name:'miType'}] 
9. }) 

jqGrid字段排序问题的解决办法

jqGrid初始化时，给库存量、采购价、销售价加上sorttype属性（默认缺省是string），参照colModel属性值。

整数sorttype的值为integer整型，金额sorttype的值为float浮点型。

说明：设置sorttype属性只有当datatype为local时有效！

附：colModel主要属性表一览

配置项	类型	描述	默认值
align	string	定义单元格中内容对齐方式，可用值： left, center, right.	left
cellattr	function	这个方法在创建单元格内容的时候给单元格添加附加到属性。所有可用的单元格属性或者style属性中可用的值都可以使用，这个方法需要返回字符串。传递进入这个配置方法的参数如下 rowId - 单元格所属行id val - 显示在单元格中的值 rawObject -原始的数据行对象。如果jqGrid配置中datatype为json，则为array对象。datatype为xml时则为xml node节点 cm - 所有colModel中配置的属于此列的属性 rdata - the data row which will be inserted in the row.  参数为键值对对象数组，name为colModel定义的name	null
classes	string	给单元格添加附加样式。如果有多个样式需要添加，样式用空格隔开。例如：classes:'class1 class2' 将会给此列单元格设置class1和class2样式。在css中有一个预定义的样式ui-ellipsis允许附加到特定的行	empty string
datefmt	string	sorttype配置为date（datetype被设置为local）或者editrules 配置为{date:true} 字段时，定义日期的显示格式。使用如php类型的时间格式。“/”，“-”，“.”可用于的时间分隔符号。可用的时间格式如下 y,Y,yyyy ：对应4位数字的年份 YY, yy ：对应2位数字的年份 m,mm ：对应月份 d,dd ：对应日期	Date (Y-m-d)
defval	string	作为搜索字段的默认值。只用于自定义搜索时的初始值	empty
editable	boolean	定义字段是否可以编辑。用于单元格，行编辑，和表单编辑	false
editoptions	array	依据edittype提供允许的值列表	empty array
editrules	array	给可编辑子都设置附加的规则	empty array
edittype	string	给行，表单编辑配置字段编辑类型。可能的值： text, textarea, select, checkbox, password, button, image and file	text
firstsortorder	string	设置为asc或者desc时，初始化时列将会按照这个进行排序。 随后排序将会轮流切换。	null
fixed	boolean	即使jqGrid的shrinkToFit配置为ture时，当此配置为true，也不允许重新计算列的宽度。如果shrinkToFit为true，当jqGrid容器宽度变化后调用setGridWidth 方法也不会修改此列宽度。	false
formatter	mixed	默认类型(string)或者客户自定义函数控制此字段的显示格式	none
frozen	boolean	设置为ture，此列将为固定的，不允许拖拽改变位置。	false
hidedlg	boolean	设置为true此列将不会出现在模式对话框中，用户可以选择此列的显示或者隐藏	false
hidden	boolean	定义是否隐藏此列在初始化时。	false
index	string	通过sidx参数设置排序时的索引名	empty string
jsonmap	string	定义此列数据键和json数据源中的映射关系	none
key	boolean	如果从服务器获取的数据部包含id，可以通过此配置指定唯一id列。只有一列能指定此属性，如果多列配置了这个属性，第一个配置的生效，后续会被忽略。	false
label	string	如果jqGrid的colNames数组为空，这个将作为此列的列头。如果colNames和这个配置为空，那name配置将作为此列的列头。	none
name	string	设置此列的唯一名称。name是必须的。jqGrid配置的事件名称和属性名称，保留字不能作为此配置项的值，包括subgrid，cb和rn。	Required
resizable	boolean	定义此列是否允许调整宽度	true
search	boolean	当配置了查询模块后，是否允许将此列作为查询条件	true
sortable	boolean	定义是否允许点击列表头进行排序	true
sorttype	mixed	当datatype为local时有效。定义适当的排序类型。可用值 int/integer ：按照整数排序 float/number/currency：按照数字排序 date ：日期排序 text ：文本排序 function ：按照自定义函数来排序。自定义函数接受此列排序的值，需要返回一个值。【原文： To this function we pass the value to be sorted and it should return a value too.】应该和javascript数组排序使用函数作为参数排序差不多，return-1/0/1	text
stype	string	定义查询对象的类型	text
template	object	设置colModel有效属性。当你希望覆盖列模式默认值时配置这个比较有用。 See cmTemplate in grid options	null
title	boolean	如果设置为false，当鼠标移动到单元格上时不显示title提示信息。	true
width	number	设置初始化列宽，单位px。注意不能设置为百分比	150
xmlmap	string	定义此列和xml文件中的xml节点映射	none
unformat	function	返回单元格的原始值，详细参考：jqGrid自定义格式化类型（在排序时也会调用unformat，在排序过程中返回值用于比较）	null
viewable	boolean	此配置仅在viewGridRow 方法下有效。当配置为false时此列不会出现在view Form中。