添加交替行颜色与列分组颜色 - 是可能吗？ [英] Add alternating row colors with column grouping colors-is it possible?
问题描述
是否可以将GridView（与jQuery的 tablesorter 结合）设置为交替行颜色，但是更改每个列分组的颜色集合？如下图所示：
我目前硬编码的单元格背景颜色基于我创建的数组，例如greenArray是设置为（0,1,2,3）的整数数组，purpleArray是（4,5,6,7）等。但是，当我使用tablesorter插件时，显然单元格保持其颜色，交替颜色方案：
/ p>
EDIT ：我目前在VB.NET中添加背景颜色。以下函数定义数组，然后调用实际应用样式的ColorizeMe（）函数：
私有Sub StyleTable作为对象，ByVal e As GridViewRowEventArgs）句柄gvReport.RowDataBound
'定义数组以为gridview着色，如果单元格索引在数组中，它将被着色
Dim blueArray（）As Integer = {0,17,18,19,20}
Dim greenArray（）As Integer = {1，2，3，4}
Dim purpleArray（）As Integer = {5，6，7，8 }
Dim pinkArray（）As Integer = {9，10，11，12}
Dim yellowArray（）As Integer = {13，14，15，16}
.ColorizeMe（blueArray，greenArray，purpleArray，pinkArray，yellowArray，e.Row）
End Sub
b $ b
和ColorizeMe（）函数：
public SubcolorizeMe（ByVal blueArray（）As Integer，ByVal greenArray （）As Integer，_
ByVal purpleArray（）As Integer，ByVal pinkArray（）As Integer，_
ByVal yellowArray（）As Integer，ByVal row As GridViewRow）
Dim i As Integer = 0
对于每个单元格作为TableCell在row.Cells
如果Array.IndexOf（blueArray，i）<> -1 then
如果_isDark Then'颜色帐户列
cell.BackColor = ColorTranslator.FromHtml（＃B0C4DE）
否则
cell.BackColor = ColorTranslator.FromHtml E6E6FA）
End If
ElseIf Array.IndexOf（greenArray，i）<> -1 then
如果_isDark then
cell.BackColor = ColorTranslator.FromHtml（＃a4d5a8）
Else
cell.BackColor = ColorTranslator.FromHtml（＃ddf5de）
End If
ElseIf Array.IndexOf（purpleArray，i）<> -1 then
如果_isDark then
cell.BackColor = ColorTranslator.FromHtml（＃ada4d4）
Else
cell.BackColor = ColorTranslator.FromHtml（＃c7c6f4）
End If
ElseIf Array.IndexOf（pinkArray，i）<> -1 then
如果_isDark then
cell.BackColor = ColorTranslator.FromHtml（＃e3b3e0）
Else
cell.BackColor = ColorTranslator.FromHtml（＃fae1fa）
End If
ElseIf Array.IndexOf（yellowArray，i）<> -1 then
如果_isDark then
cell.BackColor = ColorTranslator.FromHtml（＃e0e3ab）
Else
cell.BackColor = ColorTranslator.FromHtml（＃f5f8dd）
结束如果
结束如果
i + = 1
接下来
_isDark =不_isDark
结束子
由于你的行交替亮/暗，你可以利用alpha透明背景颜色：
http://cssdeck.com/ labs / 6rgab657
< table>
< colgroup class =aspan =4/>
< colgroup class =bspan =4/>
< colgroup class =cspan =4/>
< colgroup class =dspan =4/>
< tr>
< td> A< / td>
< td> A< / td>
< td> A< / td>
< td> A< / td>
< td> B< / td>
< td> B< / td>
< td> B< / td>
< td> B< / td>
< td> C< / td>
< td> C< / td>
< td> C< / td>
< td> C< / td>
< td> D< / td>
< td> D< / td>
< td> D< / td>
< td> D< / td>
< / tr>
< tr>
< td> A< / td>
< td> A< / td>
< td> A< / td>
< td> A< / td>
< td> B< / td>
< td> B< / td>
< td> B< / td>
< td> B< / td>
< td> C< / td>
< td> C< / td>
< td> C< / td>
< td> C< / td>
< td> D< / td>
< td> D< / td>
< td> D< / td>
< td> D< / td>
< / tr>
< / table>
CSS：
.a {
background：blue;
}
.b {
background：green;
}
.c {
background：purple;
}
.d {
background：red;
}
tr：nth-child（odd）{
background：rgba（255，255，255，.70）;
}
Is it possible to style a GridView (in conjunction with jQuery's tablesorter) to have alternating row colors, but change the set of colors for each column grouping? See image below:
I'm currently hard-coding the cell background colors based on arrays I have created, e.g. greenArray is an integer array set to (0,1,2,3), purpleArray is (4,5,6,7) etc. However, when I use the tablesorter plugin, obviously the cells keep their colors, which messes up the alternating color scheme:
EDIT: I'm currently adding background color in VB.NET. The following function defines the arrays and then calls a ColorizeMe() function which actually applies the styling:
Private Sub StyleTable(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles gvReport.RowDataBound
'Define arrays to color the gridview, if cell index is in array, it will be colored
Dim blueArray() As Integer = {0, 17, 18, 19, 20}
Dim greenArray() As Integer = {1, 2, 3, 4}
Dim purpleArray() As Integer = {5, 6, 7, 8}
Dim pinkArray() As Integer = {9, 10, 11, 12}
Dim yellowArray() As Integer = {13, 14, 15, 16}
_packworks.ColorizeMe(blueArray, greenArray, purpleArray, pinkArray, yellowArray, e.Row)
End Sub
And the ColorizeMe() function:
Public Sub ColorizeMe(ByVal blueArray() As Integer, ByVal greenArray() As Integer, _
ByVal purpleArray() As Integer, ByVal pinkArray() As Integer, _
ByVal yellowArray() As Integer, ByVal row As GridViewRow)
Dim i As Integer = 0
For Each cell As TableCell In row.Cells
If Array.IndexOf(blueArray, i) <> -1 Then
If _isDark Then 'Color account column
cell.BackColor = ColorTranslator.FromHtml("#B0C4DE")
Else
cell.BackColor = ColorTranslator.FromHtml("#E6E6FA")
End If
ElseIf Array.IndexOf(greenArray, i) <> -1 Then
If _isDark Then
cell.BackColor = ColorTranslator.FromHtml("#a4d5a8")
Else
cell.BackColor = ColorTranslator.FromHtml("#ddf5de")
End If
ElseIf Array.IndexOf(purpleArray, i) <> -1 Then
If _isDark Then
cell.BackColor = ColorTranslator.FromHtml("#ada4d4")
Else
cell.BackColor = ColorTranslator.FromHtml("#c7c6f4")
End If
ElseIf Array.IndexOf(pinkArray, i) <> -1 Then
If _isDark Then
cell.BackColor = ColorTranslator.FromHtml("#e3b3e0")
Else
cell.BackColor = ColorTranslator.FromHtml("#fae1fa")
End If
ElseIf Array.IndexOf(yellowArray, i) <> -1 Then
If _isDark Then
cell.BackColor = ColorTranslator.FromHtml("#e0e3ab")
Else
cell.BackColor = ColorTranslator.FromHtml("#f5f8dd")
End If
End If
i += 1
Next
_isDark = Not _isDark
End Sub
Since your rows are alternating light/dark, you could take advantage of an alpha transparent background color:
http://cssdeck.com/labs/6rgab657
<table>
<colgroup class="a" span="4" />
<colgroup class="b" span="4" />
<colgroup class="c" span="4" />
<colgroup class="d" span="4" />
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
<td>A</td>
<td>B</td>
<td>B</td>
<td>B</td>
<td>B</td>
<td>C</td>
<td>C</td>
<td>C</td>
<td>C</td>
<td>D</td>
<td>D</td>
<td>D</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
<td>A</td>
<td>B</td>
<td>B</td>
<td>B</td>
<td>B</td>
<td>C</td>
<td>C</td>
<td>C</td>
<td>C</td>
<td>D</td>
<td>D</td>
<td>D</td>
<td>D</td>
</tr>
</table>
CSS:
.a {
background: blue;
}
.b {
background: green;
}
.c {
background: purple;
}
.d {
background: red;
}
tr:nth-child(odd) {
background: rgba(255, 255, 255, .70);
}
这篇关于添加交替行颜色与列分组颜色 - 是可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
