jqGrid는 단 하나의 정렬 방향 만 허용합니다.

Question

열 헤더의 jqGrid 정렬 아이콘은 위아래 화살표를 모두 표시합니다. 오름차순 만 허용하는 등 아이콘이 한 방향 만 표시하도록하는 방법이 있습니까?

감사합니다.

Answer 1

jqGrid 이벤트 설명서 here을 확인하십시오. onSortCol 이벤트에 'stop'을 반환하여 사용자 고유의 정렬을 정의 할 수 있습니다. 이런 식으로 뭔가 작동합니다 : 당신이 gridComplete에서 할 경우

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

이 또한 하강 화살표를 숨겨야합니다 :

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

Answer 2

the answer에서 나는 정렬 아이콘의 가시성을 변경하는 방법을 보여. 이전 솔루션을 수정하여 활성 정렬 아이콘 만 표시했습니다.

The demo 이렇게 헤더를 결과를 설명하고 보여준다

하거나 :

아래 코드는 코드의 가장 중요한 부분이 보여

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(); 
}); 

처음에는 에서 $icons.find('>span.ui-icon-asc').show();을 사용하려했지만 show()는 <span> 요소에 display: block 스타일을 설정했기 때문에 Google 크롬에 문제가 있습니다. 그래서 방금 display: none 스타일을 삭제했습니다.