jqGrid排序问题及解决办法

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

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

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

AJAX请求参数(排序条件)

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

AJAX回调(后台根据前端的排序条件返回)

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

前端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中。 true

从github下载jqGrid表格插件:https://github.com/tonytomov/jqGrid

 

相关经验

导读书签
书签初始化中…