jqGrid在左侧放置排序箭头图标

Question

如何在过滤器标题的左侧放置排序箭头图标？

我将问题视为实现，因为箭头容器（s-ico）位于容器标题内（ui-jqgrid-sortable）......

<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>

Answer 1

很长一段时间我试图找到我的问题的答案并制定了我自己的解决方案

仅在第一个 span 标记中使用样式的可排序列和不可排序列之间的差异 - display：none

在开始时，我尝试使用：隐藏选择器检测可排序列，但所有列只有空白 span ，并且此选择器对于两种类型的列都返回true / p>

<!-- 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>

所以，我们可以检查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
                });
            }
        );
    }
});