2012-02-04 116 views
2

jqGrid的列标题上的排序图标显示向上和向下箭头。有没有办法强制图标只显示一个方向,只允许升序排列?jqGrid只允许1个排序方向

谢谢。

回答

1

查看jqGrid事件文档here。您可以通过在onSortCol事件中返回'stop'来定义您自己的排序。像这样的东西应该工作:

onSortCol: function (index, iCol, sortorder) { 
    if (sortorder === "desc") { 
      return 'stop'; 
    } else { 
      //do regular sorting. 
    } 
} 

此外,如果你这样做对gridComplete应该隐藏下降箭头:

gridComplete: function() { 
    $('.ui-grid-ico-sort.ui-icon-desc.ui-sort-ltr').hide(); 
} 
2

the answer我展示了如何改变排序图标的可视性。我为您修改了以前的解决方案,只显示活动的排序图标。

The demo演示的结果,并示出了首部是这样的:

enter image description here

或该:

enter image description here

下面的代码显示的代码的最重要的部分:

var $grid = $("#list"); 

$grid.jqGrid({ 
    //... other jqGrid options 
    sortname: 'invdate', 
    sortorder: 'desc', 
    onSortCol: function (index, idxcol, sortorder) { 
     var $icons = $(this.grid.headers[idxcol].el).find(">div.ui-jqgrid-sortable>span.s-ico"); 
     if (this.p.sortorder === 'asc') { 
      //$icons.find('>span.ui-icon-asc').show(); 
      $icons.find('>span.ui-icon-asc')[0].style.display = ""; 
      $icons.find('>span.ui-icon-desc').hide(); 
     } else { 
      //$icons.find('>span.ui-icon-desc').show(); 
      $icons.find('>span.ui-icon-desc')[0].style.display = ""; 
      $icons.find('>span.ui-icon-asc').hide(); 
     } 
    } 
}); 
// hide initially the disaabled sorting icon 
$('#jqgh_' + $.jgrid.jqID($grid[0].id) + '_' + $.jgrid.jqID(sortName) + '>span.s-ico').each(function() { 
    $(this).find('>span.ui-icon-' + 
     (sortDirection ? 'asc' : 'desc')).hide(); 
}); 

我试图在onSortCol开始时使用$icons.find('>span.ui-icon-asc').show();,但在Google Chrome中存在问题,因为show()在<span>元素上设置了display: block样式。所以我只是删除了display: none风格。