如何使分类图标中的所有列标题上的排序状态可见的jqGrid无论

的jqGrid栏显示图标排序仅列进行排序。如何使分类图标中的所有列标题上的排序状态可见的jqGrid无论

如何使分类图标可见的所有列，以便用户有想法可以单击列标题进行那种？大概两个排序方向的三角形必须处于非活动状态。

Telerik的radgrid控件具有这样的：

http://www.telerik.com/community/forums/aspnet/grid/possible-to-show-sort-icon-regardless-sort-status.aspx

如何实现这一点的jqGrid？目前，还没有任何indicaton该列排序。

更新

我尝试使用下面colmodel答案的解决方案。

问题：

对于窄和列排序图标不显示或部分显示。列标题右侧有很大的空白空间。如何减少这个空白空间，以便列标题文本和排序图标可以出现在这个区域？
排序之后，除了一个排序的所有列排序图标都将丢失。如何坚持他们？

来源

2012-01-16 Andrus

viewsortcols：[true，'vertical'，true]

来源

2013-06-17 08:23:55 LKF

当然，这应该是答案？！ – Whelkaholism 2013-11-20 14:24:19

@Whelkaholism：是的，作品完美！在这里寻找参数描述：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options – 2014-01-10 08:48:17

我觉得这个想法很好，所以我创建the demo它实现了行为：

enter image description here

的代码实现这一点：

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

// create the grid 
$grid.jqGrid({ 
    // all typical jqGrid parameters 
    onSortCol: function (index, idxcol, sortorder) { 
     if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol 
       && this.p.colModel[this.p.lastsort].sortable !== false) { 
      // show the icons of last sorted column 
      $(this.grid.headers[this.p.lastsort].el) 
       .find(">div.ui-jqgrid-sortable>span.s-ico").show(); 
     } 
    } 
}); 

// show sort icons of all sortable columns 
colModel = $grid.jqGrid('getGridParam', 'colModel'); 
$('#gbox_' + $.jgrid.jqID($grid[0].id) + 
    ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) { 
    var cmi = colModel[i], colName = cmi.name; 

    if (cmi.sortable !== false) { 
     // show the sorting icons 
     $(this).find('>div.ui-jqgrid-sortable>span.s-ico').show(); 
    } else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') { 
     // change the mouse cursor on the columns which are non-sortable 
     $(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'}); 
    } 
});

修订：如果你需要在大多数栏目中显示信息，你可以进行一些自定义在列标题的CSS中。例如，默认情况下，您在所有列标题中都有“中心”对齐。关于以下CSS

.ui-jqgrid .ui-jqgrid-htable th.ui-th-column 
{ 
    text-align:left 
} 
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column div.ui-jqgrid-sortable 
{ 
    margin-left:3px;margin-top:3px 
}

您可以将其更改为左对齐。作为结果，你将有列标题的更紧凑的外观：

enter image description here

看到相应的demo。顺便说一句，我建议你测试列的宽度是否足够大，以显示在WebKit浏览器的图标进行排序（谷歌Chrome或Safari）。

来源

2012-01-17 17:53:04 Oleg

非常感谢yuo。优秀。我遇到了一些问题并更新了关于它们的问题。 – Andrus 2012-01-17 20:07:10

@安德鲁斯：不客气！你可以在我的演示中重现所描述的问题吗？你写道：“排序后，排序后的所有列中的图标都会丢失。”你用'onSortCol'和我建议的代码吗？如果列的宽度不够宽，则可能存在不完整图标的问题。在这种情况下，您应该有独立于我的解决方案的相同问题。如果你只是使用原始的jqGrid，你应该有相同的可见性。 – Oleg 2012-01-17 20:19:04

我无法在演示中重现该问题。重现步骤：a）在IE9中按F5，等待页面加载完成。 b）点击Liik栏。所有其他col图标都会丢失。我发送测试网址给你。我完全使用你的onSortCol代码。 – Andrus 2012-01-17 20:57:19

如何使分类图标中的所有列标题上的排序状态可见的jqGrid无论

回答

相关问题