jqGrid斑馬/ alt行背景由於UI主題類而不工作

我們無法在jqGrid中獲取斑馬條紋。jqGrid斑馬/ alt行背景由於UI主題類而不工作

我們使用altclass and altRows - 問題是它出現在ui-widget-content類從jQuery UI有一個background設置這是壓倒我們altclass的background設置。有任何想法嗎？

更新：下面工作這兩個答案。奧列格是迄今爲止最乾淨的解決方案。

對於Oleg的解決方案，您的altRows類必須在包含JQuery UI CSS類之後定義，因爲JQuery UI和自定義alt rows類都定義了背景屬性和last class defined wins。

來源

2010-12-06 Marcus Leon

你能張貼代碼示例包括你用的什麼jQuery UI的theam。你如何定義你使用的`altclass`類。最好的是重現問題的完整代碼示例。 – Oleg 2010-12-06 19:48:49

我們使用輕彈主題。 – 2010-12-06 20:04:53

的jqGrid使用jQuery UI類' ui-priority-secondary「作爲altclass參數的默認值。類在jQuery UI documentation作爲

類描述要被施加到在一個情況下優先級的2 按鈕其中需要按鈕層次結構。對元素應用正常的重量文字和輕微的透明度。

這是因爲不完全是斑馬條紋的描述，但沒有太多的標準類可以使用。不幸的是，甚至在大多數主題中，具有'ui-priority-secondary'的行看起來與奇數行沒有太大差別。所以爲了提高能見度，必須手動定義類altclass。

偶數行看起來不同於奇數行的最原始方法之一是使用不同的背景色。問題在於ui-widget-content類使用的是使用background CSS樣式定義的背景圖像，因此background-color的最原始設置將不起作用。要解決這個問題，必須做一件事1）刪除ui-widget-content類2）使用background CSS樣式代替background-color 2）使用background-image:none和background-color樣式一起使用。要做到這一點最簡單的方法是定義自定義AltRowClass爲

.myAltRowClass { background: #DDDDDC; }

或

.myAltRowClass { background-color: #DDDDDC; background-image: none; }

，然後使用的jqGrid的altRows:true和altclass:'myAltRowClass'參數。

另一種方式是做同樣的沒有altRows和altclass參數：

loadComplete: function() { 
    $("tr.jqgrow:odd").css("background", "#DDDDDC"); 
}

在這種情況下，你會在徘徊或選擇偶數行的一些小缺點。下面的代碼工作得更好，但它做同樣的東西altRows:true和altclass:'myAltRowClass'做：

loadComplete: function() { 
    $("tr.jqgrow:odd").addClass('myAltRowClass'); 
}

事業的背景顏色和其他CSS樣式屬性，你可以爲偶數行設置是由您使用的主題依賴，所以如果你打算使用ThemeRoller，你將不得不爲每個主題選擇altclass，你可以選擇。

已更新：剛纔看到我忘了包含演示文件的鏈接，演示了我現場寫的內容。演示是here。

來源

2010-12-07 22:05:13 Oleg

每Oleg ..在loadComplete：

$.each(grid.getDataIDs(), 
    function(index, key){ 
     if(index % 2 !== 0) { 
      var t = $("#" + key, grid); 
      t.removeClass('ui-widget-content'); 
     } 
    } 
);

然後在網格的定義：

altRows:true, 
altclass:'myAltRowClass',

隨着`myAltRowClass '：

.myAltRowClass { background: #F8F8F8 ; border:1px solid #DDDDDD; }

來源

2010-12-06 19:47:35

對不起馬庫斯，這是你的問題的解決方案還是隻解釋？如果它不是一個解決方案，你還應該包含你使用的`myAltRowClass`定義。 – Oleg 2010-12-06 21:33:23

這裏是我的解決方案：

altRows  : true, 
altclass : 'oddRow', 

gridComplete: function() { 
    $(".jqgrow:odd").hover(
     function() { $(this).removeClass("oddRow");}, 
     function(event) { $(this).addClass("oddRow");} 
    ); 
},

它爲我工作，可與任何UI主題使用。

來源

2011-09-30 10:49:32 thanat

添加以下的CSS的補充文件的樣式備用行和列懸停，而無需使用額外的JavaScript：

table.ui-jqgrid-btable tr:nth-child(odd) td{ 
    background-color: #E7F0FD; 
} 
table.ui-jqgrid-btable tr:hover:nth-child(odd) td{ 
    background: url("images/ui-bg_glass_75_dadada_1x400.png") repeat-x scroll 50% 50% rgb(6, 41, 97); 
}

來源

2013-05-02 19:35:16

jqGrid斑馬/ alt行背景由於UI主題類而不工作

回答

相關問題