如何使分類圖標中的所有列標題上的排序狀態可見的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無論

回答

相關問題