2014-10-08 136 views
0

如何在過濾器標題左邊放置排序箭頭圖標?jqGrid左邊的排序箭頭圖標

example

我看到的問題作爲實現,因爲箭頭容器(S-ICO)是容器標題內(UI-的jqGrid可排序)...

<div id="jqgh_mylist_pDate" class="ui-jqgrid-sortable"> 
    Date 
    <span class="s-ico"> 
      <span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span> 
      <span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span> 
     </span> 
</div> 

回答

0

長期以來我試圖找到答案,我的問題並提出自己的解決方案可排序和不可排序列之間

差異只在風格在第一跨度標籤 - 顯示:無

在開始我試圖用檢測排序的列:隱藏選擇,但所有列只有空白跨度 S與此選擇兩種類型的列

<!-- sortable --> 
<div id="jqgh_manager" class="ui-jqgrid-sortable"> 
    Manager 
    <span class="s-ico"> 
     <span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span> 
     <span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span> 
    </span> 
</div> 

<!-- not sortable --> 
<div id="jqgh_operator" class="ui-jqgrid-sortable"> 
    Operator 
    <span class="s-ico" style="display:none"> 
     <span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span> 
     <span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span> 
    </span> 
</div> 

的返回true,這樣,我們可以檢查的風格規則span標籤

// Moving the arrows of sorting to the left side 
jQuery.jgrid.extend({ 
    moveSortArrows: function(){ 
     // Moving only sorted cols 
     // We must check style rule, because we can not use :hidden selector since this selector 
     // return true if width and height equal 0 
     // For more information see official documentations - http://api.jquery.com/hidden-selector/ 
     $('.ui-jqgrid-sortable:has(span.s-ico:not([style*="display:none"]))').each(
      function() { 
       // Add left padding for moving arrows 
       $(this).css('padding-left', '16px'); 
       // Moving arrows 
       $(this).find('span.s-ico').css({ 
        "position": "absolute", 
        "left": 0 
       }); 
      } 
     ); 
    } 
}); 

enter image description here